CODEWITHSUNDEEP
three.js
mr49
mr49

Reputation: 1063

three.js: multiple color on the same face

I have a cube of size 1 x 1 x 2. On the larger (1 x 2) face, I would like to show one color on half of the face, and another color on the other half. What would the recommended way of implementing this? Should I use hierarchy to build this 1 x 1 x 2 cube using two 1 x 1 x 1 cubes of different face color?

Upvotes: 1

Views: 1739

Answers (1)

WestLangley
WestLangley

Reputation: 104833

Here is the pattern to follow. Adjust to your liking:

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 );

If you are using CanvasRenderer, you can set material.overdraw = 0.5 to try to eliminate the diagonal lines. This is not required for WebGLRenderer.

three.js r.60

Upvotes: 1

Related Questions