2017-08-27 8 views
0

回転している単純なキューブをレンダリングしようとしています。すべてのマシンで同じ回転速度を得るには、各フレーム間のタイムスパンを計算し、この回転値を回転で使用します。経過時間を計算するとThree.jsがレンダリングされない

var elapsed = (timestamp - lastFrameTimestamp)/1000.0; // doesn't show the cube

しかし、私は何も表示されません。この値を使用していたとき: は、基本的にはそれだけです。また、コンソールにエラーや警告も表示されません。経過値をコンソールに出力すると正しい数値が返されます。

私は固定値との違いを設定しようとしましたが、これはうまく動作しますか?

var elapsed = 16.665487/1000.0;

私はこのような場合のためにjsFiddleを作成しました。私はChromeとFirefoxの両方で同じ結果を試しました。

誰かが問題を引き起こしているアイデアやヒントを持っていますか?

+1

THREE.clock.getDelta(

requestAnimationFrame(animate); 

を呼び出すことによって、アニメーションのループをトリガーする必要があります。しかし、私のアプローチがうまくいかない理由はまだ分かっています – Auskennfuchs

+0

'console.log(cube.rotation.x + = 0.1 * elapsed)'出力NaN – 2pha

+0

最初のアニメーションコールの引数としてDate.now()を渡す必要があります。 – micnil

答えて

2

あなたのフィドルの問題はtimestampanimateのTE最初の呼び出しでヌルになるということです。これは、lastFrameTimestampになり、elapsedヌルに設定され、最後に回転も設定されます。 requestAnimationFrameのMDN web docsから

コールバックメソッドは、requestAnimationFrameのでキューに入れられたコールバックが起動し始めたときに、現在の時刻を表す単一の引数、DOMHighResTimeStampを、渡されました。したがって、以前のコールバックの各ワークロードの計算中に時間が経過しても、1つのフレーム内の複数のコールバックは同じタイムスタンプを受信します。このタイムスタンプはミリ秒単位の10進数ですが、最小精度は1ms(1000μs)です。

だから、requestAnimationFrameのはrequestAnimationFrameのコールバックを発射し始めたときのコールバック(animate)現在の時刻を示すタイムスタンプ、(performance.now()から返された時間)を渡します。

だから、あなたはあなたのアニメーションのタイムスタンプを利用したい場合は、ジョブが正しくありません)だけではなく、animate();

+0

そうです、これで問題は解決します。ありがとう。 – Auskennfuchs