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

Question

我的场景中有 3 个对象要渲染。我测试了2个案例。首先，我将我的 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

您的代码有点 jankey.. 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

你想用鼠标做人脸识别吗？