three.js ~ example ~ Mr.doob

2012-01-05 ~

by Gwyn Milcote

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="button" onclick="setScene(scene1)" value="1"/>
<input type="button" onclick="setScener(scene2)" value="2"/>
<input type="button" onclick="setScene(scene3)" value="3"/>
...
<input type="button" onclick="setColour(red_mat)" value="Red"/>
<input type="button" onclick="setColour(yellow_mat)" value="Yellow"/>
<input type="button" onclick="setColour(green_mat)" value="Green"/>

JavaScript

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

var scene1, scene2, scene3, geometry2, material2, mesh2, geometry3, material3, mesh3;

init();
animate();

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

//

var red_mat = new THREE.MeshPhongMaterial(
        {color:0xff0000}
);
var yellow_mat = new THREE.MeshPhongMaterial(
        {color:0xffff00}
); 
var green_mat = new THREE.MeshLambertMaterial(
        {color:0x00ff00}
);

function setColour(col){
    material = col;
    material2 = col;
    material3 = col;
    
     scene2.remove(mesh2);
    mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.position.set(0, 0, 150);
  scene2.add(mesh2);
}

//

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...