three.js - three.js: 同じ面に複数の色

Question

サイズが 1 x 1 x 2 の立方体があります。大きい方 (1 x 2) の面では、面の半分に 1 つの色を表示し、残りの半分に別の色を表示したいと考えています。これを実装するための推奨される方法は何ですか? この 1 x 1 x 2 の立方体を、面の色が異なる 2 つの 1 x 1 x 1 の立方体を使用して構築するには、階層を使用する必要がありますか?

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。

three.js r.60