Question

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

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（）进行顺序调用，但后来我无法看到介绍动画，所以我对它进行了评论。

Answer 1

好的，我能够解决它。

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

在intro_animation之前调用animate会以某种方式使这个工作。我还使用return函数将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);
   }

}

切换两个不同的场景Three.js

1 个答案: