Colors 在three.js中更改立方体的颜色

我试图根据一个变量更改立方体的颜色。我创建了两个立方体，我想根据它们之间的距离改变它们的颜色

多维数据集的创建方式如下：

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

if(distance > 20)
{
cube.material.color = 0xffffff;
}

现在我试着这样做：

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

if(distance > 20)
{
cube.material.color = 0xffffff;
}

---

但它不起作用。我查看了示例，但找不到任何合适的选项。

您没有正确指定颜色值

cube.material.color.setHex( 0xffffff );

将为您提供三种颜色的对象：

---

它有很多方法可以用来设置颜色。

我的建议是在对象上附加一个函数，然后您可以在运行时轻松更改对象的颜色。
基于您的代码

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );

//here is the funcion defined and attached to the  object
cube.setColor = function(color){
     cube.material.color.set(color);
}


cube.setColor(0xFFFFFF)  //change color using hex value or
cube.setColor("blue")    //set material color by using color name

scene.add( cube );

---

不要实例化新的

颜色

。使用

cube.material.color.set（color）

。您也可以使用等效的base-10整数作为setHex的参数，因为这两个在JS中相等。需要在答案中使用实际方法，以防链接失效。链接失效，正确答案是color.set（），'cube.material.color.set（color）'