为THREE.Object3D添加几何体

Question

我已经编辑了这篇文章，使其更加清晰。

嗯，我在这里尝试的是表示由8个不同三角形组成的瓷砖。每个三角形都应该能够独立地改变它的颜色。

所以，我遇到的问题是当我改变单个三角形的颜色时，它会改变中间线的颜色，正如您在第二张图片中所看到的。

这是创建瓦片的代码：

var tile=[];
var n=0;
for(var i=0; i<4; i++){
    for(var j=0; j<2; j++){
        var triangle = new THREE.Object3D();
        var lineMaterial = new THREE.LineBasicMaterial({color:0xffffff, transparent:true, opacity:0.5});
        var triangleMaterial = new THREE.MeshPhongMaterial({color:COLOR_OFF ,emissive:EMISSIVE_OFF ,side:THREE.DoubleSide, shading:THREE.FlatShading});

        var geometry = new THREE.Geometry();
        geometry.vertices.push( triangleVectors[j][0], triangleVectors[j][1], triangleVectors[j][2] );
        var face = new THREE.Face3(0, 1, 2);
        geometry.faces.push(face);

        triangle.add(new THREE.LineSegments(new THREE.Geometry(), lineMaterial));
        triangle.add( new THREE.Mesh( new THREE.Geometry(), triangleMaterial));

        triangle.children[ 0 ].geometry = new THREE.WireframeGeometry(geometry);
        triangle.children[ 1 ].geometry = geometry;

        triangle.rotation.z = Math.PI*i/2;
        triangle.position.x = TILE_LENGTH*x;
        triangle.position.y = TILE_LENGTH*y;

        n++;                        
        tile.push({'triangle':triangle,'number':n,'state':"OFF"});                      
        scene.add(triangle);
     }
}

为了更新Tile中三角形的状态，我使用以下代码：

for(var j=0;j<tile.length; j++){

    tile[j].triangle.children[0].material.color.set(COLOR_OFF);
    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           tile[j].triangle.children[0].material.color.set(COLOR_ON);               
           tile[j].triangle.children[1].material.color.set(COLOR_ON);
           floor[i].tile[j].state="ON";
        }
    }
}

这是修改材料的正确方式吗？

我简化了一下代码以更好地展示我的问题。然而，真正的代码在此存储库中https://github.com/tul1/Tile.git。如果您想看它工作，我已将其部署在http://tul1.github.io/examples/dale.html。

- tul1

---

我不明白你在这里尝试做什么。THREE.Object3D可用于分组对象，但还有更具语法特定性的THREE.Group对象。包含几何图形（和材质）的实际对象是LineSegments和Mesh对象。我也不明白为什么你要进行“dispose”，然后重新设置几何图形，但如果你能提供更多关于你尝试做什么的细节，也许我们可以重新审视一下。 - TheJim01

网格已经扩展了Object3D。 - pailhead

我重新编辑了这篇文章，以更清晰地表达我的问题。谢谢。 - tul1

Answer 1

所以，我遇到的问题是，当我改变单个三角形的颜色时，它会改变两个之间的线条颜色，就像你在第二张图片中看到的那样。

我查看了您的源代码，如果您只想不影响两个之间的线条颜色，使它们保持白色，只需删除更改lineMaterial颜色的行即可。

for(var j=0;j<tile.length; j++){
    // The line below changes all line colors to 0x156289:
    // tile[j].triangle.children[0].material.color.set(COLOR_OFF);

    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           // The line below changes the active line color to 0x891528
           // tile[j].triangle.children[0].material.color.set(COLOR_ON); 

           tile[j].triangle.children[1].material.color.set(COLOR_ON);
           floor[i].tile[j].state="ON";
        }
    }
}

结果

如果您不更改线条上的颜色，它们将保持与创建时相同的白色:

分组

如果您想将所有瓷砖分组成一个对象，应在全局范围内（所有for()循环之外）声明一个THREE.Group对象。然后，您可以在每个for()循环的每次迭代中单独添加每个三角形。以下是一些伪代码，说明如何实现此操作：

// Create tileGroup outside the loop
var tileGroup = new THREE.Group();

for(var x=0; x<nX; x++){
    for(var y=0; y<nY; y++){
        var tile=[];
        var n=0;
        for(var i=0; i<4; i++){
            for(var j=0; j<2; j++){
                // All your existing triangle-creation code goes in here

                // ...

                // After triangle has been created, we add triangle
                // to group, instead of adding it to scene
                tileGroup.add(triangle);
            }
        }
    }
}

// Finally, we add tileGroup to scene
scene.add(tileGroup);

// Now we can manipulate all tiles at once within the group
tileGroup.position.set(0, 15, 0);

- Marquizzo

---

谢谢，伙计。问题解决了。我还有一个关于这个问题的问题。有没有办法将所有这些三角形分组到同一个 THREE 对象中？当然，不能失去它们独立更改材质的能力。 - tul1

当然可以。在StackOverflow上回答两个问题被认为是不好的做法，但我编辑了原始答案，添加了一个将三角形分组到一个“Group”对象中的部分。 - M -

谢谢你，伙计，你是我的英雄 :-) - tul1