Change The Color Of Mesh Created Using Face3

I have created a mesh using face 3 and three js. But the desired colour is not reflecting on the mesh. Here is the code used by me. var geometry = new THREE.Geometry(); var f = 0;

Solution 1:

The following line is not correct:

face.materials = [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ];

If you want to apply a color per face, do it like that:

var faces = geometry.faces;

for ( var i = 0, l = faces.length; i < l; i ++ ) {

    var face = faces[ i ];
    face.color = newTHREE.Color( Math.random() * 0xffffff );

}

Also set the property vertexColors of the corresponding material to THREE.FaceColors. Check out the following live demo so see a complete example: https://jsfiddle.net/f2Lommf5/8539/

Solution 2:

If you don't provide the face normals, you need to compute the normals. Look at Face3 docs top example:

//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();

Solution 3:

Thanks for the reply, I resolved the above problem using the following code.

var normal = new THREE.Vector3(0, 1, 0); // optionalvar color = new THREE.Color(color); // optionalvar materialIndex = 0; // optional
    geometry.faces.push(new THREE.Face3(f, f + 1, f + 2, normal, color,
            materialIndex));
    geometry.faces.push(new THREE.Face3(f, f + 2, f + 3, normal, color,
            materialIndex));

Please suggest the improvement.