在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（見下面的小提琴） 。

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

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