three.jpとsongleを使い、曲がサビに入るとオブジェクト（cube）が回転しサビが終わると一時停止するようにしたい。

Question

Three.jsとSongleを使用したコードに関する質問

曲がサビに入るとオブジェクト（cube）が回転し、サビが終わると一時停止、次のサビが来ると回転を再開するようにしたいです。問題点は以下２つです。

①サビが来る（chorusEnter）とy軸周りに1°プラスされそれが連続するようにしました。しかしクリックで別のサビ部分を再生するとそのたびに回転が加速してしまいます。
②サビが終わる（chorusLeave）際に、__cube.rotation.y__の値を0とする__stop__関数を実行することで回転の停止を試みましたが、動作に反映されませんでした。

他は正常に動作していたので、まずはサビ時の処理に関するコードのみ抜粋します。コンソールのエラー表示等は出ていません。

 　　　　 songleWidget.on("chorusEnter", function(){
                console.log("chorus now");
                //サビの演出を記述---
                function animate() { //アニメーションを実現するための関数を定義
                          //-------アニメーションに関する記述-------//
                          //立方体をy軸周りに1°（π/180）だけ回転させる
                          cube.rotation.y = cube.rotation.y + Math.PI/180;
                          renderer.render(scene, camera); //シーンのレンダリング
                          requestAnimationFrame(animate); //animate関数を実行（２回目以降）
                 }
                animate(); //animate関数を実際に実行する（１回目）
          });

          songleWidget.on("chorusLeave", function(){
                console.log("chorus done");
                //サビの演出を終了---
                function stop() { //アニメーションを実現するための関数を定義
                          //-------アニメーションに関する記述-------//
                          cube.rotation.y = 0;　//回転を止める
                          renderer.render(cube); //シーンのレンダリング
                 }
                 stop();//stop関数を実際に実行する
          });

質問としては、

②回転が加速してしまう原因。可能であれば解決方法。

②オブジェクトの回転を一時停止・再開するためにはどのような記述方法（または考え方）をすればよいか？

を教えていただきたいです。お分かりになる方は、回答をよろしくお願い致します。

※念のため、コード全文も載せておきます。

window.onload = load_songle; //画面読み込み完了時のイベントハンドラ
window.onSongleWidgetReady = ready; //songleWidgetのイベントハンドラ
function load_songle() { //イベントハンドラ(load_songle)
         var songleWidgetElement = //SongleWidget要素を作成
         SongleWidgetAPI.createSongleWidgetElement ({
                 api: "songle-widget-api-example", //API属性に任意の文字列の設定
                 url: "www.youtube.com/watch?v=Dx_fKPBPYUI"}); //楽曲のURL
         document.body.appendChild(songleWidgetElement); //DOM要素を追加
}

function ready(apiKey, songleWidget) { //イベントハンドラ(ready)
         //CGの描画
         var scene = new THREE.Scene(); //シーンの作成
         var aspect = window.innerWidth/window.innerHeight; //aspect比
         var camera = new THREE.PerspectiveCamera(80, aspect, 1, 1000); //camera
         camera.position.set(0, 0, 30); //カメラを設置

         var cubeGeo = new THREE.BoxGeometry(8, 8, 8); //立方体ジオメトリ
         var cubeMat = new THREE.MeshBasicMaterial({color:0xff0000}); //Material
         var cube = new THREE.Mesh(cubeGeo, cubeMat); //立方体メッシュの作成
         cube.position.set(0, 0, 0); //立方体を設置
         scene.add(cube); //シーンに立方体を追加

         //4.光源（ライト）の設定と配置
         var light = new THREE.SpotLight(0xFFFFFF); //光源の種類,色の設定
         light.position.set(0, 30, 30); //光源の位置(x,y,z)
         scene.add(light); //シーンに光源を追加
         //ライトヘルパーを作成
         var lightHelper = new THREE.SpotLightHelper(light);
         scene.add(lightHelper);

         var renderer = new THREE.WebGLRenderer(); //レンダラーの作成
         renderer.setClearColor(new THREE.Color(0xEEEEEE)); //背景色の設定
         renderer.setSize(window.innerWidth, window.innerHeight); //サイズを設定
         document.body.appendChild(renderer.domElement); //DOM要素を追加
         renderer.render(scene, camera); //シーンのレンダリング

         songleWidget.on("chorusEnter", function(){
                console.log("chorus now");
                //サビの演出を記述---
                function animate() { //アニメーションを実現するための関数を定義
                          //-------アニメーションに関する記述-------//
                          //立方体をy軸周りに1°（π/180）だけ回転させる
                          cube.rotation.y = cube.rotation.y + Math.PI/180;
                          renderer.render(scene, camera); //シーンのレンダリング
                          requestAnimationFrame(animate); //animate関数を実行（２回目以降）
                 }
                animate(); //animate関数を実際に実行する（１回目）
          });

          songleWidget.on("chorusLeave", function(){
                console.log("chorus done");
                //サビの演出を終了---
                function stop() { //アニメーションを実現するための関数を定義
                          //-------アニメーションに関する記述-------//
                          cube.rotation.y = 0; //回転を止める
                          renderer.render(cube); //シーンのレンダリング
                }
                 stop();//stop関数を実際に実行する
          });
}

Answer 1

requestAnimationFrameを止める必要があります

"Songle Widget API"というものを初めて知ったので、その部分に関してはドキュメントを確認しただけなのでご了承ください。

まずrequestAnimationFrameに関して、もう一度仕様を確認してください。
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

requestAnimationFrameでループを始めると、cancelAnimationFrameを行わない限りループし続けます。

回転が加速してしまう原因

こちらですがサビのたびにsongleWidget.on("chorusEnter", function(){});が実行されるので、すでに回転しているループ処理に加えて、さらに追加で回転するループ処理が始まるのでサビのたびに回転数が上がるわけです。

ですので、songleWidget.on("chorusLeave", function(){});内でcancelAnimationFrameを使ってループ処理を止めれば回転は止まります。

オブジェクトの回転を一時停止・再開するため

提示されたコードを最小限に改修した場合はこんな感じになると思います。
https://codepen.io/mattari-panda/pen/wvzRVxN

ただし、Three.jsでいろいろやるには基本的にrequestAnimationFrameでレンダリングし続ける必要があります。ループ処理をとめてしまうとレンダリングが更新されなくなるためです。
ですので、上記の例はあくまで「最小限に改修した場合」となります。

考え方としてはThree.jsの初期化のもろもろのコードや、requestAnimationFrameのループ処理などを別の関数にうつして、そちらで色々行ったほうがあとから便利になります。

Comments

[momomomon]

教えていただいたことをふまえて試行錯誤してみたら、なんとか正常に動作できそうです・・・！詳細な回答ありがとうございました。