colors three.js

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



(3)

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.


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


No estás especificando el valor del color correctamente.

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


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.