three.js - three.js：同一张脸有多种颜色

Question

我有一个大小为 1 x 1 x 2 的立方体。在较大的 (1 x 2) 面上，我想在一半的脸上显示一种颜色，在另一半显示另一种颜色。推荐的实施方式是什么？我应该使用层次结构使用两个不同面颜色的 1 x 1 x 1 立方体来构建这个 1 x 1 x 2 立方体吗？

Answer 1

这是要遵循的模式。根据自己的喜好调整：

var geometry = new THREE.CubeGeometry( 10, 10, 20, 1, 1, 2 );

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHSL( Math.random(), 0.5, 0.5 ); // pick your colors
}

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ); 

var mesh = new THREE.Mesh( geometry, material );

如果您使用CanvasRenderer，您可以设置material.overdraw = 0.5尝试消除对角线。这不是必需的WebGLRenderer。

三.js r.60