Three.JS翻译目标

时间:2014-11-04 03:45:11

标签: javascript three.js

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

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您的聚光灯目标已被翻译,但聚光灯不会跟随。

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

所以,遗憾的是,target.matrixtarget.matrixWorld没有更新。

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

spotLight.target = myObject;

three.js r.69