-
Notifications
You must be signed in to change notification settings - Fork 0
/
Example01.html
101 lines (92 loc) · 5.5 KB
/
Example01.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/style-master.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src = "front-libs/jquery-3.3.1.min.js"></script>
<meta charset="utf-8"/>
<title> Example 01 </title>
</head>
<body onload="main()">
<div id = "top-bar">
<button class = "common-button" id = "current-object-field">Current object: Object 1</button>
<button class = "common-button" onclick = "newObject(event);"><img src = "icons/object-icon.png" class = "app-icon">New</button>
<button class = "common-button" id = "erase-button" onclick="eraseObject();"><img src = "icons/trash-icon.png" class = "app-icon">Erase</button>
<!--<input type = "color" onchange = "updateObjColor(this.value);" id = "rgb-color-picker">-->
<div class="slidecontainer">
<p style="display: inline; color: white; margin: 10px;">Depth z: </p>
<input type="text" id="textInput" value="0.0" style="width: 15%; display: inline; text-align: center;">
<input type="range" min="0" max="1" step="0.1" value="0.0" width = "width: 100px !important;" onchange = "updateTextInput(this.value);" style="margin-top: 5px; display: inline;">
</div>
<div id = "modeling-mode-container">
<p style = "display: inline;">Triangle Mode:</p>
<select id = "modeling-mode" onchange="updateModelingMode(this.value);" style="padding: 10px;">
<option value="FAN"> TRIANGLE FAN </option>
<option value="STRIP"> TRIANGLE STRIP </option>
</select>
</div>
</div>
<div class="sidebar" id = "sidebar">
<a class="active" href="#home">Objects</a>
<button class = "object-button" onclick = "selectObject(event);" value = 0 id = "0">Object 1
</button>
</div>
<div class = "content">
<canvas id="webgl" width="800" height="800">
Please use a browser that supports canvas
</canvas>
</div>
<div class="right-sidebar" id = "right-sidebar">
<a class="active" href="#home">Controls</a>
<button class = "right-object-button" id = "object-title">Object 1</button>
<p style="width: 100%; color: #5D8AA8">Translate</p>
<div class="control-slidecontainer">
<p style="display: inline;">Translate x:</p>
<input type="range" id = "x-translate" min="-1" max="1" step="0.05" value="0.0" width = "width: 100px !important;" onchange = "updateTranslate(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Translate y:</p>
<input type="range" id = "y-translate" min="-1" max="1" step="0.05" value="0.0" width = "width: 100px !important;" onchange = "updateTranslate(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Translate z:</p>
<input type="range" id = "z-translate" min="-1" max="1" step="0.05" value="0.0" width = "width: 100px !important;" onchange = "updateTranslate(this.value, this.id);" style="display: inline;">
</div>
<p style="width: 100%; color: #5D8AA8">Scale</p>
<div class="control-slidecontainer">
<p style="display: inline;">Scale x:</p>
<input type="range" id = "x-scale" min="0.1" max="2.0" step="0.05" value="1.0" width = "width: 100px !important;" onchange = "updateScale(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Scale y:</p>
<input type="range" id = "y-scale" min="0.1" max="2.0" step="0.05" value="1.0" width = "width: 100px !important;" onchange = "updateScale(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Scale z:</p>
<input type="range" id = "z-scale" min="0.1" max="2.0" step="0.05" value="1.0" width = "width: 100px !important;" onchange = "updateScale(this.value, this.id);" style="display: inline;">
</div>
<p style="width: 100%; color: #5D8AA8">Rotate</p>
<div class="control-slidecontainer">
<p style="display: inline;">Rotate x:</p>
<input type="range" id = "x-rotate" min="0.0" max="360.0" step="5.0" value="0.0" width = "width: 100px !important;" onchange = "updateRotate(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Rotate y:</p>
<input type="range" id = "y-rotate" min="0.0" max="360.0" step="5.0" value="0.0" width = "width: 100px !important;" onchange = "updateRotate(this.value, this.id);" style="display: inline;">
</div>
<div class="control-slidecontainer">
<p style="display: inline;">Rotate z:</p>
<input type="range" id = "z-rotate" min="0.0" max="360.0" step="5.0" value="0.0" width = "width: 100px !important;" onchange = "updateRotate(this.value, this.id);" style="display: inline;">
</div>
<p id = "mode"></p>
</div>
</br>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script src="app3.js"> </script>
</body>
</html>