为什么灯光位置不会更新？

Question

我使用three.js来渲染移动的圆柱体：

＆＃13;

＆＃13;

let renderer, camera, scene, light, cylinder;

initialize();
animate();

function initialize() {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);

  scene = new THREE.Scene();

  light = new THREE.SpotLight();
  scene.add(light);

  cylinder = new THREE.Mesh();
  cylinder.material = new THREE.MeshToonMaterial({ color: "#007700" });
  cylinder.geometry = new THREE.CylinderGeometry(3, 3, 12, 25)
  scene.add(cylinder);
}

function animate() {
  cylinder.position.z -= 1;
  cylinder.rotation.x -= THREE.Math.degToRad(2);
  
  light.position.x = cylinder.position.x;
  light.position.y = cylinder.position.y + 100;
  light.position.z = cylinder.position.z;

  camera.position.x = cylinder.position.x;
  camera.position.y = cylinder.position.y + 10;
  camera.position.z = cylinder.position.z + 30;
  camera.lookAt(cylinder.position);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #aaccaa;
}

canvas {
  display: block;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js">
</script>

＆＃13;

＆＃13;

＆＃13;

我希望每一帧都能将光线定位在圆柱体上方，但正如您所见，圆柱体会快速移动到黑暗中。怎么样？

Answer 1

当你没有设定聚光灯的目标时会发生这样的事情。

文档说：

.TARGET

Spotlight从其位置指向target.position。目标的默认位置是（0,0,0）。

注意：要将目标位置更改为默认值以外的任何位置，必须使用

将其添加到场景中

因此，这意味着当您使用圆柱体移动光线时，它（光线）指向场景的中心，因为它是默认值。

将您的圆柱体指定为光的目标，您将获得所需的结果。

＆＃13;

＆＃13;

let renderer, camera, scene, light, lightPosition, cylinder;

initialize();
animate();

function initialize() {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);

  scene = new THREE.Scene();

  cylinder = new THREE.Mesh();
  cylinder.material = new THREE.MeshToonMaterial({ color: "#007700" });
  cylinder.geometry = new THREE.CylinderGeometry(3, 3, 12, 25)
  scene.add(cylinder);
  
  light = new THREE.SpotLight();
  lightPosition = new THREE.Vector3(0, 100, 0);
  light.target = cylinder;
  scene.add(light);
}

function animate() {
  cylinder.position.z -= 1;
  cylinder.rotation.x -= THREE.Math.degToRad(2);
  
  light.position.copy(cylinder.position).add(lightPosition);

  camera.position.x = cylinder.position.x;
  camera.position.y = cylinder.position.y + 10;
  camera.position.z = cylinder.position.z + 30;
  camera.lookAt(cylinder.position);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #aaccaa;
}

canvas {
  display: block;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js">
</script>

＆＃13;

＆＃13;

＆＃13;