Web Component to display glTF models
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bower_components Updating bower deps Apr 27, 2017
demo Update demo Sep 3, 2017
js Fixes GLTF2Loader by updating to latest Sep 3, 2017
test
.gitignore
.travis.yml
LICENSE
README.md
bower.json Updating bower deps Apr 27, 2017
default-browserstack-browsers.json
gltf-viewer.html
index.html
polymer.json Initial commit Apr 21, 2017
wct.conf.js Allows tests local and remote Apr 27, 2017

README.md

<gltf-viewer>

BrowserStack Status

Displays a 3D representation of a glTF model, interactive or static.

Tested with BrowserStack

Live demo

  <gltf-viewer src="demo/duck.gltf" interactive></gltf-viewer>

See the component in action.

Usage

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>

Installation

The component can be installed via Bower:

bower install gltf-viewer

Browser support & glTF support

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.

Contributing

If you think the component is missing something or you found a bug, please submit an issue and/or a pull request!

Setup for contributing

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.

Serving the local component

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.

Running Tests

$ polymer test

The component uses web-component-tester. Run polymer test to run your application's test suite locally.