forked from 1j01/pipes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
94 lines (94 loc) · 4.78 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebGL 3D Pipes Screensaver</title>
<link rel="author" href="../../humans.txt">
<meta name="description" content="A web-based remake of the Windows 3D Pipes screensaver (3D Pipes.scr or sspipes.scr) using Three.js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="shortcut icon" href="images/meta/favicon.ico" type="image/x-icon" sizes="16x16 32x32">
<meta itemprop="image" content="images/screencap.gif">
<!--
Note: chrome does not display the 16px icon in its 16px space in this case
-->
<!-- but the 16px icon isn't objectively better, so whatever -->
<link type="text/css" rel="stylesheet" href="main.css">
<script src="js/sri-fallback.js"></script>
<script x-sri-fallback="js/three.min.js" src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/TeapotBufferGeometry.js"></script>
</head>
<body>
<a target="_blank" rel="noopener" href="https://github.com/Alex313031/webgl-pipes" class="ui-container"><img
class="fork-me"
style="position: absolute; top: 0; right: 0; border: 0;"
src="images/forkme_right_white_ffffff.png"
alt="Fork me on GitHub"
data-canonical-src="images/forkme_right_white_ffffff.png"/></a>
<div class="controls ui-container">
<button id="fullscreen-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.543 438.543">
<path
d="M407.42 159.029c3.62 3.616 7.898 5.428 12.847 5.428 2.282 0 4.668-.476 7.139-1.429 7.426-3.235 11.136-8.853 11.136-16.846V18.276c0-4.949-1.807-9.231-5.428-12.847-3.61-3.617-7.898-5.424-12.847-5.424H292.36c-7.991 0-13.607 3.805-16.848 11.419-3.23 7.423-1.902 13.99 4 19.698l41.111 41.112-101.352 101.355L117.917 72.231l41.112-41.112c5.901-5.708 7.232-12.275 3.999-19.698C159.789 3.807 154.175 0 146.182 0H18.276C13.324 0 9.041 1.809 5.425 5.426 1.808 9.042.001 13.324.001 18.273V146.18c0 7.996 3.809 13.61 11.419 16.846 2.285.948 4.57 1.429 6.855 1.429 4.948 0 9.229-1.812 12.847-5.427l41.112-41.109 101.354 101.354L72.234 320.622l-41.112-41.113c-5.711-5.903-12.275-7.231-19.702-4.001C3.806 278.749.001 284.364.001 292.362v127.906c0 4.948 1.807 9.229 5.424 12.847 3.619 3.614 7.902 5.421 12.851 5.421h127.906c7.996 0 13.61-3.806 16.846-11.416 3.234-7.427 1.903-13.99-3.999-19.705l-41.112-41.106L219.271 264.95l101.353 101.361-41.114 41.11c-5.899 5.708-7.228 12.279-3.997 19.698 3.237 7.617 8.856 11.423 16.851 11.423h127.907c4.948 0 9.232-1.813 12.847-5.428 3.613-3.613 5.42-7.898 5.42-12.847V292.362c0-7.994-3.709-13.613-11.136-16.851-7.802-3.23-14.462-1.903-19.985 4.004l-41.106 41.106-101.359-101.35L366.31 117.917l41.11 41.112z"
fill="#FFF"
/>
</svg>
Enter Fullscreen
</button>
<label>
Joint Type:
<select id="joint-types">
<option value="elbow">Elbow</option>
<option value="ball">Ball</option>
<option value="mixed" selected>Mixed</option>
<option value="cycle">Cycle</option>
</select>
</label><br>
<div style="margin-bottom: 8px;"></div>
<label for="speed" style="color: white;">Speed:
<input type="range" name="speed" min="1" step="1" default="10" max="100"></label><br>
<button id="toggle-controls">
<span class="normal-controls-enabled">Control Camera</span>
<span hidden class="orbit-controls-enabled">Relinquish Camera</span>
</button>
<table>
<thead>
<tr>
<th>Mouse button</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="normal-controls-enabled">
<td>Primary</td>
<td>Change view</td>
</tr>
<tr class="normal-controls-enabled">
<td>Secondary</td>
<td>Clear pipes and restart</td>
</tr>
<tr hidden class="orbit-controls-enabled">
<td>Primary (Drag)</td>
<td>Rotate view</td>
</tr>
<tr hidden class="orbit-controls-enabled">
<td>Secondary (Drag) (or arrow keys)</td>
<td>Pan around</td>
</tr>
<tr hidden class="orbit-controls-enabled">
<td>Middle (Drag or Wheel)</td>
<td>Zoom</td>
</tr>
</tbody>
</table>
</div>
<div id="canvas-container">
<canvas id="canvas-webgl"></canvas>
<canvas id="canvas-2d" style="pointer-events: none"></canvas>
</div>
<script src="screensaver.js"></script>
</body>
</html>