Currently, I am facing performance issues while creating over 12,000 BoxHelpers. The loading and navigating processes are extremely slow. I am seeking advice on a more efficient approach.
This is the code snippet that I am using:
var c=[];
c.push([-100,15,285]);
c.push([0,25.5,285]);
c.push([0,51,285]);
c.push([0,76.5,285]);
c.push([0,0,297]);
c.push([0,25.5,297]);
c.push([0,51,297]);
Note: This is just an example, as the actual data is retrieved from JSON.
var cubeGeometry = new THREE.CubeGeometry(10, 24.5, 12);
for (var i in c) {
var cube = new THREE.BoxHelper();
cube.material.color.set(0x6666FF);
cube.scale.set(5, 12, 6);
cube.position.set(c[i][0], c[i][1], c[i][2]);
scene.add(cube);
}
I am considering building the entire structure beforehand and then adding it to the scene. However, I am unsure of how to proceed with this approach.