From 5d4980a7ed9f5c3d3aec51989ff92d539187083b Mon Sep 17 00:00:00 2001
From: Tony Parisi <tparisi@gmail.com>
Date: Mon, 9 Dec 2013 14:51:51 -0800
Subject: [PATCH] Swapped Chapters 8 and 9; Added Wireframe Circle for Figure

---
 Chapter 4/threejscircle.html                  |  94 ++++++++++++++
 .../pipelinethreejsdaescene.html              |   0
 .../pipelinethreejsgltfscene.html             |   0
 .../pipelinethreejsmodel.html                 |   0
 .../pipelinethreejsmodelbinary.html           |   0
 Chapter 9/pipelinepreviewer.html              |  50 --------
 Chapter 9/pipelinethreejsscene.html           | 117 ------------------
 {Chapter 8 => Chapter 9}/vizicube.html        |   0
 .../vizicubebehaviors.html                    |   0
 .../vizicubeinteractive.html                  |   0
 10 files changed, 94 insertions(+), 167 deletions(-)
 create mode 100644 Chapter 4/threejscircle.html
 rename {Chapter 9 => Chapter 8}/pipelinethreejsdaescene.html (100%)
 rename {Chapter 9 => Chapter 8}/pipelinethreejsgltfscene.html (100%)
 rename {Chapter 9 => Chapter 8}/pipelinethreejsmodel.html (100%)
 rename {Chapter 9 => Chapter 8}/pipelinethreejsmodelbinary.html (100%)
 delete mode 100644 Chapter 9/pipelinepreviewer.html
 delete mode 100644 Chapter 9/pipelinethreejsscene.html
 rename {Chapter 8 => Chapter 9}/vizicube.html (100%)
 rename {Chapter 8 => Chapter 9}/vizicubebehaviors.html (100%)
 rename {Chapter 8 => Chapter 9}/vizicubeinteractive.html (100%)
diff --git a/Chapter 4/threejscircle.html b/Chapter 4/threejscircle.html
new file mode 100644
index 0000000..b989b4f
--- /dev/null
+++ b/Chapter 4/threejscircle.html	
@@ -0,0 +1,94 @@
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Programming 3D Applications in HTML5 and WebGL &mdash; Three.js Circle Geometry</title>
+
+<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
+<script src="../libs/three.js.r58/three.js"></script>
+<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
+<script type="text/javascript">
+
+	var renderer = null, 
+	scene = null, 
+	camera = null,
+	cube = null;
+	
+    var duration = 5000; // ms
+    var currentTime = Date.now();
+	function animate() {
+		
+        var now = Date.now();
+        var deltat = now - currentTime;
+        currentTime = now;
+        var fract = deltat / duration;
+        var angle = Math.PI * 2 * fract;
+		cube.rotation.y += angle;
+	}
+
+	function run() {
+        requestAnimationFrame(function() { run(); });
+        
+			// Render the scene
+			renderer.render( scene, camera );
+
+			// Spin the cube for next frame
+			// animate();
+				
+    }
+    
+	$(document).ready(
+			function() {
+
+				var canvas = document.getElementById("webglcanvas");
+
+		        // Create the Three.js renderer and attach it to our canvas
+			    renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
+
+			    // Set the viewport size
+			    renderer.setSize(canvas.width, canvas.height);
+
+			    // Create a new Three.js scene
+			    scene = new THREE.Scene();
+
+			    // Add  a camera so we can view the scene
+		        camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
+				scene.add(camera);
+				
+		        // Add a directional light to show off the object
+				var light = new THREE.DirectionalLight( 0xffffff, 1.5);
+
+				// Position the light out from the scene, pointing at the origin
+				light.position.set(0, 0, 1);
+				scene.add( light );
+
+		        // Now, create a Phong material to show shading; pass in the map
+		        var material = new THREE.MeshPhongMaterial({
+			        color: 0xffffff, wireframe:true });
+
+		        // Create the cube geometry
+		        var geometry = new THREE.CircleGeometry(2, 16);
+
+		        // And put the geometry and material together into a mesh
+		        cube = new THREE.Mesh(geometry, material);
+
+		        // Move the mesh back from the camera and tilt it toward the viewer
+		        cube.position.z = -8;
+
+		        // Finally, add the mesh to our scene
+		        scene.add( cube );
+
+		        // Run the run loop
+		        run();
+			}
+	);
+
+</script>
+
+</head>
+<body>
+
+    <canvas id="webglcanvas" style="border: none;background-color:#000000" width="500" height="500"></canvas>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Chapter 9/pipelinethreejsdaescene.html b/Chapter 8/pipelinethreejsdaescene.html
similarity index 100%
rename from Chapter 9/pipelinethreejsdaescene.html
rename to Chapter 8/pipelinethreejsdaescene.html
diff --git a/Chapter 9/pipelinethreejsgltfscene.html b/Chapter 8/pipelinethreejsgltfscene.html
similarity index 100%
rename from Chapter 9/pipelinethreejsgltfscene.html
rename to Chapter 8/pipelinethreejsgltfscene.html
diff --git a/Chapter 9/pipelinethreejsmodel.html b/Chapter 8/pipelinethreejsmodel.html
similarity index 100%
rename from Chapter 9/pipelinethreejsmodel.html
rename to Chapter 8/pipelinethreejsmodel.html
diff --git a/Chapter 9/pipelinethreejsmodelbinary.html b/Chapter 8/pipelinethreejsmodelbinary.html
similarity index 100%
rename from Chapter 9/pipelinethreejsmodelbinary.html
rename to Chapter 8/pipelinethreejsmodelbinary.html
diff --git a/Chapter 9/pipelinepreviewer.html b/Chapter 9/pipelinepreviewer.html
deleted file mode 100644
index c8f6afc..0000000
--- a/Chapter 9/pipelinepreviewer.html	
+++ /dev/null
@@ -1,50 +0,0 @@
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Programming 3D Applications in HTML5 and WebGL &mdash; Model and Scene Previewer</title>
-
-<link rel="stylesheet" href="../css/main.css" />
-
-<div id="container" style="width:98%; height:98%; position:absolute;">
-</div>
-
-<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
-<script src="../libs/vizi/vizi.js"></script>
-<script type="text/javascript">
-
-$(document).ready(
-		function() {
-
-			// Create the Vizi application object
-			var container = document.getElementById("container");		
-			var app = new Vizi.Application({ container : container });
-
-			// Create a camera controller - model viewing mode
-			var controller = Vizi.Prefabs.ModelController({active:true, headlight:false});
-			app.addObject(controller);
-
-			// Load the model
-			var root = new Vizi.Object;
-			var loader = new Vizi.Loader;
-			loader.addEventListener("loaded", function(scene) { handleSceneLoaded(scene, root)});
-			loader.loadScene("../models/duck.dae");
-
-			app.addObject(root);
-			
-			// Run it
-			app.run();
-		}
-);
-
-function handleSceneLoaded(scene, root) {
-
-	 root.addComponent(scene.scene); 
-}
-
-</script>
-
-</head>
-<body>
-
-
-</html>
\ No newline at end of file
diff --git a/Chapter 9/pipelinethreejsscene.html b/Chapter 9/pipelinethreejsscene.html
deleted file mode 100644
index 147f7a2..0000000
--- a/Chapter 9/pipelinethreejsscene.html	
+++ /dev/null
@@ -1,117 +0,0 @@
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Programming 3D Applications in HTML5 and WebGL &mdash; Loading Scenes with Three.js JSON Format</title>
-
-<link rel="stylesheet" href="../css/main.css" />
-
-<div id="container" style="width:98%; height:98%; position:absolute;">
-</div>
-
-<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
-<script src="../libs/three.js.r58/three.js"></script>
-<script src="../libs/three.js.r58/controls/OrbitControls.js"></script>
-<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
-<script type="text/javascript">
-var renderer = null, 
-scene = null, 
-camera = null,
-orbitControls = null;
-
-function run() {
-    requestAnimationFrame(function() { run(); });
-    
-		// Update the camera controller
-		if (orbitControls)
-			orbitControls.update();
-
-		// Render the scene
-		if (scene && camera)
-			renderer.render( scene, camera );
-}
-
-var shadows = true;
-var addEnvironment = true;
-var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 2048;
-
-function createRenderer(container) {
-	// Create the Three.js renderer and attach it to our canvas
-	renderer = new THREE.WebGLRenderer( { antialias: true } );
-
-	// Turn on shadows
-	if (shadows) {
-		renderer.shadowMapEnabled = true;
-		renderer.shadowMapType = THREE.PCFSoftShadowMap;
-	}
-	    
-	// Set the viewport size
-	renderer.setSize(container.offsetWidth, container.offsetHeight);
-
-	container.appendChild(renderer.domElement);
-}
-
-function loadScene() {
-	// Ball chair by Luxxeon
-    // http://www.turbosquid.com/FullPreview/Index.cfm/ID/761919
-    // http://www.turbosquid.com/Search/Artists/luxxeon
-    // http://luxxeon.deviantart.com/
-    
-    var url = "../models/escadanotexture/escadaNOtexture.js";
-
-    // Egg chair by Luxxeon
-    // http://www.turbosquid.com/FullPreview/Index.cfm/ID/738230
-    // http://www.turbosquid.com/Search/Artists/luxxeon
-    // http://luxxeon.deviantart.com/
-    // var url = "../models/egg_chair/eggchair.json";
-
-    var loader = new THREE.SceneLoader();
-	loader.load( url, function( data ) { 
-		handleSceneLoaded(data) } );
-    
-}
-
-function createCamera()
-{
-    // Add  a camera so we can view the scene
-    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
-    camera.position.z = 10;
-	scene.add(camera);
-	
-}
-
-function handleSceneLoaded(data) {
-	scene = data.scene;
-	camera = data.cameras.default_camera;
-	if (camera == null)
-		createCamera();
-
-	initControls();
-}
-
-function initControls() {
-	orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
-}
-
-$(document).ready(
-		function() {
-
-			var container = document.getElementById("container");
-
-			// create the renderer
-			createRenderer(container);
-			
-			// load the scene
-			loadScene();
-
-	        // Run the run loop
-	        run();
-		}
-);
-
-</script>
-
-</head>
-<body>
-
-
-</html>
\ No newline at end of file
diff --git a/Chapter 8/vizicube.html b/Chapter 9/vizicube.html
similarity index 100%
rename from Chapter 8/vizicube.html
rename to Chapter 9/vizicube.html
diff --git a/Chapter 8/vizicubebehaviors.html b/Chapter 9/vizicubebehaviors.html
similarity index 100%
rename from Chapter 8/vizicubebehaviors.html
rename to Chapter 9/vizicubebehaviors.html
diff --git a/Chapter 8/vizicubeinteractive.html b/Chapter 9/vizicubeinteractive.html
similarity index 100%
rename from Chapter 8/vizicubeinteractive.html
rename to Chapter 9/vizicubeinteractive.html
