forked from google/model-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
656 lines (609 loc) · 30.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
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
<!--
/*
* 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. Defaults to false.</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. Supports png, jpg and
hdr (recommended) images. 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>exposure</div>
<p>Controls the exposure of both the model and skybox, for use
primarily with HDR environments. Defaults to 1.</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-policy</div>
<p>Allows you to change whether the viewer requires focus before interacting with it.
If set to "allow-when-focused", the user must focus on the viewer (click / tap)
before being able to control it. If set to "always-allow", the user can
control it even if the viewer is not the focused element on the page.
Defaults to "always-allow".</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>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>--ar-button-display</div>
<p>Sets the display property of the AR button. Intended to be used
to force the button to be hidden. Defaults to block.</p>
</li>
<li>
<div>--interaction-prompt-display</div>
<p>Sets the display property of the interaction prompt. Intended
to be used to force the prompt to be hidden. Defaults to flex.</p>
</li>
<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>
<li>
<div>ModelViewer.modelCacheSize</div>
<p>This static, writable property sets <model-viewer>'s internal
glTF model cache size, controlling number of individual models that should
be cached. Note that any number of models may be cached at a given time.
This number just sets the maximum number of models that can be cached even
if they are not being used by a <model-viewer> element in the document.
Note also that the cache size is measured in number of glTF models, not bytes!
This is important to keep in mind, since any two models may have wildly
different byte sizes.</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>model-visibility</div>
<p>This event is fired when the visibility of the model changes. When the
model is loaded, able to be rendered and fully visible (e.g., the poster is no longer
visible), this event will fire and <span class="attribute">event.detail.visible</span>
will be "true". Note that this event will fire regardless of whether the model is
present in the viewport. This means that the model may not be rendered yet (as we
do not render models that are outside of the viewport) even though the event says
that the model is visible.</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>