Displays a 3D representation of a glTF model, interactive or static.
Tested with BrowserStack
<gltf-viewer src="demo/duck.gltf" interactive></gltf-viewer>Here is a simple sample to get you started:
Important note: The example is great to try it out, but you should install the component if you build an application with <gltf-viewer> so you don't rely on external sources too much!
<!doctype html>
<html>
<head>
<!-- polyfill for older browsers -->
<script src="https://cdnjs.com/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://avgp.github.io/gltf-viewer/gltf-viewer.html">
</head>
<body>
<gltf-viewer interactive src="/model.gltf"></gltf-viewer>
</body>
</html>The component can be installed via Bower:
bower install gltf-viewerThe component supports:
- Safari (OSX & iOS)
- Opera
- Firefox
- Edge
- Chrome & Android browser from 4.x upwards
The component supports both glTF 1.0 and glTF 2.0 models.
If you think the component is missing something or you found a bug, please submit an issue and/or a pull request!
The easiest way to get going is to install the polymer-cli:
npm install -g polymer-cliThen you can clone this repository to your local computer:
git clone https://github.com/avgp/gltf-viewer.git
cd gltf-viewerYou are now inside your cloned repository.
If you have polymer-cli installed, go into your clone of this repository and run polymer serve in a terminal.
You can access the demos via the URL that will be displayed and use the component locally.
$ polymer test
The component uses web-component-tester. Run polymer test to run your application's test suite locally.