-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
51 lines (46 loc) · 1.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<script src='bower_components/threejs/build/three.js'></script>
<script src="vendor/require.js/require.js"></script>
<script src="vendor/three.js/examples/js/Detector.js"></script>
<script src="vendor/threex.windowresize.js"></script>
<script src="shapes/cone.js"></script>
<script src="models/Wheel.js"></script>
<script src="models/SwingArm.js"></script>
<script src="models/SwingFrame.js"></script>
<style>
#graphicsbox {
height: 400px;
width: 600px;
margin: 10px;
padding: 0px;
position: static; /* fixed or static */
top: 20px;
left: 20px;
text-align: center;
}
</style>
<body>
<script src="main.js"></script>
<p>
The following WebGL animation is designed using a similar approach
used by its desktop OpenGL counterpart.
<ul>
<li>Each object is built using its own JS class (<code>Wheel.js</code>
<code>SwingArm.js</code>, and <code>SwingFrame.js</code>)
</li>
<li>
Each animated object is controlled by a separate coordinate frame
(<code>THREE.Matrix4</code> objects: <code>wheel_cf</code> and <code>arm_cf</code>)
</li>
<li>
The render "loop" invokes a function that updates these two
coordinate frames where the motions are calculated using
the current time.
</li>
</ul>
</p>
<div id="graphicsbox"></div>
<h2>Credits</h2>
<p>The initial skeleton of the code was generated by
<a href="https://github.com/jeromeetienne/threejsboilerplate">YeoMan ThreeJS Generator</a></p>
</body>