在three.js中，如何使用相同的渲染器在两个场景间切换？

Question

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

代码取自josdirksen/learning-threejs - loading a scene

var controls = new function () {
        this.exportScene = function () {
            var exporter = new THREE.SceneExporter();
            var sceneJson = JSON.stringify(exporter.parse(scene));
            localStorage.setItem('scene', sceneJson);
        };
        this.clearScene = function () {
            scene = new THREE.Scene();
        };
        this.importScene = function () {
            var json = (localStorage.getItem('scene'));
            var sceneLoader = new THREE.SceneLoader();
            sceneLoader.parse(JSON.parse(json), function (e) {
                scene = e.scene;
            }, '.');
        }
    };

根据我对以上代码的理解，您需要先加载场景，然后才能将其提取并保存到本地存储中，最后再将其放回场景。我知道SceneLoader现在已过时。

对于我的情况，我想要进行初始场景加载，然后通过点击“scene2”按钮来仅显示场景2，如果我点击“scene1”按钮，则返回仅查看场景1（请参见下面的fiddle）。 A Basic Example setup 我不确定从哪里开始，因此任何指针建议或建议都会有所帮助。

- W9914420

Answer 1

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

/* 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);

}

更新了jsfiddle

- Priyesh Kumar

---

非常感谢您关于切换场景时如何实现所需效果的解释和示例。这对我的使用情况非常有效。 - W9914420

Answer 2

你可以通过删除当前场景 scene.remove(mesh); 并添加一个新的网格到场景中来重新绘制画布。

演示：http://jsfiddle.net/sumitridhal/x8t801f5/4/ 你可以使用 dat.GUI 库添加自定义控件。

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

//

 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);

演示 http://codepen.io/sumitridhal/pen/NjbGpB

- Sumit Ridhal

---

谢谢您提供的两个示例，虽然它们不是特别适用于我的用户案例，但很好地展示了从活动场景中删除对象并放置其他对象的能力。您的CodePen演示了这一点非常好 :) - W9914420

你可以为两个函数添加不同的onclick事件。希望你得到了答案。 - Sumit Ridhal