Skip to content

Commit 911a30d

Browse files
tparisitparisi
committed
Technical Review Edits
1 parent 20ab25b commit 911a30d

File tree

3 files changed

+153
-3
lines changed

3 files changed

+153
-3
lines changed

‎Chapter 1/3dtransforms.html

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<title>Programming 3D Applications in HTML5 and WebGL &mdash; 3D Transforms</title>
5+
<link rel="stylesheet" href="../css/3dtransforms.css" />
6+
7+
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
8+
<script src="../libs/three.js.r58/three.js"></script>
9+
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
10+
<script type="text/javascript">
11+
12+
var renderer = null,
13+
scene = null,
14+
camera = null,
15+
cube = null;
16+
17+
function run() {
18+
requestAnimationFrame(function() { run(); });
19+
20+
// Render the scene
21+
renderer.render( scene, camera );
22+
23+
}
24+
25+
$(document).ready(
26+
function() {
27+
28+
var canvas = document.getElementById("webglcanvas");
29+
30+
// Create the Three.js renderer and attach it to our canvas
31+
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
32+
33+
// Set the viewport size
34+
renderer.setSize(canvas.width, canvas.height);
35+
36+
// Create a new Three.js scene
37+
scene = new THREE.Scene();
38+
39+
// Add a camera so we can view the scene
40+
camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
41+
camera.position.z = 12;
42+
camera.position.y = 2;
43+
camera.lookAt(new THREE.Vector3);
44+
scene.add(camera);
45+
46+
// Add a directional light to show off the object
47+
var light = new THREE.DirectionalLight( 0xffffff, 1.5);
48+
49+
// Position the light out from the scene, pointing at the origin
50+
light.position.set(0, .1, 1);
51+
scene.add( light );
52+
53+
// Create a Phong material
54+
var material = new THREE.MeshPhongMaterial({ color:0xaa0000 });
55+
56+
// Create the cube geometry
57+
var geometry = new THREE.CubeGeometry(2, 2, 2);
58+
59+
// And put the geometry and material together into a mesh
60+
cube = new THREE.Mesh(geometry, material);
61+
62+
// Move the mesh to the left and rotate it
63+
cube.position.x = -4;
64+
cube.rotation.x = Math.PI / 8;
65+
cube.rotation.y = Math.PI / 5;
66+
67+
// Finally, add the mesh to our scene
68+
scene.add( cube );
69+
70+
// Create a Phong material
71+
var material = new THREE.MeshPhongMaterial({ color:0x008800 });
72+
73+
// Create the cube geometry
74+
var geometry = new THREE.CubeGeometry(2, 2, 2);
75+
76+
// And put the geometry and material together into a mesh
77+
cube = new THREE.Mesh(geometry, material);
78+
79+
// Finally, add the mesh to our scene
80+
scene.add( cube );
81+
82+
// Create a Phong material
83+
var material = new THREE.MeshPhongMaterial({ color:0x000088 });
84+
85+
// Create the cube geometry
86+
var geometry = new THREE.CubeGeometry(2, 2, 2);
87+
88+
// And put the geometry and material together into a mesh
89+
cube = new THREE.Mesh(geometry, material);
90+
91+
// Move the mesh to the right and scale it
92+
cube.position.x = 4;
93+
cube.scale.set(1.5, 1.5, 1.5);
94+
95+
// Finally, add the mesh to our scene
96+
scene.add( cube );
97+
98+
// Run the run loop
99+
run();
100+
}
101+
);
102+
103+
</script>
104+
105+
</head>
106+
<body>
107+
108+
<canvas id="webglcanvas" style="border: none;background-color:#aaaaaa" width="800" height="600"></canvas>
109+
<div id="legend-left" class="legend">
110+
Translate [-4, 0, 0]<br></br>Rotate [PI / 8, PI / 5, 0]
111+
112+
</div>
113+
<div id="legend-right" class="legend">
114+
Scale [1.5, 1.5, 1.5]
115+
116+
</div>
117+
118+
</body>
119+
120+
</html>

‎Chapter 11/previewer.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,9 @@
133133
"../models/futurgo_city/futurgo_city.dae",
134134
"../models/futurgo_city/futurgo_city.json",
135135
"../models/missile/missile.dae",
136-
"../models/missile/missile-fixed.dae",
137136
"../models/missile/missile.json",
137+
"../models/missile/missile-fixed.dae",
138138
"../models/missile/missile-fixed.json",
139-
"../models/vizi_mobile_tc01_newer/vizi_mobile_tc01.dae",
140-
"../models/vizi_mobile_tc01_newer/vizi_mobile_tc01.json",
141139
"../models/frigate/frigate.dae",
142140
"../models/frigate/frigate.json",
143141
"../models/duck/duck.dae",

‎css/3dtransforms.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@CHARSET "UTF-8";
2+
3+
* {
4+
font-family: Arial;
5+
font-size:20px;
6+
font-style: italic;
7+
}
8+
9+
body {
10+
color:Black;
11+
}
12+
13+
#container {
14+
position:absolute;
15+
}
16+
17+
#webglcanvas {
18+
border:none;
19+
background-color:#000000;
20+
}
21+
22+
#legend-left {
23+
position:absolute;
24+
left: 80px;
25+
top:500px;
26+
}
27+
28+
#legend-right {
29+
position:absolute;
30+
left: 580px;
31+
top:500px;
32+
}

0 commit comments

Comments
 (0)