-
Notifications
You must be signed in to change notification settings - Fork 43
/
panel.html
executable file
·109 lines (103 loc) · 6.1 KB
/
panel.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
<html>
<head>
<style>
*{ box-sizing: border-box; margin: 0; padding: 0; font-size: 12px; text-shadow: 0 1px 0 #ffffff;}
body{ background-color: #eee; -webkit-user-select: none; cursor: default; overflow: hidden;}
.layout{ position:fixed; display: flex; flex-direction: column; height: 100%; width: 100%;}
.section{ display: flex; flex-direction: column; flex: 0 0 auto; align-self: stretch; }
.subsection{ display: flex; flex-direction: row; flex: 0 0 auto; align-self: stretch; padding: 5px 5px 0 5px;}
#canvas-container{ flex: 1; align-self: stretch; }
.warning{ padding: 10px; background-color: #fecc34; color: #d70404; }
.warning p{ padding: 5px 20px 5px 20px; }
.block{}
.var-name{ width: 80px; display: inline-block;}
#saved-poses-base{ position: relative; display }
#saved-poses{ position: absolute; background-color: rgba(255,255,255,.6); padding: 5px; width: 200px; box-shadow: 0 2px 2px #888;}
.collapsed{ display: none; }
#saved-poses span{ padding: 4px;}
.subsection p{ line-height: 1em }
.subsection span{ padding: 4px 8px; display: inline-block; }
button{ background-color: #eeeeee; border-radius: 4px; outline: none; border: 1px solid #ddd; padding: 5px 10px; position: relative; box-shadow: 0 2px 1px #ddd; margin: 1px; white-space: nowrap; text-indent: 16px; height: 2.3em;}
button:hover{ background-color: #fafafa;}
button.active, button:active{ background-color: #ffffff; box-shadow: inset 0 2px 1px #ddd; }
button.active{ color: #b70000; }
button.disabled{ opacity: .5; }
button object{ pointer-events: none; width: 12px; height: 12px; margin-right: .5em; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}
#disclaimer{ text-decoration: underline; cursor: pointer; padding: 10px; }
.info{ background-color: #fafafa; box-shadow: 0 1px 1px #888; }
#pose-info{ margin: 0 0 0 5px; }
#action-buttons{ margin: 0 0 10px 5px; }
.instructions{ padding: 10px; }
a{ color: inherit; }
#saved-poses object{ width: 10px; height: 10px; }
#saved-poses p{ position: relative; }
#saved-poses span:hover{ opacity: .5; }
.remove-entry{ position: absolute; right: 5px; top: 5px;}
.remove-entry:hover{ opacity: .5; }
#bottom-panel{ position: absolute; left: 0; right: 0; bottom: 0; }
#action-buttons span{ line-height: 2em; }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="TransformControls.js"></script>
<script src="OBJLoader.js"></script>
<div class="layout">
<div class="section info">
<p id="disclaimer">Click for Disclaimer and instructions</p>
<div id="disclaimer-content" class="collapsed" >
<div class="instructions">
<p><b>Camera controls</b><br/>Left-click and drag on screen to rotate - Right-click to pan - Mousewheel to zoom</p><br/>
<p><b>Transform controls</b><br/><b>W</b> Translate - <b>E</b> Rotate - <b>Q</b> to switch between Local and World space<br/><b>Ctrl</b> Snap translation to 10cm (4") and rotation to 15º</p><br/>
<p><b>Reset pose</b> to simulate a resetPose (HMD goes back to origin)<br/>
<b>Save pose</b> to store the current pose and use it later<br/>
<b>Selected saved Pose</b> to retrieve a previously saved pose</br>
<b>Reset room</b> to reset the transformation in the room viewer</p><br/>
<p>Project page: <a rel="external" href="https://github.com/spite/WebVR-Extension" >GitHub</a> | <a rel="external" href="https://github.com/spite/WebVR-Extension/blob/master/CHANGELOG.md" >Changelog</a>
</div>
<p class="warning"><b>Warning:</b> this extension completely polyfills the WebVR API. If you have a working WebVR implementation, it will be replaced! This is a work in progress in a very early stage, can't be turned off except by disabling or removing the extension</p>
</div>
</div>
<div class="block section">
<div class="subsection">
<p><span style="display:none">Headset
<select>
<option>Vive</option>
</select></span>
<span><input type="checkbox" id="persist-pose-option"/> <label for="persist-pose-option">Persist pose between reloads</label></span>
<span><input type="checkbox" id="individual-pose-option"/> <label for="individual-pose-option">Keep individual pose per tab</label></<span>
<p>
</div>
<div class="subsection">
<p>
<button id="reset-pose-btn"><object type="image/svg+xml" data="assets/reset1.svg"></object>Reset Pose</button>
<button id="save-pose-btn"><object type="image/svg+xml" data="assets/save.svg"></object>Save Pose</button>
<div id="saved-poses-base">
<button id="select-pose-btn"><object type="image/svg+xml" data="assets/eye.svg"></object>Select saved Pose</button>
<div id="saved-poses" class="collapsed"></div>
</div>
<button id="reset-room-btn" ><object type="image/svg+xml" data="assets/reset2.svg"></object>Reset room</button>
<button id="standing-transform-btn" ><object type="image/svg+xml" data="assets/sitting.svg"></object>Sitting to standing transform</button>
<button id="activate-hmd-btn" ><object type="image/svg+xml" data="assets/activate.svg"></object>Activate HMD</button>
</p>
</div>
</div>
<div id="canvas-container" class="section"></div>
<div id="bottom-panel" >
<div id="pose-info" class="block subsection">
<p><span class="var-name" >Position</span> <span id="position-x" >0</span> <span id="position-y" >0</span> <span id="position-z" >0</span><br/><span class="var-name" >Orientation</span> <span id="orientation-x" >0</span> <span id="orientation-y" >0</span> <span id="orientation-z" >0</span> <span id="orientation-w" >0</span></p>
</div>
<div id="action-buttons" class="subsection" >
<span>Transformation</span><button id="translate-button" class="active"><object type="image/svg+xml" data="assets/translate.svg"></object>Translate</button>
<button id="rotate-button"><object type="image/svg+xml" data="assets/rotate.svg"></object>Rotate</button>
<span>in</span><button id="local-button" class="active"><object type="image/svg+xml" data="assets/local.svg"></object>Local</button>
<button id="world-button"><object type="image/svg+xml" data="assets/world.svg"></object>World</button>
<span>space</span>
</div>
</div>
</div>
</body>
<script src="utils.js"></script>
<script src="panel.js"></script>
</html>