THREE.JS和用於啓動和暫停動畫的按鈕

Question

我嘗試從我的THREE.js GUI啓動動畫。

我有兩個按鈕，分別是「Start」和「Reset」動畫。首先，當我點擊「開始」按鈕時，動畫必須啓動（動畫是一個球體的旋轉），此按鈕的文本設置爲「Pause」。動畫啓動後，我可以再點擊一次來暫停並停止動畫。

我的問題是，我不知道如何處理這些點擊的動畫渲染以及THREE.JS的render()。

這裏是我的時刻完成：

// 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/]