我编辑了这篇文章,以便更清楚.
好吧,我在这里要做的是表示由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部署了它.
解决方法
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";
}
}
}
结果
如果您没有触摸线条上的颜色,它们将像您第一次创建时一样保持白色：
分组
如果要将所有切片分组到一个对象中,则应在全局范围内声明THREE.Group object(在所有for()循环之外).然后,您可以在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);
