Как изменить цвет CubeGeometry с помощью Three.js?

Question

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

Должен быть лучший способ сделать это?

var startColours = [0x0000FF, 0x00FF00, 0xFF0000, 0x00FFFF, 0xFF00FF, 0xFFFF00]; 
var changeColours = [0x000000, 0x000000, 0x808080, 0x808080, 0xFFFFFF, 0xFFFFFF]; 
var material = new THREE.MeshLambertMaterial( 
    { color: 0xFFFFFF, shading: THREE.FlatShading, vertexColors: THREE.VertexColors }); 

var setColours = function(geometry, colours) { 
    for (var i = 0; i < 6; i++) { 
     geometry.faces[i].color.setHex(colours[i]); 
    } 
} 

var geometry = new THREE.CubeGeometry(1.0, 1.0, 1.0); 
setColours(geometry, startColours); 
var cubeMesh = new THREE.Mesh(geometry, material); 
scene.add(cubeMesh); 

// Try and change the colour after 2 seconds. 
setTimeout("attempt2()", 2000); 

function attempt1() { 
    // Do the obvious. 
    setColours(geometry, changeColours); 
    // Doesn't work - no errors, but the cube just doesn't change colour. 
} 

function attempt2() { 
    setColours(geometry, changeColours); 

    scene.remove(cubeMesh); 
    // Create a new mesh with a *clone* of the geometry and material of the original. 
    var newCubeMesh = new THREE.Mesh(cubeMesh.geometry.clone(), cubeMesh.material); 
    scene.add(newCubeMesh); 
    // Does work - but having to create a completely new Mesh object is pants. 
} 

Answer 1

Я бы использовал MeshFaceMaterial.

Проверить это fiddle

function setColours() { 
    for (var i = 0; i < 6; i++) { 
    box.material.materials[i].color.setHex(changeColours[i]); 
    } 
} 

var startMaterials = []; 
for(var i = 0; i < 6; i++){ 
    startMaterials.push(new THREE.MeshLambertMaterial({color: startColours[i]})); 
} 
var material = new THREE.MeshFaceMaterial(startMaterials); 

var geometry = new THREE.BoxGeometry(50, 40, 20, 2, 2, 2); 

box = new THREE.Mesh(geometry, material); 
scene.add(box); 

setTimeout(setColours, 3000);