Изменение цвета куба в файле three.js

Я пытаюсь изменить цвет куба на основе переменной. Я создал два куба, и я хочу изменить их цвет в зависимости от расстояния между ними.

Кубы создаются следующим образом:

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

Но это не сработает. Я посмотрел в примерах, но не нашел ничего подходящего.

Ответ 1

Вы не задаете правильное значение цвета.

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

Ответ 2

cube.material.color

предоставит вам объект THREE.Color:

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

который имеет множество методов, которые вы можете использовать для установки цвета.

Ответ 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 );