CODEWITHSUNDEEP
javascriptthree.js
Ovilia
Ovilia

Reputation: 7310

Three.js set face color

I want to set the color of a face but failed. If I use wireframe, the result seems to be correct. But if not, the face seems not to be rendered.

var geo = new THREE.Geometry();
geo.vertices.push(new THREE.Vector3(1, 1, 0));
geo.vertices.push(new THREE.Vector3(1, 0, 0));
geo.vertices.push(new THREE.Vector3(0, 0, 0));
geo.faces.push(new THREE.Face3(0, 1, 2));
geo.faces[0].color = new THREE.Color('rgb(0,255,0)');
var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({
    vertexColors: THREE.FaceColors,
    color: 0xff0000//,
    //wireframe: true
}));
scene.add(mesh);

Here's the demo: http://jsfiddle.net/yaxpberz/ .

Upvotes: 2

Views: 544

Answers (2)

Ovilia
Ovilia

Reputation: 7310

It turns out that according to the vertex order when added to face, the camera is looking at the back side of the mesh. So, it can be solved by:

var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    color: 0xff0000,
    side: THREE.BackSide
}));

Upvotes: 1

gaitat
gaitat

Reputation: 12642

You are adding your vertices in a clockwise manner. You should be adding them counter-clockwise. Switch the first and third vertices. That way you can avoid the performance overhead of drawing a face twice.

Upvotes: 0

Related Questions