Redlands Conservatory JavaScript Lessons

Cut And Paste Code For Lesson 22

This week we'll ANIMATE our 3D objects!
Click here to go back to our lessons page.

Once again, cut and paste the following code into ANY JavaScript editor to set up the 3D environment.
YOUR code will be entered where it says "START CODING..."
Use this code to start ALL your 3D programs.

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
// This is where stuff in our game will happen:
var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ********

// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>

OK, Lets add our code to make a torroid under the "Start Coding" line above.

var shape = new THREE.TorusGeometry(100, 25, 8, 25);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);

And directly under that, lets add our animation function (awesome)!:

var clock = new THREE.Clock();

function animate() {
requestAnimationFrame(animate);
var t = clock.getElapsedTime();

donut.rotation.set(t, 2*t, 0);

renderer.render(scene, camera);
}
animate();

After you try the above to make visualizing the basics easy,
here is a BIG "cut and paste" sample that will spin all the objects at once just for fun!!!

// This is where stuff in our game will happen:

var scene = new THREE.Scene();

// This is what sees the stuff:

var aspect_ratio = window.innerWidth / window.innerHeight;

var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);

camera.position.z = 400;

scene.add(camera);

// This will draw what the camera sees onto the screen:

var renderer = new THREE.CanvasRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ********

var shape = new THREE.SphereGeometry(100);