Want to keep learning?

This content is taken from the Pompeu Fabra University Barcelona's online course, 3D Graphics for Web Developers. Join the course to learn more.

Skip to 0 minutes and 19 seconds Ok, so far we’ve created a scene with a red sphere in it a very nice red sphere it is too, but the scene lacks a bit of depth, so what we’re gonna do is we’re gonna add up plane to the scene and also add some shadows, and I’ll show you how shadowing works in three.js. (It) uses a technical shadow mapping, which is a very common technique for drawing shadows in real time. So let’s go back to our code, and the first thing we need to do is just say to the renderer we want to enable the shadow map.

Skip to 0 minutes and 49 seconds So, we’re gonna add “shadowMap.enabled = true”, and what we’re gonna do as well is just make sure the spotlight knows how to cast shadows. And we need to just tell the spotlight that all of the objects within a certain box, if you’d like, from the location of the light should be drawn with a shadow. We’re gonna say “spotLight.shadowCameraNear = 20” and “spotLight .shadowCameraFar = 50”. These numbers are actually quite important because if the range of these numbers is too wide, then the resolution of our shadow map and the definition of our shadow map won’t be very good and, of course, if the range is too narrow, then any objects that are outside that range won’t be shadowed.

Skip to 1 minute and 49 seconds So, we kind of need to play around with these numbers to make sure when we’re creating our scene that we have the optimal numbers. And we also need to tell the spotlight that it’s allowed to cast a shadow.

Skip to 2 minutes and 4 seconds “spotLight.castShadow = true”. So, fine, now we’ve got shadows enabled for our renderer and our light but we’ve got no surface upon which to cast a shadow. So, what we’re gonna do is, we’re just gonna create a plane surface basically, a simple flat surface.

Skip to 2 minutes and 27 seconds And, same thing with the sphere, we need to create the geometry first.

Skip to 2 minutes and 37 seconds Fortunately, three.js gives us, just like the sphere gives us a “planeGeometry”,

Skip to 2 minutes and 44 seconds a function which we can create, we’ll make it about 40 units by 40 units, that’s just the width and the depth of the plane, width and the height of the plane, and we’ll create a very simple material for it as well, “planeMaterial = new”

Skip to 3 minutes and 7 seconds a pretty “LambertMaterial” again, why not,

Skip to 3 minutes and 11 seconds and another javascript object here, and we’ll set the colour to be a nice bland grey colour, I think. So, just a nice sort of light grey, so we can see the shadow. Let’s create our mesh.

Skip to 3 minutes and 36 seconds We need the sphere, no, the “planeGeometry”, and the “planeMaterial”, and we need add our plane to the scene But before we’re gonna add the plane to the scene, we’re gonna do a few things. The first thing we’re gonna do is we’re gonna tell the plane specifically that it can receive a shadow. If we don’t enable this true, then the plane won’t have any shadows drawn in it. We’re also just gonna move the plane a little bit. Right now the plane, by default, gets drawn in a certain position.

Skip to 4 minutes and 7 seconds We need to just draw it a little bit, so that it’s slightly angled, that’s gonna mean more depth to the scene, we’re just gonna rotate it in the X axis by “-0.5”, “Math.PI”, and we’re going to position it as well

Skip to 4 minutes and 32 seconds in Y. So, what we’re doing here is quite interesting because we’re changing the rotation and the position of the mesh we’ve just created via these two properties of the mesh object, which is rotation and position, and we can set these properties for pretty much any object in the scene graph that we have, so lights, cameras, meshes, etc, etc. And we set the position down a little bit “-5”, so that the sphere has space to cast a shadow. And we’ll add the plane to the scene.

Skip to 5 minutes and 14 seconds Right, one thing we haven’t done, we told the plane that it can receive a shadow, but we haven’t said that the sphere can cast a shadow. There’s quite a lot of little things we have to remember to do when we’re creating shadows. We have to tell the renderer to enable the “shadowMap” in the render up here, we need to tell the light that it can cast a shadow, we need to tell the object that is casting a shadow that it’s allowed to cast a shadow, and we need to tell the object that is receiving the shadow that it can receive the shadow as well. Right, so we need to add the plane to our scene.

Skip to 5 minutes and 54 seconds Oh, I just noticed an error here, we need to delete this semi colon, that’s the wrong thing to put in our javascript objects. And here we just need to add our plane, “createPlane”, and save, and now I think we’ve put everything at it. And there we go! We’ve added our plane to our scene, and we’re drawing a shadow and we’re casting our shadows correctly. That’s the end of this lesson.

Adding planes and shadowing

In this video, Alun explains how to add depth to your scene by:

  • Adding a plane
  • Applying shadows via shadow mapping
  • Learning more about your object’s movement

Important term: A triangular mesh is a set of points (or ‘vertices’) in 3D space. Sets of three of these points are connected by edges to a continuous surface composed of triangular faces. This set of vertices and faces forms the basic geometry of a 3D object in a scene.

Remember that you can find the code files in Step 3.1.

You can find more information about shadow mapping here.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Get a taste of this course

Find out what this course is like by previewing some of the course steps before you join: