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

Question

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

取自josdirksen/learning-threejs 的代码 - 加载场景

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 现在已被弃用。

对于我的场景，我想要一个初始场景加载，然后通过单击“场景 2”按钮我只想显示场景 2，如果我单击“场景 1”按钮返回仅查看场景 1（请参见下面的小提琴）。

基本示例设置

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

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