three.jsのアニメーションをオフにする方法

Question

three.jsでコードをテストするときに、アニメーションは必要ありません。私は最初にレンダリングされたフレームを見ることができます。これにより、消費電力が少なくなり、ラップトップのファンがグラフィックスカードの温度が上昇するのを防ぐことができます。 three.jsで

例としては、以下の構造を有する：

function init() { 
    animate() 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 
} 

function render() { 
    group.rotation.y += (targetRotation - group.rotation.y) * 0.05; 
    renderer.render(scene, camera); 
} 

私はアニメーションを繰り返し呼び出しをオフにする方法が表示されません。 アニメーションを無効にする簡単な方法はありますか？

Answer 1

静的なシーンがある場合、three.jsにアニメーションループを持つ必要はありません。ちょうど

renderer.render(scene, camera); 

カメラが動いたり、ローダーがモデルの読み込みやテクスチャの読み込みを終えると、レンダリングする必要があります。

あなたは、静的なシーンにOrbitControlsを使用している場合は、そのようOrbitControlsをインスタンス化することができます

render()は renderer.render(scene, camera)を呼び出し

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.addEventListener('change', render); // use if there is no animation loop 

。

モデルやテクスチャを読み込んでいる場合、three.jsローダーには指定できるコールバック関数があります。迅速なハックとしては、例えば、

var loader = new THREE.TextureLoader(); 
var texture = loader.load('myTexture.jpg', render); 

また

var manager = new THREE.LoadingManager(); 
var loader = new THREE.OBJLoader(manager); 

loader.load('myModel.obj', function(object) { 
    // your code... 
    render(); 
} 

three.js r.75