Javascript 在three.js中使用相同的渲染器在两个场景之间切换

我一直在试图找到一种方法，能够在three.js中的两个场景之间切换。我知道可以使用sceneLoader/exportScene组合加载场景

代码取自

根据我对上述代码的理解，您需要先加载场景，然后才能将其提取并保存到本地存储，然后才能将其放回场景中。我也知道SceneLoader现在已经被弃用了

对于我的senario，我希望有一个初始场景加载，通过单击“scene2”按钮，我希望只显示scene2，如果单击“scene1”按钮，则返回到只查看scene1（参见下面的fiddle）

---

我不知道从哪里开始，所以任何指针建议或建议都会很有帮助。

您可以通过删除当前场景来重新绘制画布并将创建新网格添加到场景中

演示

您可以使用

dat.GUI

库添加自定义控件

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.4/dat.gui.js"></script>

---

演示

如果您需要切换到新场景，那么为什么不使用两个场景对象和一个主场景呢。尝试以下代码

/* Buttons to handle scene switch */
$("#scene2").click(function() {
  scene = scene2
})
$("#scene1").click(function() {
  scene = scene1
})

function init() {
  ....

  /* I dont think you need to add camera to scene for viewing perpose. By doing this, essentially you are adding camera object to scene, and you won't be able to see it because scene is rendered using this camera and camera eye is at same location
  */
  scene1 = new THREE.Scene();
  // Build scene1
  //  scene1.add(camera);


  scene2 = new THREE.Scene();
  // Build scene2    

  // Choosing default scene as scene1
  scene = scene1;
}
function render() {
  // Try some checking to update what is necessary

  renderer.render(scene, camera);

}

---

更新了关于如何在切换场景之间实现所需效果的解释和示例的许多TNX。这在我的用例中非常有效。感谢两个示例，尽管它不是针对我的用例的，但它很好地展示了从活动场景中移除对象并放置其他对象的能力。您的代码笔很好地显示了这一点：）您可以为这两个函数添加不同的onclick事件。我希望你得到了答案。

 var controls = new function() {
    // we need the first child, since it's a multimaterial
    this.radius = 10;
    this.detail = 0;
    this.type = 'Icosahedron';

    this.redraw = function() {
 // remove the old plane
      scene.remove(mesh);
      // create a new one
 // add it to the scene.
      scene.add(mesh);
   }
});
 var gui = new dat.GUI();
  gui.add(controls, 'radius', 0, 40).step(1).onChange(controls.redraw);
  gui.add(controls, 'detail', 0, 3).step(1).onChange(controls.redraw);
  gui.add(controls, 'type', ['Icosahedron', 'Tetrahedron', 'Octahedron', 'Custom']).onChange(controls.redraw);

/* Buttons to handle scene switch */
$("#scene2").click(function() {
  scene = scene2
})
$("#scene1").click(function() {
  scene = scene1
})

function init() {
  ....

  /* I dont think you need to add camera to scene for viewing perpose. By doing this, essentially you are adding camera object to scene, and you won't be able to see it because scene is rendered using this camera and camera eye is at same location
  */
  scene1 = new THREE.Scene();
  // Build scene1
  //  scene1.add(camera);


  scene2 = new THREE.Scene();
  // Build scene2    

  // Choosing default scene as scene1
  scene = scene1;
}
function render() {
  // Try some checking to update what is necessary

  renderer.render(scene, camera);

}