When it comes to rendering objects in a scene, I encountered an issue with loading multiple objects. Initially, loading all 3 objects as STL files worked fine. However, when I attempted to divide each object into multiple surfaces and create BufferGeometry for each surface, I ran into problems. Each object contains anywhere from 1000 to 5000 surfaces, and my goal was to simplify surface selection for highlighting purposes.
The code snippet below outlines my approach:
function renderSurfaces(data, checkbox) {
var group = new THREE.Group();
var vertices = data.vertices;
var surfaces = data.surfaces;
var triangles = data.triangles;
//Generate all surface and add each one to the group
var surfacesKeys = Object.keys(surfaces);
for (var i = 0; i < surfacesKeys.length; i++) {
var indices = [];
//Get all triangle ids composing the current surface
var surfaceTriIds = surfaces[surfacesKeys[i]].surfaceTriIds;
//Loop over surfaceTriIds
var geom = new THREE.Geometry();
for (var j = 0; j < surfaceTriIds.length; j++) {
//Get vertices Id for one triangle
var verticeTriangleIds = triangles[surfaceTriIds[j]];
//Set triangle indices
indices.push(verticeTriangleIds[0]);
indices.push(verticeTriangleIds[1]);
indices.push(verticeTriangleIds[2]);
//
}
var geometry = new THREE.BufferGeometry();
geometry.setIndex(indices);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.computeVertexNormals();
var obj = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
color: 0xAAAAAA,
specular: 0x111111,
shininess: 200
}));
group.add(obj);
}
scene.add(group);
camera.lookAt(group.position);
render();
However, I am facing a challenge with the browser crashing when attempting to load all 3 objects in this manner. It seems to handle rendering two objects fine. I am now wondering if there is an alternative way to render my objects surface by surface.