model-viewer - Vaadin Add-on Directory
Easily display interactive 3D models on the web and in AR!
> ## � Status: Experimental
> `
` is currently in the Experimentation phase. Someone on the team thinks it’s an idea worth exploring, but it may not go any further than this. Use at your own risk.
# ``
[](https://travis-ci.org/GoogleWebComponents/model-viewer)
[](https://www.npmjs.com/package/@google/model-viewer)
[](https://bundlephobia.com/result?p=@google/model-viewer)
`` is a web component that makes rendering interactive 3D
models - optionally in AR - easy to do, on as many browsers and devices as possible.
`` strives to give you great defaults for rendering quality and
performance.
As new standards and APIs become available `` will be improved
to take advantage of them. If possible, fallbacks and polyfills will be
supported to provide a seamless development experience.
[Demo](https://model-viewer.glitch.me) • [Documentation](https://googlewebcomponents.github.io/model-viewer/index.html) • [Kanban](https://github.com/GoogleWebComponents/model-viewer/projects/1) • [Quality Tests](https://googlewebcomponents.github.io/model-viewer/test/fidelity/results-viewer.html)
## Installing
You can load a _bundled build_ via
unpkg.com by including the snippet below. This will automatically load the correct version for the user's browser.
```html
```
Alternatively, you can install the _npm package_:
```
npm install ---save @google/model-viewer
```
### Important note on bundling
Bundled builds are useful for demos or for kicking the tires. However,
the _bundled build_ includes some third party dependencies. Some of these
dependencies (like [three](https://threejs.org/)) are quite large. For
production use cases we recommend that you use the _npm package_ and your
own bundler (such as [Rollup](http://rollupjs.org) or
[Webpack](https://webpack.js.org/)) to eliminate potential duplicate
dependencies.
## Usage
If you are using a _bundled build_, first add a script tag to your page to load
`` as described in the [Installing](#installing) section.
Alternatively, if you are using the _npm package_ and a bundler (see
"Important note on bundling" above), you can import the module:
```javascript
import '@google/model-viewer';
```
After the library has been loaded, a new custom element will be defined. You can
use it anywhere you would write HTML. For example, using the _bundled build_ in
an HTML document might look like this:
```html
3D Test
```
Alternatively, using the _npm package_ in a JavaScript module might look like
this:
```javascript
import '@google/model-viewer';
const model = document.createElement('model-viewer');
model.src = 'path/to/model.gltf';
document.body.appendChild(model);
```
You can think of `` sort of like an `![]()
` or `
View on NPM
model-viewer version 0.0.1
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.94.0
model-viewer version 0.0.2
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.94.0
model-viewer version 0.0.3
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.94.0
model-viewer version 0.0.4
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.94.0
model-viewer version 0.0.5
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.98.0
model-viewer version 0.0.6
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.98.0
model-viewer version 0.0.7
### Dependencies
* @polymer/lit-element#^0.6.2
* three#^0.99.0
model-viewer version 0.1.0
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0
model-viewer version 0.1.1
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0
model-viewer version 0.1.2
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0
model-viewer version 0.2.0
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0
model-viewer version 0.3.0
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0
model-viewer version 0.3.1
### Dependencies
* lit-element#^2.0.0
* three#^0.101.0