在两个不同的场景之间切换 Three.js答案

【问题标题】：Switching between two different scenes Three.js在两个不同的场景之间切换 Three.js
【发布时间】：2018-01-12 06:20:40
【问题描述】：

我正在尝试在 three.js 中进行场景转换，但遇到了渲染器在请求时不会转换到新场景的问题。我有一个包含基本动画的介绍场景，完成后它应该将用户带到主场景。

var reqF;  

init();
intro_animation(); 
//animate();
init(){
   //initialize scenes, renderer, and cameras here

}

function intro_animation(){
   //intro animation code
   if( /*done*/ ){
      console.log("Exiting Intro Animation");
      window.cancelAnimationFrame(reqF);
      animate();
   }
   else{
      console.log("continuing intro animation");
      reqF = requestAnimationFrame(intro_animation);
      renderer.clear();
      renderer.render( backgroundScene, backgroundCamera );
      renderer.render(intro_scene,intro_cam);
   }

} 

function animate() {
   console.log("entering main animation");
   //main animation code
   reqF = requestAnimationFrame(animate);
   renderer.clear();
   renderer.render( backgroundScene, backgroundCamera );
   renderer.render(scene,camera);

}

Edit1：所以我添加了 cancelAnimationFrame() 函数，但是当我打开开发控制台时它仍在循环并且不会切换到主循环。动画函数内的第二个渲染器调用也会渲染背景。我尝试在 intro_animation() 调用之后对 animate() 进行顺序调用，但是我无法看到介绍动画，所以我将其注释掉。

【问题讨论】：

?您在动画功能中渲染了两次。此外，您在这两个函数上都调用了requestAnimationFrame，但从不取消任何一个。投票结束，简单的逻辑问题。
对不起，我是 Three.js 的新手，但取消 requestAnimationFrame 是什么意思？不是动画循环所必需的。
要扩展@2pha 所说的内容，请参阅requestAnimationFrame 和cancelAnimationFrame 的文档。您需要在开始第二个循环之前终止第一个循环。
好的，当它完成后，我在介绍动画中调用了 cancelAnimationFrame，但由于某种原因，它仍然不会终止并切换到下一个循环，如我的编辑所示。

标签： three.js

【解决方案1】：

好的，我能够解决它。

init();
animate();
intro_animation();

在 intro_animation 之前调用 animate 会以某种方式完成这项工作。我还通过返回调用将 cancelAnimationFrame() 添加到 intro_animation，以防止它再次循环。

function intro_animation(){
//intro animation code
   if( /*done*/ ){
         console.log("transitioning");
         window.cancelAnimationFrame(reqF);
         return;
   }
   else{
     console.log("continuing intro animation");
     reqF = requestAnimationFrame(intro_animation);
     renderer.clear();
     renderer.render( backgroundScene, backgroundCamera );
     renderer.render(intro_scene,intro_cam);
   }

}

【讨论】：