如何在three.js中绝对在相机上翻译Z？答案

【问题标题】：How to translateZ absolutely on camera in three.js?如何在three.js中绝对在相机上翻译Z？
【发布时间】：2020-01-10 01:06:58
【问题描述】：

我正在使用 translateZ 函数，以便相机可以沿其观察方向向前/向后移动。但是 translateZ 相对移动它。所以camera.translateZ(10); 后跟另一个camera.translateZ(10); 将使相机总共移动20 个单位。因此，我不能在补间动画中使用它，在该动画中我对该函数内部的参数进行补间。

所以我想知道是否有一种方法可以在绝对坐标中沿 Z 平移，例如，如果我正在查看原点的对象，我想设置 distance_from_origin 同时仍保持观察方向？

camera.absTranslateZ(distance_from_origin);

【问题讨论】：

camera.position.setZ
@AndyRay 刚刚检查过，它没有像 translateZ 那样保持观察方向。
你可以做线性代数来找到相机矢量线上 Z = 你的距离的点，或者你可以 setZ 然后再看一遍
我对你的问题感到困惑。您是否希望获得“飞越”效果，在相机沿 Z 方向行进时继续观察单个点？或者您是说您希望能够在“相机空间”中使用translateZ？
@TheJim01 translateZ 在对象空间中并接收一个相对参数。因此，如果您执行 translateZ(10) 两次，它会将凸轮移动 20 个单位。我希望它在世界空间中而不是相对的。

标签： javascript three.js

【解决方案1】：

我在所有相机装备上都使用了类似的东西。我只需要 2 个变量：焦点位置 (vec3) 和 z 距离。然后我重置每一帧的位置：

var focusPos = new THREE.Vector3();
var zDist = 10;

// Called once per frame
update() {
    // reset camera position
    camera.position.copy(focusPos);

    // Set camera rotations if needed
    // camera.rotation.set(rotX, rotY, 0);

    // Apply z-translation to dolly in/out
    camera.translateZ(zDist);
}

我喜欢这种方法，因为它可以让您更改甚至补间焦点位置，因此您不必总是查看原点。但是，这取决于您如何计算相机旋转，如果您需要更复杂的旋转，您可能会遇到云台锁定。

【讨论】：

我的场景以原点为中心，我想补间 zDist。但我认为你正在调整focusPos？我只是希望能够在查看原点的同时将相机推入和拉出。
focusPos 位于 (0,0,0)，因此无需更改。您要更新的值是 zDist 以推入/推出。
那么我会做 TWEEN.update(); 而不是上面的 camera.translateZ(zDist)然后 var anim = new TWEEN.Tween({ val: 0 }).to({ val: 200 }, 2000).onUpdate(function(value) { camera.translateZ(value.val); }).start();好像没用。