三.JS翻译目标答案

【问题标题】：Three.JS translate target三.JS翻译目标
【发布时间】：2014-11-04 23:44:44
【问题描述】：

可能只是在这里遗漏了一些简单的东西。我有一个聚光灯指向相机后面的平面几何图形，还有一些随机定位的盒子。只是尝试做一个简单的自上而下的演示。我在 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);

有什么想法吗？

【问题讨论】：

您使用的是three.js r.69吗？如果是这样，很可能是github.com/mrdoob/three.js/issues/5555。
是的，我正在使用 r69。那么解决方法是将目标也添加到场景中吗？
你试过了吗？成功了吗？
不得不拉下主库，因为我忘记在我的 git repo 中暂存 three.js 文件。刚才检查了一下，是的，它确实有效:)。也将this.spotlightTarget 添加到场景中。
如何创建灯光和目标似乎有点过于复杂。

标签： javascript three.js

【解决方案1】：

您的聚光灯目标已被翻译，但聚光灯没有跟随。

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

所以很遗憾，target.matrix 和 target.matrixWorld 没有更新。

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

spotLight.target = myObject;

three.js r.69

【讨论】：