colors - Cambio de color del cubo en three.js.

Question

Estoy tratando de cambiar el color de un cubo basado en una variable. Creé dos cubos y quiero cambiar su color dependiendo de la distancia entre ellos.

Los cubos son creados así:

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

Ahora probé algo como esto:

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

Pero no funciona. Miré en los ejemplos pero no pude encontrar nada apropiado.

Answer 1

Mi sugerencia es adjuntar una función a su objeto y luego puede cambiar el color del objeto durante el tiempo de ejecución fácilmente.
Basado en tu codigo

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

Answer 2

No estás especificando el valor del color correctamente.

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

Answer 3

cube.material.color

te dará el objeto THREE.Color:

Color

que tiene un montón de métodos que puede utilizar para establecer el color.