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動畫中的生澀動畫動畫

回答

相關問題