8.4 Spotlight

Ovilia · Ovilia · commit d6d0d4818ef1 · 2013-09-22T16:05:06.000+08:00
diff --git a/Chapter8/8.4.1.html b/Chapter8/8.4.1.html
@@ -2,21 +2,21 @@
 <html>
     <head>
         <script type="text/javascript" src="../lib/three.js"></script>
-        <script type="text/javascript" src="../lib/MTLLoader.js"></script>
-        <script type="text/javascript" src="../lib/OBJMTLLoader.js"></script>
         
         <script type="text/javascript">
             var scene = null;
             var camera = null;
             var renderer = null;
             
+            var cube = null;
+            var alpha = 0;
+            
             function init() {
                 renderer = new THREE.WebGLRenderer({
                     canvas: document.getElementById('mainCanvas')
                 });
                 renderer.setClearColor(0x000000);
                 renderer.shadowMapEnabled = true;
-                renderer.shadowMapSoft = true;
                 
                 scene = new THREE.Scene();
                 
@@ -25,28 +25,43 @@
                 camera.lookAt(new THREE.Vector3(0, 0, 0));
                 scene.add(camera);
                 
-                var light = new THREE.DirectionalLight(0xffffff);
-                light.castShadow = true;
-                light.shadowDarkness = 0.5;
-                light.shadowCameraNear = 0.1;
-                light.shadowCameraFar = 20;
-                light.shadowCameraVisible = true;
-                light.position.set(-2.0, 5.0, 3.0);
-                scene.add(light);
-                
-                var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
-                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
-                greenCube.castShadow = true;
-                scene.add(greenCube);
-                
-                var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8),
+                var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8, 16, 16),
                         new THREE.MeshLambertMaterial({color: 0xcccccc}));
                 plane.rotation.x = -Math.PI / 2;
                 plane.position.y = -1;
                 plane.receiveShadow = true;
                 scene.add(plane);
                 
+                cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
+                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
+                cube.position.x = 2;
+                cube.castShadow = true;
+                scene.add(cube);
+                
+                var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);
+                light.position.set(2, 5, 3);
+                light.target = cube;
+                light.castShadow = true;
+                scene.add(light);
+                
+                // ambient light
+                var ambient = new THREE.AmbientLight(0x666666);
+                scene.add(ambient);
+                
+                requestAnimationFrame(draw);
+            }
+            
+            function draw() {
+                alpha += 0.01;
+                if (alpha > Math.PI * 2) {
+                    alpha -= Math.PI * 2;
+                }
+                
+                cube.position.set(2 * Math.cos(alpha), 0, 2 * Math.sin(alpha));
+                
                 renderer.render(scene, camera);
+                
+                requestAnimationFrame(draw);
             }
         </script>
     </head>
