javascript - 改变立方体一个面的颜色 - THREE.js

Question

我正在使用 Three.js 学习 OOP。我知道，这是一个很难做到的方法。所以我在场景中创建了一个盒子。现在我想改变那个立方体的一个面的颜色。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);

var geo = new THREE.BoxGeometry(5,2,5);
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});

var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);

//Right there i want to chance color of the face. Its not working
mesh.geometry.faces[5].color.setHex( 0xffffff ); 

var edge = new THREE.WireframeHelper( mesh, 0x00ff00 );
scene.add(edge);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);

编辑: 它对我不起作用的原因是我使用了 0xffffff 的颜色。除非颜色为 0xffffff，否则该程序将运行。

Answer 1

在您的情况下，如果您想更改立方体一个面的颜色，您需要在 Material 中指定 vertexColors。

var geo = new THREE.BoxGeometry( 5, 2, 5 );

var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geo, mat );

mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff ); 

渲染的面颜色将是指定的面颜色由 Material 颜色着色。

如果在网格渲染至少一次后更改面部颜色，则必须设置:

mesh.geometry.colorsNeedUpdate = true;

three.js r.80