Javascript three.js动画中的抖动动画动作

嗨，我的three.js场景中的动画和运动有问题。 当我用THREE.TrackballControls或THREE.OrbitControls移动我的相机0000000 1%时，或者当我使用Tween.js设置对象动画时，我的动画非常急促，对象在动画中围绕运动轴跳跃，看起来像是位置舍入错误

问题更大，当我远离场景中心时，senter在顶点0,0,0上，例如，我在顶点08000000,0上，问题更大

当我移动摄影机或移动对象时，它正在执行

Im使用标准示例代码和标准库：

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

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

问题视频如下：

编辑：

---

我尝试在XYZ:0,01000上将对象和相机的位置移动到靠近中心的位置，抖动要小得多，但误差仍然显著：

---

一个问题有两个问题

我用两种方法解决了它

一个是摄像机移动时物体的突然移动。它看起来像是物体在他的位置周围跳跃，但他并没有移动，相机在环绕或缩放时移动和跳跃。这是由于在距离场景中心约1000万米的过程中精度损失造成的

场景简单不能太大，或者需要找到另一种解决方案，在不损失精度的情况下移动摄影机围绕对象

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

第二个是物体在从A点到B点的过渡运动中的突然移动。这是由渲染引起的。它是在TWEEN.update之后的几毫秒后在animate函数中初始化的。也就是说，在TWEEN计算中，对象平滑移动的时间是不准确的。在下一帧中，TWEEN计算出了比动画稍远的微尘，对象被跳到正确的位置。重复每一帧

解决方案是将TWEEN.update调用放在由animate启动的渲染函数中-与渲染在同一时间启动，应在手动模式下启动。给吐温。谢谢你的TWEEN.js，真是太棒了

之前：

之后：

---

这个问题应该出现在每一个场景中，但在小距离上是看不见的。

一个问题有两个问题

我用两种方法解决了它

一个是摄像机移动时物体的突然移动。它看起来像是物体在他的位置周围跳跃，但他并没有移动，相机在环绕或缩放时移动和跳跃。这是由于在距离场景中心约1000万米的过程中精度损失造成的

场景简单不能太大，或者需要找到另一种解决方案，在不损失精度的情况下移动摄影机围绕对象

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

第二个是物体在从A点到B点的过渡运动中的突然移动。这是由渲染引起的。它是在TWEEN.update之后的几毫秒后在animate函数中初始化的。也就是说，在TWEEN计算中，对象平滑移动的时间是不准确的。在下一帧中，TWEEN计算出了比动画稍远的微尘，对象被跳到正确的位置。重复每一帧

解决方案是将TWEEN.update调用放在由animate启动的渲染函数中-与渲染在同一时间启动，应在手动模式下启动。给吐温。谢谢你的TWEEN.js，真是太棒了

之前：

之后：

---

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

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

我决定对远距离移动的相机和对象（例如在坐标XYS100000000165464464665464464,0处）进行更精确的更改

我制作了一个父对象，它的运动方向与我的船的运动方向相反。我的船始终在场景位置XYZ0,0,0，所有其他网格都位于父对象中，该父对象与我的飞行方向相反，绕着我的船移动

当我想移动我的飞船时，我使用ship.translateX10将其更改为parent.translateX10*-1

效果相同，但在无限距离上精度始终正确。此外，我不需要处理相机环绕移动的飞船，我也不需要移动skybox，因为我的飞船仍然站在场景位置，我的飞船无法从skybox中移出

但这意味着我把一个问题变成了另一个问题，如何正确地计算父框中的位置和我的船的位置。我在此提出另一个问题：

-在2021年无效

所以在另一个问题上也有同样的解决方案

这是文档

---

我有另一个解决方案，可以解决大型场景的精度下降问题

我决定对远距离移动的相机和对象（例如在坐标XYS100000000165464464665464464,0处）进行更精确的更改

我制作了一个父对象，它的运动方向与我的船的运动方向相反。我的船始终在场景位置XYZ0,0,0，所有其他网格位于父对象中，该父对象与我的fli方向相反 他在我的船上四处走动

当我想移动我的飞船时，我使用ship.translateX10将其更改为parent.translateX10*-1

效果相同，但在无限距离上精度始终正确。此外，我不需要处理相机环绕移动的飞船，我也不需要移动skybox，因为我的飞船仍然站在场景位置，我的飞船无法从skybox中移出

但这意味着我把一个问题变成了另一个问题，如何正确地计算父框中的位置和我的船的位置。我在此提出另一个问题：

-在2021年无效

所以在另一个问题上也有同样的解决方案

这是文档

---

听起来像是精度损失3在其矩阵计算中只使用32位浮点。你能在视频开始时给出物体和相机在世界中的确切位置吗？世界中相机的Hi顶点为0,0，-10000100，物体为0,0，-10000000。关键是恒星在0,0,0上，行星围绕着它旋转。但是，如果我在0,01000点移动靠近中心的物体，它会更平滑，但在移动过程中仍然有可见的切点，我认为移动必须100%清晰，否则我会错过什么？谢谢你的回答。我试着在XYZ:0,01000上把物体和相机的位置移到靠近中心的位置，抖动小得多，但误差仍然很明显。听起来像是精度损失。三只在矩阵计算中使用32位浮点。你能在视频开始时给出物体和相机在世界中的确切位置吗？世界中相机的Hi顶点为0,0，-10000100，物体为0,0，-10000000。关键是恒星在0,0,0上，行星围绕着它旋转。但是，如果我在0,01000点移动靠近中心的物体，它会更平滑，但在移动过程中仍然有可见的切点，我认为移动必须100%清晰，否则我会错过什么？谢谢你的回答。我试着在XYZ:0,01000上将物体和相机的位置移到靠近中心的位置，抖动要小得多，但误差仍然很显著。你好，朋友，谢谢你的回答。你发布的链接似乎不可用，你是如何正确计算父框中的位置和船的位置的？嗨，我已经更新了答案你好，朋友，谢谢你的回答。看来你发布的链接不可用，你是如何正确计算父框中的位置和船的位置的？嗨，我已经更新了答案

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

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