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-viewer
The 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-cli
Then you can clone this repository to your local computer:
git clone https://github.com/avgp/gltf-viewer.git
cd gltf-viewer
You 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.