I was playing with ThreeJS to make a tiny game prototype and I didn’t know how to change a ThreeJS scene in order to restart the level, change it or load a game.
It’s not so hard but you should know a few points.
As you know, ThreeJS links a scene to a DOM element and you can have only 1 scene.
Probably you would have it with a UI, for example:
<div id="game"> <span id="health" style="position: absolute; top: 5%; left: 5%;"> </span> </div>
And your scene uses it as container.
Ok, we can have only 1 scene and we already have the UI in the container.
So a solution would be to get and use a copy of the container:
- with the UI
- with a different ID
- without threeJS bindings or events
- and use it as container for the scene.
In your game controller, where you init the game, add:
$('#game').clone() .off() .attr('id','game_scene') .prependTo('body');
clone()Get a copy of the DOM element
off()Remove all events attached
attr()Set a different ID
prependTo()Add the copy to the body
Then, when you need to change your scene like where you reset the level, change it or whatever, add:
$('#game_scene').remove(); var copy = $('#game').clone() .off() .attr('id','game_scene'); copy.prependTo('body');
Finally, you should use it in your scene
var game_scene = document.getElementById('game_scene'); game_scene.appendChild(scene.renderer.domElement);
That’s all. It should works.
Leave a comment if you need help, have a question or any suggestion! 🙂