three.js ~ example ~ Mr.doob

2017-05-29 ~ composer

by Master P

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);


  /* 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.add(camera);
  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.01;
  mesh.rotation.y += 0.02;
  mesh2.rotation.x += 0.01;
  mesh2.rotation.y += 0.02;

  renderer.render(scene, camera);

}