三.JS翻译目标 [英] Three.JS translate target

问题描述

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

Probably just missing something simple here. I have a spot light pointing behind the camera at a plane geometry, along with some randomly positioned boxes. Just trying to do a simple top down like demo. I translate the camera on WASD, copy the position, set the Y to zero, and have the camera look at that position, then translate the light's target to that position as well. The camera moves fine but the light does not change target. At least from what I can tell.

我创造了我的光 &目标:

I create my light & target:

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 事件处理:

Then my keydown event handling:

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

有什么想法吗?

推荐答案

您的聚光灯目标已翻译，但聚光灯未跟随.

Your spotlight target has been translated, but the spotlight does not follow.

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

Spotlight.target is a property of the light, but it is not part of the scene graph in three.js r.69.

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

So, unfortunately, target.matrix and target.matrixWorld are not being updated.

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

The work-around is to add spotlight.target to the scene. Another workaround is to set an object that is already in your scene as the target:

spotLight.target = myObject;

three.js r.69

three.js r.69

这篇关于三.JS翻译目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！