-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (58 loc) · 2.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first three.js app</title>
<style>
label {
display: block;
}
input {
display: block;
}
</style>
</head>
<body>
<div style="position: absolute; display: flex; width: 100%; height: 100%; top: 0; left: 0">
<div style="width: 300px; border: 2px solid black; padding: 10px">
<div id="estimation" style="display: none">
<!-- UI -->
<label for="ySlider">Forward Slider (Use W and S keys for fine tuning)</label>
<input type="range" min="-100" max="100" value="0" id="ySlider" />
<label for="xSlider">Sideways Slider (Use A and D keys for fine tuning)</label>
<input type="range" min="-100" max="100" value="0" id="xSlider" />
<hr />
<label for="xScaleSlider">X Scale Slider</label>
<input type="range" min="1" max="99" value="50" id="xScaleSlider" />
<label for="yScaleSlider">Y Scale Slider</label>
<input type="range" min="1" max="99" value="50" id="yScaleSlider" />
<label for="zScaleSlider">Z Scale Slider</label>
<input type="range" min="1" max="99" value="50" id="zScaleSlider" />
<input type="button" id="resetScale" value="Reset Scale to Original Ratio" />
<hr />
<input type="button" id="cubeButton" value="Use Cube" />
<input type="button" id="hemisphereButton" value="Use Hemisphere" />
<hr />
<p>Volume: <span id="volume"></span> cm<sup>3</sup></p>
</div>
<div id="plane">
<h3>Plane Manipulation</h3>
<label for="rotatePlaneX">Rotate Plane X</label>
<input type="range" min="-90" max="90" value="0" id="rotatePlaneX" />
<label for="rotatePlaneY">Rotate Plane Y</label>
<input type="range" min="-90" max="90" value="0" id="rotatePlaneY" />
<label for="rotatePlaneZ">Rotate Plane Z</label>
<input type="range" min="-90" max="90" value="0" id="rotatePlaneZ" />
<label for="movePlaneX">Move Plane X</label>
<input type="range" min="-100" max="100" value="0" id="movePlaneX" />
<label for="movePlaneY">Move Plane Y</label>
<input type="range" min="-100" max="100" value="0" id="movePlaneY" />
<label for="movePlaneZ">Move Plane Z (Changes how large we appear)</label>
<input type="range" min="-100" max="100" value="0" id="movePlaneZ" />
<input type="button" id="proceed" value="Proceed to Volume Estimation" />
</div>
</div>
<iframe style="width: 100%" src="./scene.html"> </iframe>
</div>
</body>
</html>