將幾何添加到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); 
    } 
} 

更新我使用這個代碼的瓷磚的三角形的狀態：

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

所以，我遇到的問題是，當我改變單個三角形的顏色時，它會改變它們之間的線條的顏色，就像你在第二幅圖像中看到的那樣。

我看着你的源代碼，如果你想要做的是不影響線條的顏色之間使它們保持白色，只需刪除改變的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()環路外）。然後，您可以在每個循環的迭代中單獨添加每個三角形。這裏有一些關於如何實現這個目的的僞代碼：

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