three.js lambert material color not showing

Question

i created an arrow with my own vertices and indices then i set lambert material and material color to red. i can't see material color at the render. just black.

however if i set material to basic material i can see the color.

arrowMesh = new THREE.Mesh(
    arrowGeometry,
    new THREE.MeshLambertMaterial({ color : 'red', side: THREE.DoubleSide })
);
arrowMesh.position.set(-10,5,95);
arrowMesh.rotation.x = -1.0;

arrowMesh.rotation.z = -0.2;
scene.add(arrowMesh);

three.js r64

Answer 1

First, when using THREE.LambertMaterial you need some lights in your scene.

If you do have lights in your scene and you created the geometry yourself by creating vertices and faces the problem lies most likely in the fact that your face normals are set to Vector3( 0, 0, 0 );

Caculate and set your face normals and they should render correctly.

So for a single triangle it would look like this:

var geometry = new THREE.Geometry();
geometry.vertices = [ a, b, c ];

var face = new THREE.Face3( 0, 1, 2 );

face.normal = new THREE.Vector3().crossVectors(
    new THREE.Vector3().subVectors( b, a ),
    new THREE.Vector3().subVectors( c, b )
).normalize();

var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({color: 0xff0000, side: 2, shading: THREE.FlatShading}));

Instead of doing this manually you can also use the geometry methods for calculating them:

geometry.computeFaceNormals();
geometry.computeVertexNormals();

Answer 2

I was experiencing the same problem on my machine, and found that PointLight was the culprit. Setting "distance" to zero (or leaving it at the default) caused the light to turn off completely. Explicitly setting the distance to a large number turned on the light, and then all my Lambert materials appeared normally.

So, instead of

pointLight = new THREE.PointLight(0xFFFFFF);

I used

pointLight = new THREE.PointLight(0xFFFFFF, 1, 100000);

And all was fixed. As far as I can tell so far, this problem is limited to PointLight, and is machine-dependent (GPU or GPU drivers, not sure exactly which). But it's easy enough to throw a big number in there and avoid the problem.