使用Three.js渲染多个对象时浏览器崩溃

Question

我有3个对象要在我的场景中渲染。我测试了两个案例。首先，我加载我的3个对象作为STL文件，然后我没有问题。其次，我将每个对象划分为多个表面，因此我为每个表面创建BufferGeometry。每个对象有多个曲面(1000到5000)。按曲面分解的原因是我想要一种最简单的方法来突出显示曲面选择。使用第二种方法，如果我加载这3个对象，我的浏览器就会崩溃。它可以处理两个对象。这是我的代码：

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();

}

有没有办法一面一面地渲染我的对象？

Answer 1

你的代码有点不可靠..您分配的afaik：

var geom = new THREE.Geometry();

但是永远不要用它做任何事。然后再做

var geometry = new THREE.BufferGeometry();

但不管怎样..为每个面创建一个几何体是大材小用。如果你只是想突出一张脸..。也许可以尝试创建原始几何体的.clone()，将其添加到网格的.clone()中……将该mehs上的材质更改为其他材质以高亮显示三角形，然后使用geometry.setDrawRange仅绘制您感兴趣的三角形：

https://threejs.org/docs/#api/en/core/BufferGeometry.setDrawRange

你在试着用鼠标选脸吗？