javascript - tag - Cambiar los colores de las caras de un cubo

title html

Question

De hecho, encontré esta pregunta, pero dice material.color no existe. Necesito saber cómo cambiar los colores de las distintas caras de un cubo que estoy dibujando:

var newCube = new THREE.Mesh(new three.CubeGeometry(size, size, size), new three.MeshNormalMaterial({ vertexColors: three.FaceColors }));

Answer 1

Aquí hay un violín para las personas que terminan aquí y quieren que este código funcione.

Hice una caja y até 3 colores a las caras:

// colors
red = new THREE.Color(1, 0, 0);
green = new THREE.Color(0, 1, 0);
blue = new THREE.Color(0, 0, 1);
var colors = [red, green, blue];
for (var i = 0; i < 3; i++) {
geometry.faces[4 * i].color = colors[i];
geometry.faces[4 * i + 1].color = colors[i];
geometry.faces[4 * i + 2].color = colors[i];
geometry.faces[4 * i + 3].color = colors[i];
}

Los colores de la cara se cambian en el bucle animate .

Answer 2

Aquí es cómo configura y cambia los colores de las caras de un cubo:

var geometry = new THREE.BoxGeometry( size, size, size );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

Si geometry.faces[i].color se cambia después de que se haya renderizado la geometría , debe establecer geometry.colorsNeedUpdate = true . (Esto no es necesario para canvasRenderer ).

three.js r.84