I'm relatively new to the world of 3D graphics and three.js, and I'm struggling to figure out how to achieve individually illuminated polygons on a PlaneGeometry. I've been working on applying some noise to the vertices' z-values in order to create a unique pattern, and I have a directional light in my scene to highlight this pattern. However, I've tried various methods like plane.castShadow = true and renderer.shadowMapEnabled = true with no success. Am I overlooking a simple solution, or is this more complex than I anticipated?
Here are the key parts of my code:
renderer.setSize(width, height);
renderer.setClearColor(0x111111, 1);
...
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
directionalLight.position.set(10, 2, 20);
directionalLight.castShadow = true;
directionalLight.shadowCameraVisible = true;
scene.add(directionalLight);
var geometry = new THREE.PlaneGeometry(20, 20, segments, segments);
var index = 0;
for(var i = 0; i < segments + 1; i++) {
for(var j = 0; j < segments + 1; j++) {
zOffset = simplex.noise2D(i * xNoiseScale, j * yNoiseScale) * 5;
geometry.vertices[index].z = zOffset;
index++;
}
}
var material = new THREE.MeshLambertMaterial({
side: THREE.DoubleSide,
color: 0xf50066
});
var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2.35;
plane.castShadow = true;
plane.receiveShadow = true;
scene.add(plane);
The issue I'm facing is that while the plane reacts to the light by appearing darker on the underside, the individual polygons are not receiving distinct lighting and the 3D structure is not clearly visible. Strangely, when I use a different geometry like a BoxGeometry, the individual polygons are illuminated as expected (see second image). Any suggestions?