Question

我的three.js场景中的动画和动作有问题。当我移动相机（甚至是0,0000001％）（通过THREE.TrackballControls或THREE.OrbitControls）或当我使用Tween.js动画对象时，我的动画非常生涩，物体在运动轴周围跳动动画，看起来像是在位置四舍五入的错误。

问题更大，当我远离场景中心（senter在顶点（0,0,0）上）时，例如我在顶点（0,8000000,0）并且问题更大。

移动相机或移动物体时正在进行。

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

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

第二次是在TWEEN运动舞会A点到B点期间物体的抖动。这是由渲染引起的。它是在（之后几毫秒）比TWEEN.update（）之后的animate（）函数中启动的。这意味着，物体平滑运动的时间在TWEEN计算的时刻是不实际的。在下一帧中，TWEEN比动画计算了一点点微尘，并且物体被跳到了正确的位置。重复每一帧。

解决方案是将TWEEN.update（）调用放到render（）（由animate（）启动的函数 - 在渲染的同时启动，应该是手动的。对于TWEEN。（感谢TWEEN.js它的伟大工作SOLE！））。

<强>之前：

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

在three.js动画中的生涩动画运动

2 个答案: