colors - 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

色の値を正しく指定していません。

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

Answer 2

cube.material.color 

THREE.Color オブジェクトが得られます。

色

色を設定するために使用できるメソッドがたくさんあります。

Answer 3

マテリアル部分では、16 進数の色の値を指定できます。このよう meshMaterial = new THREE.MeshBasicMaterial({color:0xfffff}) に、次のコードでは、16 進数の値 (0xffffff) は白色です。