javascript - 三.JS翻译目标

Question

这里可能只是缺少一些简单的东西。我有一个聚光灯指向相机后面的平面几何形状，以及一些随机放置的盒子。只是尝试做一个简单的自上而下的演示。我在 WASD 上平移相机，复制位置，将 Y 设置为零，让相机查看该位置，然后将灯光的目标也平移到该位置。相机移动良好，但光线不会改变目标。至少据我所知。

我创建我的灯光和目标:

this.playerLight = new THREE.SpotLight(0xffffff);
this.playerLight.castShadow = true;
this.playerLight.position.set(0, 40, 0);
this.spotlightTarget = new THREE.Object3D();
this.spotlightTarget.position.set(0, 0, 0);
this.playerLight.target = this.spotlightTarget;
this.playerLight.shadowCameraVisible = true;
this.scene.add(this.playerLight);

然后我的 keydown 事件处理:

window.addEventListener("keydown", function (e) {
  var moved = false;
  switch ( event.keyCode ) {
    case 87: // W
      e.preventDefault();
      _this.camera.position.x -= 0.2;
      moved = true;
      break;
    case 65: // A
      e.preventDefault();
      _this.camera.position.z += 0.2;
      moved = true;
      break;
    case 83: // S
      e.preventDefault();
      _this.camera.position.x += 0.2;
      moved = true;
      break;
    case 68: // D
      e.preventDefault();
      _this.camera.position.z -= 0.2;
      moved = true;
      break;
    default:
      return true;
  }

  if (moved) {
    var lookAtPos = _this.camera.position.clone();
    lookAtPos.y = 0;
    _this.camera.lookAt(lookAtPos);
    _this.playerLight.position.x = lookAtPos.x;
    _this.playerLight.position.z = lookAtPos.z;
    _this.spotlightTarget.position.set(lookAtPos.x, lookAtPos.y, lookAtPos.z);
  }
}, false);

有什么想法吗？

Answer 1

您的聚光灯目标已翻译，但聚光灯不跟随。

Spotlight.target 是灯光的一个属性，但它不是 Three.js r.69 中场景图的一部分。

因此，不幸的是，target.matrix 和 target.matrixWorld 没有更新。

解决方法是将 spotlight.target 添加到场景中。另一种解决方法是将场景中已有的对象设置为目标:

spotLight.target = myObject;

三.js r.69