modify some demos

Author: peteroupc

README.md

@@ -62,11 +62,6 @@ Examples
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));
-  // Set the perspective view.  Camera has a 45-degree field of view
-  // and will see objects from 0.1 to 100 units away.
-  scene.setPerspective(45,scene.getClientAspect(),0.1,100);
-  // Move the camera back 40 units.
-  scene.setLookAt([0,0,40]);
   // Create a box mesh 10 units in width, 20 units
   // in height, and 20 units in depth
   var mesh=Meshes.createBox(10,10,10);
@@ -80,6 +75,11 @@ Examples
   var timer={};
   // Set up the render loop
   GLUtil.renderLoop(function(time){
+   // Set the perspective view.  Camera has a 45-degree field of view
+   // and will see objects from 0.1 to 100 units away.
+   scene.setPerspective(45,scene.getClientAspect(),0.1,100);
+   // Move the camera back 40 units.
+   scene.setLookAt([0,0,40]);
    // Adjust x-rotation
    rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
    // Adjust y-rotation

demos/simple.html

@@ -22,11 +22,6 @@
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));
-  // Set the perspective view.  Camera has a 45-degree field of view
-  // and will see objects from 0.1 to 100 units away.
-  scene.setPerspective(45,scene.getClientAspect(),0.1,100);
-  // Move the camera back 40 units.
-  scene.setLookAt([0,0,40]);
   // Create a box mesh 10 units in size
   var mesh=Meshes.createBox(10,20,20);
   // Create a shape based on the mesh and give it a red color
@@ -39,6 +34,11 @@
   var timer={};
   // Set up the render loop
   GLUtil.renderLoop(function(time){
+   // Set the perspective view.  Camera has a 45-degree field of view
+   // and will see objects from 0.1 to 100 units away.
+   scene.setPerspective(45,scene.getClientAspect(),0.1,100);
+   // Move the camera back 40 units.
+   scene.setLookAt([0,0,40]);
    // Adjust x-rotation
    rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
    // Adjust y-rotation

demos/starfield.html

@@ -65,10 +65,10 @@
    .cullFace(Scene3D.BACK);
   var fc=new FrameCounterDiv(scene)
   var timer={};
-  scene.setPerspective(45,scene.getClientAspect(),5,1000).setLookAt([0,0,500]);
   var group=starField(scene,1000)
   scene.addShape(group);
    GLUtil.renderLoop(function(time){
+    scene.setPerspective(45,scene.getClientAspect(),5,1000).setLookAt([0,0,500]);
     moveStarField(group,1000,GLUtil.newFrames(timer,time))
     fc.update()
     scene.render();

demos/tris.html

@@ -111,12 +111,10 @@
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));
   scene.disableLighting()
-  // Set the perspective view.  Camera has a 45-degree field of view
-  // and will see objects from 0.1 to 100 units away.
-  scene.setOrtho(0,scene.getWidth(),scene.getHeight(),0,-2,2);
   var tris=new TriangleParticles(scene,200);
   // Set up the render loop
   GLUtil.renderLoop(function(time){
+   scene.setOrtho(0,scene.getWidth(),scene.getHeight(),0,-2,2);
    tris.update(time);
    // Render the scene
    scene.render();

tutorials/camera.md

@@ -44,6 +44,8 @@ orthographic projection, described below.
 A perspective projection gives the 3D scene a sense of depth.  In this projection, closer objects
 look bigger than more distant objects with the same size.
 
+The perspective projection is similar to how our eyes see the world.
+
 ![Two rows of spheres, and a drawing of a perspective view volume.](persp1.png)
 
 ![Two rows of spheres, and a side drawing of a perspective view volume.](persp2.png)