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 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.
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.
© Universitat Pompeu Fabra