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 I的三角形的状态：

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。

Answer 1

所以，我遇到的问题是，当我改变单个三角形的颜色时，它会改变两者之间的线条颜色，如第二张图片所示。

我看了你的源代码，如果你想要做的只是而不是影响两者之间的线条颜色以使它们保持白色，只需删除改变颜色{的线条。 {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"; } } }循环之外）声明THREE.Group object。然后，您可以在for()循环的每次迭代中单独添加每个三角形。这里有一些关于如何实现这个目标的伪代码：

for()

将几何添加到THREE.Object3D

1 个答案: