8.5 Shadow

Ovilia · Ovilia · commit 22e9ff0ada55 · 2013-09-22T16:05:26.000+08:00
diff --git a/Chapter8/8.5.1.html b/Chapter8/8.5.1.html
@@ -0,0 +1,85 @@
+<!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">
+            var scene = null;
+            var camera = null;
+            var renderer = null;
+            
+            var cube = null;
+            var alpha = 0;
+            
+            function init() {
+                renderer = new THREE.WebGLRenderer();
+                renderer.setSize(400, 300);
+                
+                var container = document.getElementById('canvas');
+                container.appendChild(renderer.domElement);
+                renderer.shadowMapEnabled = true;
+                renderer.shadowMapSoft = true;
+                
+                scene = new THREE.Scene();
+                
+                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
+                camera.position.set(5, 15, 25);
+                camera.lookAt(new THREE.Vector3(0, 0, 0));
+                scene.add(camera);
+                
+                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;
+                
+                light.shadowCameraNear = 2;
+                light.shadowCameraFar = 10;
+                light.shadowCameraFov = 30;
+                light.shadowCameraVisible = true;
+                
+                light.shadowMapWidth = 1024;
+                light.shadowMapHeight = 1024;
+                light.shadowDarkness = 0.3;
+                
+                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>
+    
+    <body onload="init()">
+        <!--canvas id="mainCanvas" width="400px" height="300px" ></canvas-->
+        <div id="canvas" width="400px" height="300px"></div>
+    </body>
+</html>
