CODEWITHSUNDEEP
javascriptthree.js
Matt Bridges
Matt Bridges

Reputation: 171

three.js lighting doesn't appear to work as I am expecting

I have this fiddle http://jsfiddle.net/9XCWc/1/ which is the html/js from a php generated terrain.

The issue is that it does not appear to be rendering the shadow etc as I would expect.

This is my lighting setup.

  var ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);

  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(400, 200, 3000).normalize();
  scene.add(directionalLight);

Upvotes: 1

Views: 512

Answers (1)

ThisIsSparta
ThisIsSparta

Reputation: 1307

What kind of effects are you trying to get?

You are currently using MeshBasicMaterial. The documentation says about it:

MeshBasicMaterial
A material for drawing geometries in a simple shaded (flat or wireframe) way.

You should check this example. It shows the different materials you can get and what they'll look like.

For instance this fiddle compares a MeshBasicMaterial and a MeshLambertMaterial.

Hope this helps

UPDATE

You are creating a mesh vertex per vertex but you never create the normals. Yet, if you want such a shadowing effect, a MeshLambertMaterial needs to compute the normals to calculate the light variations:

  • The reflection is calculated by taking the dot product of the surface's normal vector, N, and a normalized light-direction vector, L, pointing from the surface to the light source.(wikipedia)).

There is a geometry.computeFaceNormals(); function to help you with that.

You can have a look at this fiddle.

Plus, you should check the JS array objects + using some for loop.

Hope this helps

Upvotes: 2

Related Questions