-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (177 loc) · 9.28 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<title>Final Project - Constructive Solid Geometry</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="project.css">
<!-- WebGL utility scripts -->
<script type="text/javascript" src="common/webgl-utils.js"></script>
<script type="text/javascript" src="common/initShaders2.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="MVe.js"></script>
<!-- Project-specific scripts -->
<script type="text/javascript" src="primitive.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="bsp.js"></script>
<script type="text/javascript" src="project.js"></script>
<script type="text/javascript" src="trackball.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Your browser does not support the HTML5 canvas element.
</canvas>
<div id="controls">
<div id="createPanel">
<button id="coneButton" class="createButton"></button>
<button id="cylinderButton" class="createButton"></button>
<button id="sphereButton" class="createButton"></button>
<button id="cubeButton" class="createButton"></button>
</div>
<div id="booleanSelectPanel">
<!-- Operation Buttons -->
<button id="subtractButton" class="booleanButton"
title="Subtraction"></button>
<button id="intersectButton" class="booleanButton"
title="Intersection"></button>
<button id="unionButton" class="booleanButton"
title="Union"></button>
<h2>Boolean Operations</h2>
<!-- Geometry field 1 -->
<label for="geo1Field">Geometry 1:</label>
<input id="geo1Field" type="text" readonly>
<button id="geo1SetButton">Set</button>
<br>
<!-- Geometry field 2 -->
<label for="geo2Field">Geometry 2:</label>
<input id="geo2Field" type="text" readonly>
<button id="geo2SetButton">Set</button>
<br style="clear:both;">
</div>
<div id="interactionPanel">
<div id="translationPanel">
<h2>Translation</h2>
<label for="transX">X:</label>
<input id="transX" type="number" value="0"
min="-4" max="5" step="0.01">
<input id="transXSlider" type="range" value="0"
min="-5" max="5" step="0.01">
<br>
<label for="transY">Y:</label>
<input id="transY" type="number" value="0"
min="-5" max="5" step="0.01">
<input id="transYSlider" type="range" value="0"
min="-5" max="5" step="0.01">
<br>
<label for="transZ">Z:</label>
<input id="transZ" type="number" value="0"
min="-5" max="5" step="0.1">
<input id="transZSlider" type="range" value="0"
min="-5" max="5" step="0.01">
</div>
<div id="scalePanel">
<h2>Scaling</h2>
<label for="scaleX">X:</label>
<input id="scaleX" type="number" value="1"
min="0.01" max="3" step="0.01">
<input id="scaleXSlider" type="range" value="1"
min="0.01" max="3" step="0.01">
<br>
<label for="scaleY">Y:</label>
<input id="scaleY" type="number" value="1"
min="0.01" max="3" step="0.01">
<input id="scaleYSlider" type="range" value="1"
min="0.01" max="3" step="0.01">
<br>
<label for="scaleZ">Z:</label>
<input id="scaleZ" type="number" value="1"
min="0.01" max="3" step="0.01">
<input id="scaleZSlider" type="range" value="1"
min="0.01" max="3" step="0.01">
</div>
<div id="rotationPanel">
<h2>Rotation</h2>
<label for="rotX">X:</label>
<input id="rotX" type="number" value="0"
step="1" min="-180" max="180">
<input id="rotXSlider" type="range" value="0"
min="-180" max="180" step="1">
<br>
<label for="rotY">Y:</label>
<input id="rotY" type="number" value="0"
step="1" min="-180" max="180">
<input id="rotYSlider" type="range" value="0"
min="-180" max="180" step="1">
<br>
<label for="rotZ">Z:</label>
<input id="rotZ" type="number" value="0"
step="1" min="-180" max="180">
<input id="rotZSlider" type="range" value="0"
min="-180" max="180" step="1">
</div>
<div id="colorPanel">
<h2>Color</h2>
<label for="colR">R:</label>
<input id="colR" type="number" value="1"
step="0.1" min="0" max="1">
<label for="colG">G:</label>
<input id="colG" type="number" value="1"
step="0.1" min="0" max="1">
<label for="colB">B:</label>
<input id="colB" type="number" value="1"
step="0.1" min="0" max="1">
<label for="colA">A:</label>
<input id="colA" type="number" value="1"
step="0.1" min="0" max="1">
<button id="colorButton">Set Color</button>
</div>
</div>
<div id="selectPanel">
<select id="sceneList" size="10"></select>
<button id="deleteButton">Delete Selected Object</button>
<button id="copyButton">Copy Selected Object</button>
</div>
</div>
<div id="notes">
<p>Notes on using this program:<p>
<h3>Basics</h3>
<ul>
<li>The gray block on the left is the 3D view. You can rotate the
view around by clicking and dragging.</li>
<li>The buttons with pictures of shapes will create their
corresponding shape inside of the canvas at coordinates 0, 0, 0.</li>
<li>A shape gets a white wireframe mesh when it is selected. A shape can
be selected by clicking the shape in the viewer button, or by clicking
on the name of the shape in the list view on the right.
<li>Currently selected shapes can be manipulated via the fields and
sliders to the right of the canvas. Updates are in real time, except
for color, which must be set all at once. Currently selected shapes can
be deleted by clicking the delete button below the object list.</li>
</ul>
<h3>Boolean Operations</h3>
<ul>
<li>There are three boolean operations avaialable: UNION, INTERSECTION,
and SUBTRACTION. They are accessible by the three buttons in the
<b>Boolean Operations</b> section. Hover over the buttons for the name
of the specific operation.</li>
<li>To perform boolean operations, two pieces of geometry must be selected
in the <b>Boolean Operations</b> section. To do this, select the first
piece of geometry (order matters for subtraction!) either by picking it
in the viewer, or by selecting it from the list, then clicking the
first "Set" button in the <b>Boolean Operations</b> panel. The name of
the geometry will appear in the text box. Repeat this process for the
second piece of geometry.</li>
<li>When two pieces of geometry are selected, click on one of the boolean
operation buttons. The original geometry will be deleted, and the new,
combined geometry will take its place. The new geometry can be manipulated
like any other geometry, and can have more boolean operations applied to
it as well!</li>
</ul>
</div>
<h2>Examples</h2>
A 6-sided die:<br>
<img src="images/die.png" alt="6-Sided Die"/><br>
Some sort of cartridge, perhaps a magnum version of the 5.56x45mm:<br>
<img src="images/cartridge.png" alt="Cartridge"/><br>
My USB drive:<br>
<img src="images/usb.png" alt="USB 3.0 Drive"/><br>
</body>
</html>