three.js: Casting SpotLight Shadows - three.js

Question

all.
I'm working with three.js 127, following the documentation to add a SpotLight. However, shadows won't get shown on the scene. Below, you can find my scene. I already set the plane to receive shadow as well as other elements enabled to cast shadows yet no shadows are rendered on the scene.
const canvas = document.getElementById('webgl-output')
const init = () => {
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000,
)
const renderer = new THREE.WebGLRenderer({
canvas,
})
renderer.setClearColor(new THREE.Color(0x000000))
renderer.setSize(window.innerWidth, window.innerHeight)
const planeGeometry = new THREE.PlaneGeometry(60, 20)
const planeMaterial = new THREE.MeshLambertMaterial({
color: 0xaaaaaa,
})
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.receiveShadow = true
plane.rotation.x = -0.5 * Math.PI
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
scene.add(plane)
// Creating a cube
const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
})
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.castShadow = true
cube.position.x = -4
cube.position.y = 3
cube.position.z = 0
scene.add(cube)
// Creating a sphere
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
const sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff,
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.castShadow = true
sphere.position.x = 20
sphere.position.y = 4
sphere.position.z = 2
scene.add(sphere)
// Position and point the camera to the center of the scene
camera.position.x = -30
camera.position.y = 12
camera.position.z = 30
camera.lookAt(scene.position)
// Add spotlight for the shadows
const spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(8, 40, 80)
spotLight.castShadow = true
spotLight.shadow.mapSize.width = 1024
spotLight.shadow.mapSize.height = 1024
spotLight.shadow.camera.near = 8
spotLight.shadow.camera.far = 80
spotLight.shadow.camera.fov = 16
scene.add(spotLight)
renderer.render(scene, camera)
}
init()
Am I missing something to get the shadow rendered?

Answer 1

I noticed a few things from your code that may have caused this issue:
The biggest thing is that you didn't enable the shadowMap on your renderer, you can do this like so :
renderer.shadowMap.enabled = true;
This part doesn't seem to be appearing on the documentation of SpotLight which you linked, more information about this can be found on the documentation of SpotLightShadow.
After I tried this on a JS sandbox, I still didn't see the shadow, but it seems like the spotLight was simply too far away, it was set to 80 at it's 'z' position. I made the value slightly smaller (40) and it seemed to do the trick. What helped me figure it out is by using a helper and OrbitControls which makes it a little easier to debug:
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three#0.127/examples/jsm/controls/OrbitControls.js';
...
spotLight.position.set(8, 40, 40); // Third parameter (z) with value of 80 was too far away
controls = new OrbitControls(camera, renderer.domElement);
helper = new THREE.PointLightHelper(pointLight);
scene.add(helper);
Here is a JSFiddle of the fixed version: https://jsfiddle.net/tombugolya/hx61L5vp/17/