Shadow not appearing

Questions
1

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);
            light.shadow.camera.far = 2500;
            light.shadow.camera.left = 1000;
            light.shadow.camera.right = 1000;
            light.shadow.camera.top = 1000;
            light.shadow.camera.bottom = 1000;
            
            scene.add(light);

            var helper = new THREE.CameraHelper(light.shadow.camera);
            scene.add(helper);

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

2

When in doubt, look at the examples.

https://threejs.org/examples/?q=shadow#webgl_shadowmap_pointlight

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

1 Like