Directory

model-viewer - Vaadin Add-on Directory

Easily display interactive 3D models on the web and in AR! model-viewer - Vaadin Add-on Directory
> ## � 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. # `` [![Build Status](https://api.travis-ci.org/GoogleWebComponents/model-viewer.svg?branch=master)](https://travis-ci.org/GoogleWebComponents/model-viewer) [![NPM](https://img.shields.io/npm/v/@google/model-viewer.svg)](https://www.npmjs.com/package/@google/model-viewer) [![Bundlephobia](https://badgen.net/bundlephobia/minzip/@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) ![sample-render](examples/sample-render.png) ## 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 `