用独特的材料合并多个网格

ThreeJS Merging multiple meshes with unique materials

本文关键字：网格 合并 材料      更新时间：2023-09-26

我不知道我做错了什么。我有多个网格，我试图合并成一个网格，这样我就可以节省绘制调用。我的每个网格都有一个独特的材料。在这个例子中，它只是有一个不同的颜色，但实际上他们将有独特的纹理映射。

这是我的代码:

        materials = [];
        blocks = [];
        var tempMat;
        var tempCube;
        var tempGeo;
        var tempvec;

        // block 1
        tempMat = new THREE.MeshLambertMaterial({ color: '0x0000ff' });
        materials.push( tempMat );
        tempGeo = new THREE.CubeGeometry(1, 1, 1);
        for (var ix=0; ix<tempGeo.faces.length; ix++) {
                tempGeo.faces[ix].materialIndex = 0;
        }
        tempCube = new THREE.Mesh( tempGeo, tempMat );
        tempCube.position.set(0, 3, -6);
        blocks.push( tempCube );

        // block 2
        tempMat = new THREE.MeshLambertMaterial({ color: '0x00ff00' });
        materials.push( tempMat );
        tempGeo = new THREE.CubeGeometry(1, 1, 1);
        for (var ix=0; ix<tempGeo.faces.length; ix++) {
                tempGeo.faces[ix].materialIndex = 1;
        }
        tempCube = new THREE.Mesh( tempGeo, tempMat );
        tempCube.position.set(1, 3, -6);
        blocks.push( tempCube );

        // Merging them all into one
        var geo = new THREE.Geometry();
        for (var i=0; i<blocks.length; i++) {
            blocks[i].updateMatrix();
            geo.merge(blocks[i].geometry, blocks[i].matrix, i);
        }
        var newmesh = new THREE.Mesh( geo, new THREE.MeshFaceMaterial( materials ) );
        scene.add(newmesh);
基本上，这给了我一个错误，上面写着:未捕获的类型错误:无法读取未定义的属性"可见"每次我的渲染函数被调用。

我哪里做错了?

您正在合并几何图形为一个，并使用MeshFaceMaterial(在r.72中更名为MultiMaterial)。

合并具有不同材料指标的几何形状没有任何意义。

WebGLRenderer需要按材质分割几何体来渲染。

作为一个经验法则，只有合并几何图形，如果他们将被渲染为一个单一的材质。

three.js r.72

相关文章：