THREE.JSとアニメーションの開始と一時停止のボタン

Question

私はTHREE.js GUIからアニメーションを起動しようとしています。

「Start」と「Reset」という2つのボタンがあります。まず、「Start」ボタンをクリックすると、アニメーションが起動され（アニメーションは球の回転です）、このボタンのテキストは「Pause」に設定されます。アニメーションが起動したら、別の時間をクリックして一時停止してアニメーションを停止することができます。

私の問題は、これらのクリックとrender()がTHREE.JSのアニメーションのレンダリングに対応していないことです。ここで

は、私はしばらくの間やっていることです：

// Boolean for start and restart 
var initAnim = true; 
var runAnim = false; 

// Buttons startButton and resetButton 
var startButton = document.getElementById('startButtonId'); 
var resetButton = document.getElementById('resetButtonId'); 

// Start Button 
    startButton.onclick = function StartAnimation() { 

    if (initAnim) { 
    initAnim = false; 
    runAnim = true; 
    theta = 0; 
    } 
    // Start and Pause 
    if (runAnim) { 
    startButton.innerHTML = 'Pause'; 
    runAnim = false; 
    render(); 
    } else { 
      startButton.innerHTML = 'Restart'; 
      runAnim = true; 
    } 
    } 

// Reset Button 
    resetButton.onclick = function ResetParameters() { 

    // Set StartButton to Start 
    startButton.innerHTML = 'Start'; 

    // Boolean for Stop Animation 
    initAnim = true; 
    runAnim = false; 

    } 

と私のレンダリング（）関数のために、私が持っている：あなたが見ることができるように

function render() { 

     // Increment timer 
     timer += clock.getDelta()*0.1; 
     theta = -timer; 

     // Call rendering function 
     requestAnimationFrame(render); 

     // Rotate camera 
     rotateCamera(); 

     controls.update(); 

     // Rendering 
     renderer.render(scene, camera); 

    } 

、私が呼び出そうrender()最初にstartButtonをクリックするとアニメーションを開始する機能がありますが、静的な球（実際にはこれは回転するカメラ）から開始し、開始時にクリックした後に回転させることはわかりません。

誰かがこの問題について詳しい情報を提供できますか？

ありがとうございます。

Answer 1

だけ一時停止する​​前に戻る：作品

function render() { 
    if (!isPlay) return; 

    //... 

    // Call rendering function 
    requestAnimationFrame(render); 

    //... 
} 

[https://jsfiddle.net/yr9ogsh8/]