forked from google/model-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (186 loc) · 10.3 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
<!--
/*
* 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 -->
<!-- Include prismatic.js for Magic Leap support: -->
<!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
<!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
<!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
<!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Intersection Observer polyfill is required for Safari and IE11 -->
<script src="node_modules/intersection-observer/intersection-observer.js"></script>
<!-- Resize Observer polyfill is optional, and improves resize behavior in non-Chrome browsers: -->
<script src="node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>
<!-- Fullscreen polyfill is required for using experimental AR features in Canary: -->
<script src="node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>
</head>
<body>
<div id="header">
<a></a>
<a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer"></a>
</div>
<div class="sample">
<div id="demo-container" class="demo">
<example-snippet stamp-to="demo-container" highlight-as="html">
<template>
<model-viewer
src="examples/assets/Astronaut.glb"
alt="A 3D model of an astronaut"
controls
auto-rotate
background-color="#455A64"></model-viewer>
</template>
<script>
console.log('This is how you log things to the console!');
</script>
</example-snippet>
</div>
<div class="content">
<div class="wrapper">
<div class="center heading underline">
<h1 style="white-space:nowrap;"><span><</span>model-viewer<span>></span></h1>
<h3>Easily display interactive 3D models on the web & in AR</h3>
</div>
<h3 class="grouping-title">EXAMPLES</h3>
<ul id="list-example">
<li>
<a href="examples/default.html"><h4>Default</h4></a>
<p>The most basic configuration of model-viewer.</p>
</li>
<li>
<a href="examples/background-color.html"><h4>Background Color</h4></a>
<p>Using the background-color attribute to style the background color.</p>
</li>
<li>
<a href="examples/background-image.html"><h4>Background Image</h4></a>
<p>Using the background-image attribute to specify an equirectangular projection image.</p>
</li>
<li>
<a href="examples/augmented-reality.html"><h4>Augmented Reality</h4></a>
<p>Tests using configurations that enable viewing the model in augmented reality.</p>
</li>
<li>
<a href="examples/loading.html"><h4>Lazy Loading</h4></a>
<p>Examples using the different configurations of displaying an image while loading, and lazy loading models.</p>
</li>
<li>
<a href="examples/sources.html"><h4>Model Formats</h4></a>
<p>Tests different configurations of loading model formats.</p>
</li>
<li>
<a href="examples/multiple-elements.html"><h4>Multiple Elements</h4></a>
<p>Stress test of rendering 16 elements that require rendering on every frame, all in the view at the same time.</p>
</li>
<li>
<a href="examples/list.html"><h4>Rendering Test</h4></a>
<p>Test of many elements on a page, and lazily rendering only when in view.</p>
</li>
<li>
<a href="examples/pbr.html"><h4>Physically Based Rendering </h4></a>
<p>Showcase of high-resolution models with multiple textures and environment maps.</p>
</li>
</ul>
<h3 class="grouping-title">ATTRIBUTES</h3>
<ul class="list-attribute">
<li>
<h4>src<a href="#required-for-display">*</a></h4>
<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>
<h4>alt</h4>
<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>
<h4>auto-rotate</h4>
<p>Enables the auto rotation of the model.</p>
</li>
<li>
<h4>background-color</h4>
<p>Sets the background color of the scene when viewed inline. Takes any valid CSS color string.</p>
</li>
<li>
<h4>background-image</h4>
<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>
<h4>controls</h4>
<P>Enables controls via mouse/touch when in flat view.</P>
</li>
<li>
<h4>controls</h4>
<P>Enables controls via mouse/touch when in flat view.</P>
</li>
<li>
<h4>ios-src</h4>
<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>
<h4>magic-leap</h4>
<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>
<h4>poster</h4>
<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>
<h4>preload</h4>
<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>
<h4>reveal-when-loaded</h4>
<P>When poster and preload are specified, hide the poster and show the model once the model has been loaded. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</P>
</li>
<li>
<h4>unstable-webxr</h4>
<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>
<h3 class="grouping-title" style="margin-top: 40px;">EVENTS</h3>
<ul class="list-attribute">
<li>
<h4>load</h4>
<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>
<h4>preload</h4>
<p>When preload is enabled this event is fired when preloading is done.</p>
</li>
</div>
</div>
</div>
<div class="footer">
<div class="attribution">
Astronaut 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>.
</div>
<div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
</div>
<script src="examples/built/dependencies.js"></script>
<script src="dist/model-viewer.js"></script>
</body>
</html>