CODEWITHSUNDEEP
javascript3dthree.js
Flavio
Flavio

Reputation: 1587

Threejs PlaneGeometry doesn't receive shadows or reflections

I'm pretty new to 3d and to threejs and I can't figure out how I can get a PlaneGeometry to show individually illuminated polygons i.e. receive shadows or show reflection. What I basically do is taking a PlaneGeometry applying some noise to every z value of the vertices. Then I have a simple directional light in my scene which is supposed to make the emerging noise pattern on the plane visible. I tried different things like plane.castShadow = true or renderer.shadowMapEnabled = true without success. Am I just missing a simple option or is this way more complicated than I think?

Here's are the relevant pieces 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);

This is the output I get. Obviously the plane is aware of the light because the bottom side is darker than the upper side but there is no sign of any individual polygons receiving individual lightening and no 3d structure is visible. Interestingly when I put in a different geometry like a BoxGeometry individual polygons are illuminated individually (see 2nd image). Any ideas?

enter image description here

enter image description here

Upvotes: 3

Views: 2280

Answers (1)

Flavio
Flavio

Reputation: 1587

Ok I figured it out thanks to this post. The trick is to use the THREE.FlatShading shader on the material. Important to note is that after every update of the vertices two things need to be done. Before rendering geometry.normalsNeedUpdate must be set to true so the renderer also incorporates the newly oriented vertices. Also geometry.computeFaceNormals() needs to be called before rendering because when you alter the vertices the normals are not the same anymore.

Upvotes: 4

Related Questions