three.jsでキューブの色を変更する

Question

変数に基づいてキューブの色を変更しようとしています。私は2つの立方体を作成し、それらの間の距離に応じて色を変えたいと思います。

キューブは、次のように作成されます。

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

色の値を正しく指定していません。あなたは色を設定するために使用できるメソッドの束を持っている

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

：

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

Answer 2

cube.material.color 

はあなたにTHREE.Colorオブジェクトを提供します。

Answer 3

私の提案は、オブジェクトに関数をアタッチし、実行時にオブジェクトの色を簡単に変更できることです。
2は、JSに同一視するようにコード

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