javascript - 将几何添加到 THREE.Object3D

Question

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

好吧，我在这里要做的是表示一个由 8 个不同三 Angular 形组成的图 block 。每个三 Angular 形都应该能够独立地改变它的颜色。

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

这是创建磁贴的代码:

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 三 Angular 形的状态:

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";
        }
    }
}

这是更改 Material 的正确方法吗？

我稍微简化了代码以更好地展示我的问题。但是，真正的代码在这个存储库中 https://github.com/tul1/Tile.git .如果你想看看它的工作情况，我将它部署在 http://tul1.github.io/examples/dale.html 中。 .

Answer 1

So, the problem I'm having is that when I change the color of a single triangle it changes the color of the lines in between, as you can see in the second image.

我看了你的源代码，如果你想做的只是不影响中间线条的颜色，使它们保持白色，只需删除改变 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";
        }
    }
}

结果

如果你不触摸线条上的颜色，它们将保持白色，就像你第一次创建它们时一样:

分组

如果您想将所有图 block 组合到一个对象中，您应该在全局范围内声明一个 THREE.Group object(在所有 for() 循环之外)。然后，您可以在 for() 循环的每次迭代中单独添加每个三 Angular 形。下面是一些关于如何实现这一点的伪代码:

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