In my current project, I've been working on creating a randomized sheet composed of arrays containing x, y, and z coordinates to draw triangles between points. You can see the outcome by clicking on this screenshot.
Initially, I utilized MeshBasicMaterial for this purpose. However, I desired to switch to MeshLambertMaterial to make use of lighting effects. Surprisingly, when implementing this change, the resulting sheet appeared quite different from what I expected as shown in this image.
Here is the functioning Basic Mesh code responsible for the green tiles:
for(j = 0; j < h-1; j++) {
for(i = 0; i < w-1; i++) {
o = ((j%2==1)?1:0);
var geom = new THREE.Geometry();
var a = new THREE.Vector3(x[i][j], y[i][j], z[i][j]);
var b = new THREE.Vector3(x[i+1][j], y[i+1][j], z[i+1][j]);
var c = new THREE.Vector3(x[i+o][j+1], y[i+o][j+1] ,z[i+o][j+1]);
geom.vertices.push(a);
geom.vertices.push(b);
geom.vertices.push(c);
geom.faces.push(new THREE.Face3(0,1,2));
tile1[i][j] = new THREE.Mesh(
geom,
new THREE.MeshBasicMaterial({color: 'green'})
);
scene.add(tile1[i][j]);
}
}
And here is the failing Lambert Mesh code associated with red tiles (simply changing 'Basic' to 'Lambert'):
for(j = 0; j < h-1; j++) {
for(i = 0; i < w-1; i++) {
o = ((j%2==1)?0:1);
var geom = new THREE.Geometry();
var a = new THREE.Vector3(x[i+o][j], y[i+o][j], z[i+o][j]);
var b = new THREE.Vector3(x[i+1][j+1], y[i+1][j+1], z[i+1][j+1]);
var c = new THREE.Vector3(x[i][j+1], y[i][j+1], z[i][j+1]);
geom.vertices.push(a);
geom.vertices.push(b);
geom.vertices.push(c);
geom.faces.push(new THREE.Face3(0,1,2));
tile2[i][j] = new THREE.Mesh(
geom,
new THREE.MeshLambertMaterial({color: 'red'})
);
scene.add(tile2[i][j]);
}
}
A cube created using the above Lambert Mesh settings reacts properly to light sources.
scene.add(new THREE.Mesh(new THREE.BoxGeometry(10,1000,5),new THREE.MeshLambertMaterial({color:'red'})));
The question arises - why does the Lambert Mesh not produce the desired effect on a geometry where the Basic Mesh functioned correctly?
EDIT: Placing a colored box beneath the sheet revealed that the tiles above it were not failing to render but appearing black instead. They seem opaque and do not reflect color or light as intended compared to the box.