Shadow not appearing

I’m completely new to three.js and have been following a tutorial in a book, trouble I have is that the book is behind the current release of Three.js and a lot has changed so I’m trying to keep up.

One thing I’m completely stuck on is shadows. I can not get them to show and not sure what I’m missing on this.

This is my light, when I added a camera helper I get an Error:

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values.

However this error does not appear if I use PointLight instead of Directional, but I still don’t get any shadows

Here’s the code

            scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) ); // added under advice that it will show shadows.. it didn't
            var light = new THREE.DirectionalLight(0xf6e86d, 1);
            light.castShadow = true;
            light.shadowDarkness = 0.5;
            light.shadow.mapSize.Width = 2048;
            light.shadow.mapSize.Height = 2048;
            light.position.set(500, 1500, 1000);
   = 2500;
   = 1000;
   = 1000;
   = 1000;
   = 1000;

            var helper = new THREE.CameraHelper(;

Any help or pointers in the right direction would be greatly appreciated. Feel like I’m falling down before I’ve even began.

When in doubt, look at the examples.

They provide live demos and source code, so you can supplement the book’s information with up-to-date structures and techniques.

1 Like