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

对于我的 senario，我想要一个初始场景加载，然后通过单击“scene2”按钮我只想显示 scene2，如果我单击“scene1”按钮返回到仅查看 scene1(请参见下面的 fiddle )。

A Basic Example setup

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

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