How to change a ThreeJS scene

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%;">

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:


Yeah, I used jQuery, it’s not mandatory, you can do it with plain Javascript but I already used it for animations and I reused it for a quick way to do the next points, let me comment each function:

  • 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:

var copy = $('#game').clone() 

Finally, you should use it in your scene

var game_scene = document.getElementById('game_scene'); 

That’s all. It should works.

Leave a comment if you need help, have a question or any suggestion! 🙂

David Burgos

Read more posts by this author.