2.4.1 Perspective camera

Ovilia · Ovilia · commit bb36b3d00a53 · 2013-07-17T19:13:47.000+08:00
diff --git a/Chapter1/1.1.1.html b/Chapter1/1.1.1.html
diff --git a/Chapter2/2.3.1.html b/Chapter2/2.3.1.html
@@ -15,12 +15,14 @@
                 // canvas size is 400x300
                 var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
                 camera.position.set(0, 0, 5);
+                //camera.lookAt(new THREE.Vector3(0, 0, 0));
                 scene.add(camera);
                 
                 // a cube in the scene
                 var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                         new THREE.MeshBasicMaterial({
-                            color: 0xff0000
+                            color: 0xff0000,
+                            wireframe: true
                         })
                 );
                 scene.add(cube);
diff --git a/Chapter2/2.4.1.html b/Chapter2/2.4.1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+    <head>
+        <script type="text/javascript" src="../lib/three.js"></script>
+        
+        <script type="text/javascript">
+            function init() {
+                var renderer = new THREE.WebGLRenderer({
+                    canvas: document.getElementById('mainCanvas')
+                });
+                renderer.setClearColor(0x000000);
+                var scene = new THREE.Scene();
+                
+                // camera
+                // canvas size is 400x300
+                var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
+                camera.position.set(0, 0, 5);
+                scene.add(camera);
+                
+                // a cube in the scene
+                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
+                        new THREE.MeshBasicMaterial({
+                            color: 0xff0000,
+                            wireframe: true
+                        })
+                );
+                scene.add(cube);
+                
+                // render
+                renderer.render(scene, camera);
+            }
+        </script>
+    </head>
+    
+    <body onload="init()">
+        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
+    </body>
+</html>
