在three.js中改变立方体的颜色答案

【问题标题】：Changing color of cube in three.js在three.js中改变立方体的颜色
【发布时间】：2012-12-20 08:05:26
【问题描述】：

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

立方体是这样创建的：

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

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

【问题讨论】：

标签： colors three.js

【解决方案1】：

在材质部分你可以提供一个十六进制的颜色值像这样 meshMaterial = new THREE.MeshBasicMaterial({color:0xfffff}) 在以下代码中，十六进制值 (0xffffff) 为白色

【讨论】：

【解决方案2】：

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

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

【讨论】：

不要实例化新的Color。使用cube.material.color.set( color )。

【解决方案3】：

cube.material.color

将为您提供 THREE.Color 对象：

Color

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

【讨论】：

需要在答案中有实际的方法，以防链接失效。
链接失效，正确答案是 color.set(), 'cube.material.color.set(color)'

【解决方案4】：

您没有正确指定颜色值。

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

【讨论】：

你也可以使用 base-10 整数等值作为 setHex 的参数，就像 JS 中的两个等值一样。