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

您的代码有点简陋。您分配的afaik：

var geom = new THREE.Geometry();

但是从此以后再也不做任何事情……以后再做

var geometry = new THREE.BufferGeometry();

但是无论如何..每张面孔制作几何图形是过大的。如果您只想让脸部光亮... 也许尝试制作原始几何体的.clone（），将其添加到网格的.clone（）中...将其上的材质更改为其他材质，以使三角形变亮，然后仅使用geometry.setDrawRange绘制您感兴趣的三角形：

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

您是否要用鼠标进行脸部挑选？

渲染多个对象使Three.js崩溃

1 个答案: