Three.js-composer

2017

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="scene1">scene1</button>
<button id="scene2">scene2</button>

JavaScript

var camera, scene, renderer, geometry, material, mesh;

var scene1, scene2, geometry2, material2, mesh2;


init();
animate();

/* Buttons to handle scene switch */
$("#scene2").click(function() {
  scene = scene2
})
$("#scene1").click(function() {
  scene = scene1
})

function init() {
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;

  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);


  /////////////////////////////////////////////////
  //       Scene 1                               //
  /////////////////////////////////////////////////
  
  scene1 = new THREE.Scene();
  geometry = new THREE.CubeGeometry(200, 200, 200);
  material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh(geometry, material);
  scene1.add(mesh);
  
  


  /////////////////////////////////////////////////
  //       Scene 2                               //
  /////////////////////////////////////////////////

  scene2 = new THREE.Scene();

  geometry2 = new THREE.SphereGeometry(100, 10, 10);
  material2 = new THREE.MeshNormalMaterial();

  mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.position.set(0, 0, 150);
  scene2.add(mesh2); // so note need to be able to switch this on 

  // Choosing default scene as scene1
  scene = scene1;
}

function animate() {

  requestAnimationFrame(animate);
  render();

}

function render() {
  // Try some checking to update what is necessary
  mesh.rotation.x += 0.001;
  mesh.rotation.y += 0.002;
  mesh2.rotation.x += 0.01;
  mesh2.rotation.y += 0.02;

  renderer.render(scene, camera);
  
 

}