Skip to content

Commit 642dc89

Browse files
tparisitparisi
committed
Chapter 5 Labs
1 parent 34d81a8 commit 642dc89

7 files changed

+1390
-0
lines changed

‎labs/animation-template.html

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
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; Simple Key Frame Animation</title>
5+
6+
<link rel="stylesheet" href="../libs/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" />
7+
<link rel="stylesheet" media="screen" type="text/css" href="../libs/colorpicker/css/colorpicker.css" />
8+
<link rel="stylesheet" href="../css/main.css" />
9+
<link rel="stylesheet" href="../css/keyframeanimation.css" />
10+
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
11+
<script src="../libs/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
12+
<script src="../libs/three.js.r58/three.js"></script>
13+
<script src="../libs/three.js.r58/controls/OrbitControls.js"></script>
14+
<script src="../libs/tween.js/tween.min.js"></script>
15+
<script src="../libs/keyframe.js/keyframe.js"></script>
16+
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
17+
<script type="text/javascript">
18+
19+
var renderer = null,
20+
scene = null,
21+
camera = null,
22+
directionalLight = null,
23+
root = null,
24+
group = null,
25+
cube = null;
26+
27+
function run() {
28+
requestAnimationFrame(function() { run(); });
29+
30+
// Render the scene
31+
renderer.render( scene, camera );
32+
33+
// Update the animations
34+
KF.update();
35+
36+
// Update the camera controller
37+
orbitControls.update();
38+
}
39+
40+
function createScene(canvas) {
41+
42+
// Create the Three.js renderer and attach it to our canvas
43+
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
44+
45+
// Set the viewport size
46+
renderer.setSize(canvas.width, canvas.height);
47+
48+
// Create a new Three.js scene
49+
scene = new THREE.Scene();
50+
51+
// Add a camera so we can view the scene
52+
camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
53+
camera.position.set(0, 0, 8);
54+
scene.add(camera);
55+
56+
// Add a directional light to show off the object
57+
directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
58+
59+
// Create a group to hold all the objects
60+
root = new THREE.Object3D;
61+
62+
// Create and add all the lights
63+
directionalLight.position.set(0, 1, 2);
64+
root.add(directionalLight);
65+
66+
// Create a group to hold the objects
67+
group = new THREE.Object3D;
68+
root.add(group);
69+
70+
// And put some geometry and material together into a mesh
71+
geometry = new THREE.CubeGeometry(2, 2, 2);
72+
var color = 0xffffff;
73+
ambient = 0x888888;
74+
cube = new THREE.Mesh(geometry,
75+
new THREE.MeshPhongMaterial({color:color}));
76+
cube.rotation.x = Math.PI / 4;
77+
78+
// Add the mesh to our group
79+
group.add( cube );
80+
81+
// Now add the group to our scene
82+
scene.add( root );
83+
}
84+
85+
86+
var animator = null,
87+
duration = 1, // sec
88+
loopAnimation = false;
89+
90+
function initAnimations() {
91+
animator = new KF.KeyFrameAnimator;
92+
animator.init({
93+
interps:
94+
[
95+
{
96+
keys:[0, .5, 1],
97+
values:[
98+
{ y : 0 },
99+
{ y : Math.PI },
100+
{ y : Math.PI * 2 },
101+
],
102+
target:group.rotation
103+
},
104+
],
105+
loop: loopAnimation,
106+
duration:duration * 1000,
107+
});
108+
}
109+
110+
function playAnimations()
111+
{
112+
animator.start();
113+
114+
}
115+
116+
$(document).ready(
117+
function() {
118+
119+
var canvas = document.getElementById("webglcanvas");
120+
121+
// create the scene
122+
createScene(canvas);
123+
124+
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
125+
126+
// set up the animations
127+
initAnimations();
128+
129+
// create the animations
130+
playAnimations();
131+
132+
// Run the run loop
133+
run();
134+
}
135+
);
136+
137+
</script>
138+
139+
</head>
140+
<body>
141+
142+
<div id="container">
143+
<canvas id="webglcanvas" width=800 height=600></canvas>
144+
<div id="title">
145+
Key Frame Animation Template
146+
</div>
147+
148+
<div id="prompt">
149+
Drag the mouse to rotate the camera<br>Use the scroll wheel to zoom.
150+
</div>
151+
</div>
152+
153+
<button id="playButton" onClick="playAnimations();">Play</button>
154+
155+
</div>
156+
157+
</html>

‎labs/keyframeanimation-1.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
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; Simple Key Frame Animation</title>
5+
6+
<link rel="stylesheet" href="../libs/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" />
7+
<link rel="stylesheet" media="screen" type="text/css" href="../libs/colorpicker/css/colorpicker.css" />
8+
<link rel="stylesheet" href="../css/main.css" />
9+
<link rel="stylesheet" href="../css/keyframeanimation.css" />
10+
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
11+
<script src="../libs/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
12+
<script src="../libs/three.js.r58/three.js"></script>
13+
<script src="../libs/three.js.r58/controls/OrbitControls.js"></script>
14+
<script src="../libs/tween.js/tween.min.js"></script>
15+
<script src="../libs/keyframe.js/keyframe.js"></script>
16+
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
17+
<script type="text/javascript">
18+
19+
var renderer = null,
20+
scene = null,
21+
camera = null,
22+
directionalLight = null,
23+
root = null,
24+
group = null,
25+
cube = null;
26+
27+
function run() {
28+
requestAnimationFrame(function() { run(); });
29+
30+
// Render the scene
31+
renderer.render( scene, camera );
32+
33+
// Update the animations
34+
KF.update();
35+
36+
// Update the camera controller
37+
orbitControls.update();
38+
}
39+
40+
function createScene(canvas) {
41+
42+
// Create the Three.js renderer and attach it to our canvas
43+
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
44+
45+
// Set the viewport size
46+
renderer.setSize(canvas.width, canvas.height);
47+
48+
// Create a new Three.js scene
49+
scene = new THREE.Scene();
50+
51+
// Add a camera so we can view the scene
52+
camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
53+
camera.position.set(0, 0, 8);
54+
scene.add(camera);
55+
56+
// Add a directional light to show off the object
57+
directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
58+
59+
// Create a group to hold all the objects
60+
root = new THREE.Object3D;
61+
62+
// Create and add all the lights
63+
directionalLight.position.set(0, 1, 2);
64+
root.add(directionalLight);
65+
66+
// Create a group to hold the objects
67+
group = new THREE.Object3D;
68+
root.add(group);
69+
70+
// And put some geometry and material together into a mesh
71+
geometry = new THREE.CubeGeometry(2, 2, 2);
72+
var color = 0xffffff;
73+
ambient = 0x888888;
74+
cube = new THREE.Mesh(geometry,
75+
new THREE.MeshPhongMaterial({color:color}));
76+
//cube.rotation.x = Math.PI / 4;
77+
78+
// Add the mesh to our group
79+
group.add( cube );
80+
81+
// Now add the group to our scene
82+
scene.add( root );
83+
}
84+
85+
86+
var animator = null,
87+
duration = 1, // sec
88+
loopAnimation = false;
89+
90+
function initAnimations() {
91+
animator = new KF.KeyFrameAnimator;
92+
// LAB: add position interpolator to move:
93+
// 2 to the right for the first half second;
94+
// 1 up for the next quarter second;
95+
// back to the original position for the final
96+
// quarter second
97+
// and rotate: about Y
98+
animator.init({
99+
interps:
100+
[
101+
{
102+
keys:[0, .5, 1],
103+
values:[
104+
{ y : 0 },
105+
{ y : Math.PI },
106+
{ y : Math.PI * 2 },
107+
],
108+
target:group.rotation
109+
},
110+
{
111+
keys:[0, .5, .75, 1],
112+
values:[
113+
{ x : 0, y : 0 },
114+
{ x : 2, y : 0 },
115+
{ x : 2, y : 1 },
116+
{ x : 0, y : 0 },
117+
],
118+
target:group.position
119+
},
120+
],
121+
loop: loopAnimation,
122+
duration:duration * 1000,
123+
});
124+
}
125+
126+
function playAnimations()
127+
{
128+
animator.start();
129+
130+
}
131+
132+
$(document).ready(
133+
function() {
134+
135+
var canvas = document.getElementById("webglcanvas");
136+
137+
// create the scene
138+
createScene(canvas);
139+
140+
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
141+
142+
// set up the animations
143+
initAnimations();
144+
145+
// create the animations
146+
playAnimations();
147+
148+
// Run the run loop
149+
run();
150+
}
151+
);
152+
153+
</script>
154+
155+
</head>
156+
<body>
157+
158+
<div id="container">
159+
<canvas id="webglcanvas" width=800 height=600></canvas>
160+
<div id="title">
161+
Key Frame Animation Template
162+
</div>
163+
164+
<div id="prompt">
165+
Drag the mouse to rotate the camera<br>Use the scroll wheel to zoom.
166+
</div>
167+
</div>
168+
169+
<button id="playButton" onClick="playAnimations();">Play</button>
170+
171+
</div>
172+
173+
</html>

0 commit comments

Comments
 (0)