three.js 动画中的生涩动画动作

Question

您好，我的 three.js 场景中的动画和移动存在问题。 当我移动我的相机（甚至 0,0000001%）（通过 THREE.TrackballControls 或 THREE.OrbitControls）或使用 Tween.js 为对象设置动画时，我的动画非常不稳定，对象在动画期间围绕运动轴跳跃，看起来位置四舍五入是错误的。

问题更大，当我远离场景中心时（发送者在顶点 (0,0,0) 上），例如我在顶点 (0,8000000,0) 上，问题就更大了。

当我移动相机或移动物体时。

我正在使用标准示例代码和 satndard 库：

<script src="http://threejs.org/examples/../build/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.js"></script>
<script src="js/tween.min.js"></script>

我将在这里发布一部分代码，但我不知道代码的哪一部分..？

这里的问题视频：

Video of screen

编辑：

我尝试将物体和相机的位置移动到靠近中心的位置（在 XYZ:0,0,1000 上），抖动要小得多，但错误仍然很明显： Video 2 here

Answer 1

一个问题有两个问题。

我通过两种方式解决了。

一个是相机移动时物体的抖动。看起来物体在他的位置周围跳跃，但他没有移动，并且相机正在移动（并且在轨道或缩放时跳跃）。这是由于距离场景中心的距离（大约 1000 万）造成的精度损失。

简单的场景不能这么大，否则需要寻找另一种解决方案来在物体周围移动相机而不损失精度。

Solution is to move object closer to the center of scene Vertex(0,0,0).

Second 是在 TWEEN 从 A 点移动到 B 点的过程中，对象的抖动移动。这是由渲染引起的。它是在比 TWEEN.update() 之后（几毫秒后）在 animate() 函数中启动的。这意味着，在 TWEEN 计算的时刻，物体平滑移动的时间是不实际的。在下一帧中，TWEEN 计算出比动画小的一点点，并且对象被跳转到正确的位置。重复每一帧。

解决方案是将 TWEEN.update() 调用到 render() （由 animate() 启动的函数 - 与渲染同时启动，应该是手动的。对于 TWEEN。（感谢 TWEEN.js 很棒）唯一的工作！））。

之前：

function animate() { 
      render();
      TWEEN.update(); // this is recommended by TWEEN.js documentation
      requestAnimationFrame( animate );
}

function render() {      
      renderer.render( scene, camera );         
}

之后：

function animate() { 
      render();
      requestAnimationFrame( animate );
}

function render() {      
      TWEEN.update(); // and this is working for me      
      renderer.render( scene, camera );         
}

这个问题应该在每个场景中都有，但在小距离上是不可见的。

Answer 2

我有另一个解决方案，可以解决大场景的精度损失问题。

我决定改进改变问题，解决相机和长距离移动物体的精度松散问题（例如坐标 XYS(1000000000,165464464665464464,0)）。

我制作了一个父对象，它的移动方向与我的船相反。我的船始终在场景位置 XYZ(0,0,0) 上，所有其他网格都在一个父对象中，该对象与我的飞行方向相反（围绕我的船移动）。

当我想移动我的船时，我将使用 ship.translateX(10) 更改为 parent.translateX(10*-1)。

效果相同，但精度在无限距离上始终正确。另外我不需要处理摄像机轨道移动的船，也不需要移动天空盒，因为我的船仍然站在场景位置（我的船不能从天空盒中移出）。

但这意味着我将一个问题更改为另一个问题，即如何正确计算父框中的位置和我的船的位置。在这里提出另一个问题：

https://stackoverflow.com/questions/25771604/coordinates-of-objects-in-parent-box-towards-another-parent-box - 2021 年无效，

所以在另一个问题How to get the global/world position of a child object?中有相同的解决方案

这里是文档 https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition