three.js:铸造SpotLight阴影

Question

全。

我正在使用three.js 127，在文档之后添加一个SpotLight。然而，阴影不会显示在现场。下面，你可以找到我的场景。我已经将飞机设置为接收阴影，以及其他能够投下阴影的元素，但没有阴影在场景中呈现。

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()

我是不是遗漏了什么东西来渲染阴影？

Answer 1

我从您的代码中注意到一些可能导致此问题的事情：

1. 最重要的是，您没有在渲染器上启用shadowMap，您可以这样做：

renderer.shadowMap.enabled = true;

这个部分似乎没有出现在您所链接的SpotLight文档中，有关此部分的更多信息可以在SpotLightShadow文档中找到。

1. 当我在一个JS沙箱上尝试了这一点之后，我仍然没有看到阴影，但似乎spotLight太远了，它被设置为80在它的'z‘位置。我把这个值稍微小了一点(40)，它似乎就能做到这一点。帮助我解决问题的方法是使用帮助器和OrbitControls，这使调试变得更加容易：

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);

下面是一个固定版本的JSFiddle：https://jsfiddle.net/tombugolya/hx61L5vp/17/