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

嗨，我的动画和动作在我的three.js场景中有问题。当我将我的相机（甚至0,0000001％）（由THREE.TrackballControls OR THREE.OrbitControls），或者当我使用动画对象Tween.js，我的动画是非常生涩，对象跳跃德宁周围运动轴animatinon ，看起来像是位置四舍五入的错误。three.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

来源

2014-09-05 Martin112345

听起来像是精度的损失（三只使用32位在矩阵计算浮动）。你可以在视频开始的时候给出对象和摄像机世界的确切位置吗？ – Volune 2014-09-06 09:35:07

世界上相机的顶点是0,0，-10000100，物体是0,0，-10000000。要点是在0,0,0星和星球在旋转。但是，如果我在0,0,1000附近的中心移动物体，它会更加平滑，但移动中仍然存在可见的“切片”，我认为移动必须100％清晰，否则我错过了某些内容？谢谢您的回答。 – Martin112345 2014-09-07 21:32:29

我尝试移动物体和相机的位置靠近中心（在XYZ：0,0,1000），它抖动少得多，但错误仍然非常显着http://viking.viaconn.net/trash/ScreenCapture_2014- 9-8％2010.19.51.wmv – Martin112345 2014-09-08 08:26:36

我有另一个解决方案，为一个巨大的场景失去精度。

我决定做出更好的变化问题与松精密摄像头和物体移动的长距离（例如，在坐标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

来源

2014-09-11 17:38:17 Martin

在一个问题上有两个问题。

我通过2种方式解决它。

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

场景简单的不能那么大，或者是需要找到另一种解决方案移动相机周围的物体，且不丢失精度。

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

二是TWEEN运动PROM点A期间的对象的运动不平稳到点B.这是通过使引起的。它在TWEEN.update（）之后（几ms后）开始于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);   
}

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

来源

2014-09-09 08:19:29 Martin

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

回答

相关问题