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.
3.4

Pompeu Fabra University Barcelona

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 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 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.

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