在three.js中更改立方體的顏色

Question

我試圖根據變量更改立方體的顏色。我創建了兩個立方體，我想根據它們之間的距離來改變它們的顏色。

立方體創建這樣的：

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

但它不工作。我看了一些例子，但找不到合適的東西。

Answer 1

您沒有正確指定顏色值。

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

Answer 2

cube.material.color 

會給你THREE.Color對象：

http://threejs.org/docs/#Reference/Math/Color

其中有一堆你可以用它來設置顏色的方法。

Answer 3

我的建議是給你的對象附加一個函數，然後你可以很容易地在運行時改變對象的顏色。基於您的代碼

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 = new THREE.Color(color); 
} 


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

scene.add(cube);