javascript - 如何在 Three.js 中更改脸部颜色

Question

我正在尝试更改网格单个面上的颜色。这是在 WebGL 上下文中。我可以改变整个网格的颜色，但不能改变单个面的颜色。相关代码如下:

// Updated Per Lee!

var camera = _this.camera;      
var projector = new THREE.Projector();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,                                  - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( kage.scene.children );

if ( intersects.length > 0 ) {
    face = intersects[0].face;
    var faceIndices = ['a', 'b', 'c', 'd'];         
    var numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    // assign color to each vertex of current face
    for( var j = 0; j < numberOfSides; j++ )  {
        var vertexIndex = face[ faceIndices[ j ] ];
    // initialize color variable
    var color = new THREE.Color( 0xffffff );
    color.setRGB( Math.random(), 0, 0 );
    face.vertexColors[ j ] = color;
    }
}

我还初始化了该对象，在本例中是一个立方体，如下所示:

// this material causes a mesh to use colors assigned to vertices
var material = new THREE.MeshBasicMaterial( { 
    color: 0xf0f0f0, 
    shading: THREE.FlatShading,
    vertexColors: THREE.VertexColors 
});

var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
directionalLight.position.set(10, 1, 1).normalize();
kage.scene.add(directionalLight);

var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);
cube.dynamic = true;
kage.scene.add(cube);

无论光色如何，更改 Material 都会使立方体变白。相交逻辑仍然有效，这意味着我选择了正确的面，但可惜颜色没有改变。

我是 Stackoverflow 的新手 [很好地提出了一个问题，所以希望我的编辑不会令人困惑]

Answer 1

• 将库更新至 r53。
• 添加vertexColors: THREE.FaceColors在 Material 。

• 最后使用face.color.setRGB( Math.random(),
Math.random(), Math.random()) 。

  现在不需要遍历循环 4THREE.Face4 的边(a、b、c、d)或 3 条边 (a,b,c) THREE.Face3 .

  这适用于 WebGL 和 Canvas 渲染。

Example

three.js r53