ThreeJS使用獨特的材料合並多個網格

Question

我不知道我在做什么錯。 我嘗試將多個網格合並為一個網格，這樣可以節省繪圖調用。 我的每個網格物體都有獨特的材料。 在此示例中，它僅具有不同的顏色，但實際上它們將具有唯一的紋理映射。

這是我的代碼：

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

基本上，這給了我一個錯誤，說：Uncaught TypeError：每次調用我的渲染函數時，無法讀取未定義的屬性“ visible”。

我哪里做錯了？

Answer 1

要合並的幾何形狀為一體，並采用MeshFaceMaterial （改名MultiMaterial在r.72）。

合並具有不同材料索引的幾何圖形沒有任何意義。

WebGLRenderer需要按材質細分幾何以進行渲染。

根據經驗法則，只有在使用單一材質渲染幾何圖形時，才合並幾何圖形。

three.js r.72