Thay đổi màu khối trong ba.js

Question

Tôi đang cố thay đổi màu của hình lập phương dựa trên biến. Tôi tạo ra hai khối và tôi muốn thay đổi màu sắc của họ tùy thuộc vào khoảng cách giữa chúng.

Các hình khối được tạo ra như thế này:

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

Bây giờ tôi đã cố gắng một cái gì đó như thế này:

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

Nhưng nó không hoạt động. Tôi nhìn vào các ví dụ nhưng không thể tìm thấy bất cứ điều gì thích hợp.

Answer 1

Bạn không chỉ định giá trị màu chính xác.

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

Answer 2

cube.material.color 

sẽ cung cấp cho bạn các đối tượng THREE.Color:

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

trong đó có một loạt các phương pháp bạn có thể sử dụng để thiết lập các màu sắc.

Answer 3

Đề xuất của tôi là đính kèm một chức năng cho đối tượng của bạn và sau đó bạn có thể thay đổi màu sắc của đối tượng trong thời gian chạy dễ dàng.
Dựa trên mã của bạn

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