-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·577 lines (530 loc) · 28.2 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
<!--
/*
* Copyright 2018 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" href="examples/styles/examples.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="examples/assets/favicon.png"/>
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="node_modules/intersection-observer/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->
<script src="node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>
<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="node_modules/focus-visible/dist/focus-visible.js" defer></script>
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
</head>
<body>
<a id="button-github" class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer"></a>
<div class="sample">
<div id="demo-container" class="demo"></div>
<div class="content">
<div class="wrapper">
<div class="heading">
<div class="lockup zero-interaction"><div class="icon-button icon-modelviewer-black"></div><h1>model-viewer</h1></div>
<h3 style="font-weight:400;">Easily display interactive 3D models on the web & in AR</h3>
</div>
<example-snippet inert-script stamp-to="demo-container" highlight-as="html">
<template>
<!-- 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>
<!-- Use it like any other HTML element -->
<model-viewer src="examples/assets/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls background-color="#455A64"></model-viewer>
</template>
</example-snippet>
<div id="section-examples">
<h3 class="grouping-title border-bottom">Examples</h3>
<ul id="list-example">
<li><a href="examples/animation.html"><h4>Animation</h4></a></li>
<li><a href="examples/lazy-loading.html"><h4>Lazy Loading</h4></a></li>
<li><a href="examples/model-formats.html"><h4>Model Formats</h4></a></li>
<li><a href="examples/staging-and-camera-control.html"><h4>Staging & Camera Control</h4></a></li>
<li><a href="examples/lighting-and-environment.html"><h4>Lighting & Environment</h4></a></li>
<li><a href="examples/augmented-reality.html"><h4>Augmented Reality</h4></a></li>
</ul>
</div>
<div id="section-attributes">
<h3 class="grouping-title">Attributes</h3>
<ul class="list-attribute">
<li>
<div>src<a href="#required-for-display">*</a></div>
<p>The URL to the 3D model. This parameter is required for <span class="attribute"><model-viewer></span> to display. Only <a href="https://github.com/KhronosGroup/glTF/tree/master/specification/2.0">glTF</a>/<a href="https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#glb-file-format-specification">GLB</a> models are supported, see <a href="https://github.com/GoogleWebComponents/model-viewer#supported-formats">Supported Formats</a>.</p>
</li>
<li>
<div>alt</div>
<p>Configures the model with custom text that will be used to describe the model to viewers who use a screen reader or otherwise depend on additional semantic context to understand what they are viewing.</p>
</li>
<li>
<div>animation-name</div>
<p>Selects an animation to play by name. This animation will play
when the .play() method is invoked, or when the <model-viewer>
is configured to autoplay. If no animation-name is specified,
<model-viewer> always picks the first animation it finds in
the model.</p>
</li>
<li>
<div>animation-crossfade-duration</div>
<p>When the current animation is changed, <model-viewer>
automatically crossfades between the previous and next animations.
This attribute controls how long the crossfade is in milliseconds.
Defaults to 300.</p>
</li>
<li>
<div>ar</div>
<p>Enable the ability to launch
<a href="https://developers.google.com/ar/develop/java/scene-viewer">Scene Viewer</a>
on supported devices.</p>
</li>
<li>
<div>auto-rotate</div>
<p>Enables the auto rotation of the model.</p>
</li>
<li>
<div>autoplay</div>
<p>If this is true and a model has animations, an animation will
automatically begin to play when this attribute is set (or when the
property is set to true). If no animation-name is specified, plays
the first animation.</p>
</li>
<li>
<div>background-color</div>
<p>Sets the background color of the scene when viewed inline. Takes any valid CSS color string.</p>
</li>
<li>
<div>background-image</div>
<p>Sets the background image of the scene when viewed inline. Takes a URL to an <a href="https://en.wikipedia.org/wiki/Equirectangular_projection">equirectangular projection image</a> that's used for the skybox, as well as applied as an environment map on the model. Currently only supports traditional image formats (png, jpg), and does not yet support HDR (#65). Setting background-image supercedes background-color.</p>
</li>
<li>
<div>camera-controls</div>
<p>Enables controls via mouse/touch when in flat view.</p>
</li>
<li>
<div>camera-orbit</div>
<p>Set the starting and/or subsequent orbital position of the camera.
You can control the azimuthal and polar angles, and the distance
from the model. Accepts values of the form "$angle $angle $distance",
like "10deg 75deg 1.5m". Also supports units in radians ("rad") for
angles and centimeters ("cm") or millimeters ("mm") for camera
distance. A special value "auto" can be used for the distance, which
sets the distance to the ideal framing distance based on the
responsive scaling applied to the model scene. Any time this value
changes from its initially configured value, the camera will
interpolate from its current position to the new value. Defaults to
"0deg 75deg auto".</p>
</li><li>
<div>environment-image</div>
<p>Controls the environmental reflection of the model. Normally if
background-image is set, that image will also be used for the
environment-image. Use environment-image to only set the reflection
without affecting the background.</p>
</li>
<li>
<div>environment-intensity</div>
<p>Controls the intensity of environmental lighting. There is
almost always light reflected from the environment, even when
background-image or environment-image are not set. The one exception
is for models with unlit materials. Set this value to 0 to hide the
environment entirely. Defaults to 1.</p>
</li>
<li>
<div>experimental-pmrem</div>
<p>Enables an experimental lighting mode that is more physically
realistic, and emphasizes light from the environment over light from
the built-in scene lights. Refer to <a href="https://wiki.jmonkeyengine.org/jme3/advanced/pbr_part3.html" target="_blank">this article</a>
for in-depth details related to this lighting mode.</p>
</li>
<li>
<div>field-of-view</div>
<p>Used to configure the field of view of the camera. Accepts values
units in both degrees and radians (e.g., "30deg" or "0.5rad"). Accepts
any value between 20 and 45 degrees. Defaults to "45deg".</p>
</li>
<li>
<div>interaction-prompt</div>
<p>Allows you to change the conditions under which the visual and
audible interaction prompt will display. Allowed values are "auto"
and "when-focused". If set to "auto", the interaction prompt will
be displayed as soon as the interaction-prompt-threshold (see below)
time has elapsed (after the model is revealed). If set to "when-focused",
the interaction prompt will only be activated if the element has
first received focus. Defaults to "when-focused".</p>
</li>
<li>
<div>interaction-prompt-threshold</div>
<p>When camera-controls are enabled, <model-viewer> will
prompt the user visually (and audibly, for screen readers) to
interact if they focus it but don't interact with it for some time.
This attribute allows you to set how long <model-viewer>
should wait (in milliseconds) before prompting to interact. Defaults
to 3000.</p>
</li>
<li>
<div>ios-src</div>
<p>The url to a <a href="https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html">USDZ</a> model which will be used on <a href="https://www.apple.com/ios/augmented-reality/">supported iOS 12+ devices</a> via <a href="https://developer.apple.com/videos/play/wwdc2018/603/">AR Quick Look</a> on Safari. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</p>
</li>
<li>
<div>magic-leap</div>
<p>Enables the ability to view models in AR when viewing content on <a href="https://magicleaphelio.com/">Magic Leap's Helio</a> browser, requires that src is a GLB model, and requires the inclusion of the <a href="https://www.npmjs.com/package/@magicleap/prismatic">@magicleap/prismatic</a> library.</p>
</li>
<li>
<div>poster</div>
<p>Displays an image instead of the model. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</p>
</li>
<li>
<div>preload</div>
<p>When poster is also enabled, the model will be downloaded before user action. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</p>
</li>
<li>
<div>quick-look-browsers</div>
<p>Set this attribute to control which iOS browsers will be allowed
to launch AR Quick Look on iOS. Allowed values are "safari" and
"chrome". You can specify any number of browsers separated by
whitespace, for example: "safari chrome". Defaults to "safari".</p>
</li>
<li>
<div>reveal</div>
<p>This attribute controls whether or not the model should be
automatically revealed when loaded. It currently supports two
values: "auto" and "interaction". If reveal is set to "interaction",
<model-viewer> will wait until the user interacts with the
poster before loading and revealing the model. Otherwise, the model
will be revealed as soon as it is done loading and rendering.
Defaults to "auto".</p>
</li>
<li>
<div>shadow-intensity</div>
<p>Controls the opacity of the shadow. Set to 0 to turn off the
shadow entirely. Defaults to 0.</p>
</li>
<li>
<div>stage-light-intensity</div>
<p>Controls the intensity of the built-in scene lighting. Set to 0
to turn off the scene lighting entirely. Note that the weight of the
scene lighting is effected by whether or not PMREM is enabled.
Defaults to 1.</p>
</li>
<li>
<div>unstable-webxr</div>
<p>Enables the ability to view the model in AR via the experimental <a href="https://github.com/immersive-web/webxr">WebXR Device API</a>, currently <a href="https://developers.google.com/web/updates/2018/06/ar-for-the-web">implemented only in Chrome Canary</a>. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</p>
</li>
</ul>
<p style="color:rgba(0,0,0,.54);" id="required-for-display">* Parameters that are required for display.</p>
<p style="color:rgba(0,0,0,.54);">Note: All attributes have a corresponding property in camel-case format. For example, the background-color attribute can also be configured using the backgroundColor property.</p>
</div>
<div id="section-custom-css">
<h3 class="grouping-title">CSS Custom Properties</h3>
<ul class="list-attribute">
<li>
<div>--poster-color</div>
<p>Sets the background-color of the poster. Falls back to --background-color if set. Defaults to #fff.</p>
</li>
<li>
<div>--poster-image</div>
<p>Sets the background-image of the poster. This is currently overridden by the poster attribute if it is set. Defaults to none.</p>
</li>
<li>
<div>--progress-bar-color</div>
<p>Sets the background-color of the progress bar. Defaults to rgba(0, 0, 0, 0.4).</p>
</li>
<li>
<div>--progress-bar-height</div>
<p>Sets the height of the progress bar. Defaults to 5px.</p>
</li>
<li>
<div>--progress-mask</div>
<p>Sets the background of the progress mask. Defaults to #fff.</p>
</li>
</ul>
</div>
<div id="section-properties">
<h3 class="grouping-title">Properties</h3>
<ul class="list-attribute">
<li>
<div>currentTime</div>
<p>This property reports the current track time of the currently
selected animation. If no animations are available, the value is
always 0. This property can be set in order to seek along the
timeline of the currently playing animation. For example, if you
set it to 0, it will reset an animation to the beginning.</p>
</li>
<li>
<div>paused</div>
<p>This property is read-only. It returns true if animations are
paused. It returns false if animations are playing. Animations
always start paused, and remain so unless the autoplay attribute
is set or the .play() method is invoked.</p>
</li>
</ul>
</div>
<div id="section-methods">
<h3 class="grouping-title">Methods</h3>
<ul class="list-attribute">
<li>
<div>getCameraOrbit()</div>
<p>Returns the realtime orbital position of the camera. Azimuthal
(theta) and polar (phi) angles are representred as radians, and the
distance (radius) is represented in meters. This value may differ
from the value configured with the camera-orbit attribute on account
of user interaction or camera interpolation.</p>
</li>
<li>
<div>getFieldOfView()</div>
<p>Returns the realtime camera vertical field of view in degrees.
This value may differ from the value configured with the field-of-view
attribute on account of user interaction or camera interpolation.</p>
</li>
<li>
<div>jumpCameraToGoal()</div>
<p>Changes the camera to its last configured goal state immediately on
the next update instead of interpolating the motion over time.</p>
</li>
<li>
<div>play()</div>
<p>Causes animations to be played. Use the autoplay attribute if
you want animations to be played automatically. If there are no
animations, nothing will happen, so make sure that the model is
loaded before invoking this method.</p>
</li>
<li>
<div>pause()</div>
<p>Causes animations to be paused. If you want to reset the
current animation to the beginning, you should also set the
currentTime property to 0.</p>
</li>
<li>
<div>toDataURL(type, encoderOptions)</div>
<p>Returns a screenshot of the current model render in the format
specified by <i>type</i> (defaults to image/png). The screenshot is
encoded as a data URL string. In formats that support a sliding scale
of quality (such as image/jpeg and image/webp) you can also specify a
value for <i>encoderOptions</i> between 0 and 1 (<i>encoderOptions</i>
defaults to 0.92 otherwise).</p>
</li>
</ul>
</div>
<div id="section-events">
<h3 class="grouping-title">Events</h3>
<ul class="list-attribute">
<li>
<div>camera-change</div>
<p>Fired when the camera position and/or field of view have
changed. If the change occurred due to user interaction, the
"event.detail.source" property will be set to
"user-interaction".</p>
</li>
<li>
<div>environment-change</div>
<p>Fired when the environment has changed. If the environment is
derived from background-image or environment-image, the image will
have loaded by the time this event fires.</p>
</li>
<li>
<div>load</div>
<p>Fired when a model is loaded. Can fire multiple times per <span class="attribute"><model-viewer></span> if the src attribute is changed.</p>
</li>
<li>
<div>poster-visibility</div>
<p>This event is fired when the visiblity of the poster image
changes. The current visibility state can be read from the
<span class="attribute">event.detail.visible</span> property</p>
</li>
<li>
<div>play</div>
<p>Dispatched when animations begin to play.</p>
</li>
<li>
<div>pause</div>
<p>Dispatched when animations are paused. A model always begins in
the paused state, so it is worth mentioning that this event will not
be dispatched until the the pause() method is invoked after
animations have begun playing.</p>
</li>
<li>
<div>preload</div>
<p>When preload is enabled this event is fired when preloading is done.</p>
</li>
</ul>
</div>
<div id="section-browser-support">
<h3 class="grouping-title border-bottom">Browser Support</h3>
<div id="browser-support-icon-group">
<div class="icon-desc"><img class="size-24 icon-check"><div>Natively supported</div></div>
<div class="icon-desc"><img class="size-24 icon-warning"><div>Available with polyfill</div></div>
<div class="icon-desc"><img class="size-24 icon-flag"><div>Behind a flag, unstable</div></div>
<div class="icon-desc"><img class="size-24 icon-na"><div>Not available</div></div>
</div>
<div style="clear:both"></div>
<p class="browser-support-desc">These browser features are <b>required</b> for <span class="attribute"><model-viewer></span> to work correctly:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
<th><img class="logo-samsung" title="Samsung Internet"></th>
</tr>
<tr>
<td>Custom Elements</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
</tr>
<tr>
<td>Shadow DOM</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
</tr>
</table>
<p class="browser-support-desc">These browser features are <b>optional</b> and are only used if available for performance optimization or specific features:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
<th><img class="logo-samsung" title="Samsung Internet"></th>
</tr>
<tr>
<td>Resize Observer</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
</tr>
<tr>
<td>Intersection Observer</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
</tr>
<tr>
<td>Fullscreen API</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
<tr>
<td>:focus-visible</td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
</table>
<p class="browser-support-desc">These browser features are <b>optional</b> and are only needed if you wish to use the unstable-webxr feature:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
<th><img class="logo-samsung" title="Samsung Internet"></th>
</tr>
<tr>
<td>WebXR Device API</td>
<td><img class="icon-na"></td>
<td><img class="icon-flag"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
</tr>
<tr>
<td>WebXR HitTest API</td>
<td><img class="icon-na"></td>
<td><img class="icon-flag"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li class="attribution">
<a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
</li>
</ul>
<div style="margin-top:24px;" class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
<div><a href="https://github.com/GoogleWebComponents/model-viewer">Github</a> ∙ <a href="https://model-viewer.glitch.me/">Glitch</a> ∙ <a href="https://github.com/GoogleWebComponents/model-viewer/issues">Bug report</a></div>
</div>
<!-- Documentation-specific dependencies: -->
<script type="module"
src="examples/built/dependencies.js">
</script>
<script nomodule
src="examples/built/dependencies-legacy.js">
</script>
<!-- Loads <model-viewer> only on modern browsers: -->
<script type="module"
src="dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> only on old browsers like IE11: -->
<script nomodule
src="dist/model-viewer-legacy.js">
</script>
</body>
</html>