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.