/
ModelWithDetails.html
180 lines (152 loc) · 8.06 KB
/
ModelWithDetails.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<style>
model-viewer {
height: 85vh;
width: auto;
}
</style>
</head>
<body>
<model-viewer id="hotspot-camera-view-demo" src="./assets/models/Tester_Case.glb" alt="Thor and the Midgard Serpent" camera-controls enable-pan touch-action="none" camera-orbit="-29.34deg 70.11deg auto" camera-target="11m 1m 1m" field-of-view="45deg" min-field-of-view="45deg" max-field-of-view="45deg" interpolation-decay="200" min-camera-orbit="auto auto 5%" poster="../../assets/SketchfabModels/ThorAndTheMidgardSerpent.webp" ar ar-modes="webxr scene-viewer quick-look">
<button class="view-button" slot="hotspot-0" data-position="47.04618439526224m -1.8857709105760723m 37.728224163256044m" data-normal="0m -1.343588610839583e-7m 0.9999999999999911m" data-orbit="47.04618439526224m -1.8857709105760723m 37.728224163256044m" data-target="47.04618439526224m -1.8857709105760723m 37.728224163256044m">
Power Off/On
</button>
<button class="view-button" slot="hotspot-1" data-position="47.20357504250583m 11.473245281054096m 37.72822595815825m" data-normal="0m -1.343588610839583e-7m 0.9999999999999911m" data-orbit="47.20357504250583m 11.473245281054096m 37.72822595815825m" data-target="47.20357504250583m 11.473245281054096m 37.72822595815825m">
Indicator LEDs
</button>
<button class="view-button" slot="hotspot-2" data-position="-11.110694770329076m 43.17052222740729m -35.16295250400033m" data-normal="0m 0.11043256192136577m 0.9938836195790147m" data-orbit="-11.110694770329076m 43.17052222740729m -35.16295250400033m" data-target="-11.110694770329076m 43.17052222740729m -35.16295250400033m">
Handle
</button>
<button class="view-button" slot="hotspot-3" data-position="-6.684133001108236m 6.2731935990137835m -78.48449354104433m" data-normal="0m 1.343588610839583e-7m -0.9999999999999911m" data-orbit="-6.684133001108236m 6.2731935990137835m -78.48449354104433m" data-target="-6.684133001108236m 6.2731935990137835m -78.48449354104433m">
Ports
</button>
<div id="controls" class="dim">
<label for="src">Product:</label>
<select id="src">
<option value="./assets/models/Tester_Case.glb">Tester Case</option>
</select><br>
<form action="index.html">
<input type="submit" value="Home" />
</form>
<form action="ModelWithDetails.html">
<input type="submit" value="Model With Details" />
</form>
<form action="ModelWithSize.html">
<input type="submit" value="Model With Size" />
</form>
</div>
<!--
<button class="view-button" slot="hotspot-2" data-position="0.0608m 0.0566m 0.0605m" data-normal="0.2040984m 0.7985359m -0.56629m" data-orbit="42.72974deg 84.74043deg 0.07104211m" data-target="0.0757959m 0.04128428m 0.07109568m">
Wet 4.5 V, Accuracy 1 mV - Wet 30 V, Accuracy 3 mV - Wet 188 V, Accuracy 10 mV - Wet 188 V, Disable Error
</button>
<button class="view-button" slot="hotspot-3" data-position="0.1989m 0.16711m -0.0749m" data-normal="0.7045857m 0.1997957m -0.6809117m" data-orbit="-40.11996deg 88.17818deg 0.07090651m" data-target="0.2011831m 0.1398312m -0.07917573m">
500 mA AC - 700 mA DC - Accuracy 50 ... - 200 mV Accuracy 50 ...
</button>
<button class="view-button" slot="hotspot-4" data-position="0.0677m 0.18906m -0.0158m" data-normal="-0.008245394m 0.6207898m 0.7839338m" data-orbit="-118.8446deg 98.83521deg 0.06m" data-target="0.06528695m 0.1753406m -0.01964653m">
10 A - 250 V AC - 30 V DC
</button>
<button class="view-button" slot="hotspot-5" data-position="-0.1418m -0.041m 0.174m" data-normal="-0.4924125m 0.4698265m 0.7326617m" data-orbit="-2.305313deg 110.1798deg 0.04504082m" data-target="-0.1151219m -0.04192762m 0.1523764m">
Neutrik Port
</button>
<button class="view-button" slot="hotspot-6" data-position="0.08414419m 0.134m -0.215m" data-normal="0.03777227m 0.06876653m -0.9969176m" data-orbit="-37.54149deg 82.16209deg 0.0468692m" data-target="0.08566038m 0.1249514m -0.1939646m">
0 - 212 VDC - 400 mA - 60 VA
</button>
<button class="view-button" slot="hotspot-7" data-position="0.14598m 0.03177m -0.05945886m" data-normal="-0.9392524m 0.2397608m -0.2456009m" data-orbit="-142.3926deg 86.45934deg 0.06213665m" data-target="0.1519967m 0.01904771m -0.05945886m">
6 X 32 A, 100 VA - 5 A, 12V - 32 A, 3V
</button>
<button class="view-button" slot="hotspot-8" data-position="0.0094m 0.0894m -0.15103m" data-normal="-0.3878782m 0.4957891m -0.7770094m" data-orbit="-118.6729deg 117.571deg 0.03905975m" data-target="0.007600758m 0.06771782m -0.1386167m">
The Jump
</button>
<button class="view-button" slot="hotspot-9" data-position="-0.0658m 0.1786m -0.0183m" data-normal="0.7857152m 0.4059967m 0.46671m" data-orbit="53.28236deg 95.91318deg 0.1102844m" data-target="-0.07579391m 0.1393538m -0.00851791m">
The Beast
</button>
<button class="view-button" slot="hotspot-10" data-position="0.02610224m 0.01458751m -0.004978945m" data-normal="-0.602551m 0.7856147m -0.1405055m" data-orbit="-78.89725deg 77.17752deg 0.08451112m" data-target="0.02610223m 0.0145875m -0.004978945m">
Treasure
</button>
<button class="view-button" slot="hotspot-11" data-position="-0.1053838m 0.01610652m 0.1076345m" data-normal="-0.624763m 0.5176854m 0.5845283m" data-orbit="10.89188deg 119.9775deg 0.03543022m" data-target="-0.1053838m 0.01610652m 0.1076345m">
Desperation
</button> -->
</model-viewer>
<script type="module">
const modelViewer1 = document.querySelector("#hotspot-camera-view-demo");
const annotationClicked = (annotation) => {
let dataset = annotation.dataset;
modelViewer1.cameraTarget = dataset.target;
modelViewer1.cameraOrbit = dataset.orbit;
}
modelViewer1.querySelectorAll('button').forEach((hotspot) => {
console.log("hello hotspot", hotspot);
hotspot.addEventListener('click', () => annotationClicked(hotspot));
});
</script>
<style type="text/css">
#controls {
position: absolute;
bottom: 16px;
left: 16px;
max-width: unset;
transform: unset;
}
.dot{
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
background: #fff;
--min-hotspot-opacity: 0;
}
.dim{
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: Futura, Helvetica Neue, sans-serif;
font-size: 18px;
font-weight: 700;
max-width: 128px;
overflow-wrap: break-word;
padding: 0.5em 1em;
position: absolute;
width: max-content;
height: max-content;
transform: translate3d(-50%, -50%, 0);
--min-hotspot-opacity: 0;
}
.show{
--min-hotspot-opacity: 1;
}
.hide{
display: none;
}
/* This keeps child nodes hidden while the element loads */
:not(:defined) > * {
display: none;
}
.view-button {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: Futura, Helvetica Neue, sans-serif;
font-size: 12px;
font-weight: 700;
max-width: 128px;
overflow-wrap: break-word;
padding: 0.5em 1em;
position: absolute;
width: max-content;
height: max-content;
transform: translate3d(-50%, -50%, 0);
}
</style>
</body>
</html>