Redlands Conservatory JavaScript Lessons

Cut And Paste Code For Lesson 22

This week we'll continue to learn to make and place 3D objects.
Since some students are having problems with the new editor
being glitchy, the cut and paste code on this page will work in ANY javascript editor!
Just read the directions below!
Click here to go back to our lessons page.

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>

Modify and place the following objects where you would like them.
By changing the variables, you can make MANY additional shapes. (See Lesson 21 for step by step.)
Here is the code for a sphere:

var shape = new THREE.SphereGeometry(200, 150, 100);
var cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
ball.position.set (0,0,0);
ball.rotation.set(0.5, 0.5, 0);
scene.add(ball);

Here is the code for a rectangle:

var shape = new THREE.CubeGeometry(231,231,231);
var cover = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(shape, cover);
cube.position.set (0,0,0);
//cube.rotation.set(0.5, 0.5, 0);
scene.add(cube);

Here is the code for a cylinder OR a cone:

var shape = new THREE.CylinderGeometry(20,20,419);
var cover = new THREE.MeshNormalMaterial();
var cylinder = new THREE.Mesh(shape, cover);
cylinder.position.set (0,0,0);
//cylinder.rotation.set(0.5, 0.5, 0);
scene.add(cylinder);

So gang, how are we going to animated these? Are you thinking "loops?" Right you are! Next week!!!!