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

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

• javascript
• three.js

• Does the color show red if the geometry is THREE.CubeGeometry? – WestLangley Commented Dec 21, 2013 at 20:18
• geometry is not THREE.CubeGeometry it is THREE.Geometry. – user_2738046 Commented Dec 21, 2013 at 20:30
• Please replace your arrowGeometry with THREE.CubeGeometry and answer my original question. – WestLangley Commented Dec 21, 2013 at 20:37
• it didn't worked. still black and my arrow shape broked. – user_2738046 Commented Dec 21, 2013 at 20:40
• i tried to change color of every face with arrowMesh.geometry.faces[i].color.set(0x00ffff); in a for loop and it didn't worked too. – user_2738046 Commented Dec 21, 2013 at 20:40

3 Answers 3

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

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.

i solved my problem like this.

var ground_texture = THREE.ImageUtils.loadTexture('images/grass.png', {}, function() {
    renderer.render(scene,camera);
});
ground_material = Physijs.createMaterial(
    new THREE.MeshLambertMaterial({map : ground_texture}),
    .9, // high friction
    .9 // low friction
);

i found this solution on this site.