Currently, I am tackling a project that involves 59k points, where each point needs to be depicted as a cube in three.js.
Although I have merged all the geometries into one mesh to enhance performance, the rendering speed is still quite sluggish (around 10-30 fps).
To meet the project requirements of smooth operation (ideally at 40-60 fps), I am seeking ways to optimize the process further.
Below is the snippet of code responsible for creating the mesh and scene:
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(230.09813315369976, 233.67707474083232, -181.06937619976165);
camera.updateProjectionMatrix();
THREE.currentCamera = camera;
if (controlsEnabled) {
controls = new THREE.OrbitControls(camera);
controls.damping = 0.2;
}
scene = new THREE.Scene();
geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false});
console.log("Adding " + locations.length + " voxels");
var matrix = new THREE.Matrix4();
$.each(locations, function (index, value) {
geo = new THREE.BoxGeometry(1, 1, 1);
matrix.makeTranslation(
value['x'],
0,
value['y']
);
geometry.merge(geo, matrix);
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
axes = new THREE.AxisHelper(100);
scene.add(axes);
camera.lookAt(mesh);
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
var element = renderer.domElement;
document.getElementById('page-wrapper').appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
var flag = 0;
element.addEventListener("mousedown", function () {
flag = 0;
}, false);
element.addEventListener("mousemove", function () {
flag = 1;
}, false);
element.addEventListener("mouseup", function () {
if (flag === 0) {
console.log("click");
doRaycast = true;
}
else if (flag === 1) {
console.log("drag");
}
}, false);
$('#loading-vis').hide();
animate();
}