avgp / gltf-viewer Goto Github PK

View Code? Open in Web Editor NEW

57.0 5.0 14.0 7.56 MB

Web Component to display glTF models

License: MIT License

HTML 7.65% JavaScript 92.35%

gltf-viewer's Introduction

<gltf-viewer>

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.

gltf-viewer's People

Contributors

Stargazers

Watchers

Forkers

citrix123 czq7966 theirishduck picaosgeo vziatkov darocha stephensmitchell-forks jiangyugun chirag19 lexihdev aodsishawn otheon selftaughtcoder78704 dataspeaks2020

gltf-viewer's Issues

Can not view demo

I've found these errors in console;

Uncaught TypeError: skins.forEach is not a function
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadNodes (GLTF2Loader.js:2560)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadScenes (GLTF2Loader.js:2813)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.parse (GLTF2Loader.js:1647)
at GLTF2Loader.parse (GLTF2Loader.js:108)
at GLTF2Loader.js:33
at XMLHttpRequest. (three.min.js:630)
GLTF2Loader.js:2560 Uncaught TypeError: skins.forEach is not a function
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadNodes (GLTF2Loader.js:2560)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadScenes (GLTF2Loader.js:2813)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.parse (GLTF2Loader.js:1647)
at GLTF2Loader.parse (GLTF2Loader.js:108)
at GLTF2Loader.js:33
at XMLHttpRequest. (three.min.js:630)
GLTF2Loader.js:2560 Uncaught TypeError: skins.forEach is not a function
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadNodes (GLTF2Loader.js:2560)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadScenes (GLTF2Loader.js:2813)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.parse (GLTF2Loader.js:1647)
at GLTF2Loader.parse (GLTF2Loader.js:108)
at GLTF2Loader.js:33
at XMLHttpRequest. (three.min.js:630)
GLTF2Loader.js:2560 Uncaught TypeError: skins.forEach is not a function
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadNodes (GLTF2Loader.js:2560)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.loadScenes (GLTF2Loader.js:2813)
at GLTFParser.THREE.GLTF2Loader.GLTFParser._withDependencies (GLTF2Loader.js:1622)
at GLTFParser.THREE.GLTF2Loader.GLTFParser.parse (GLTF2Loader.js:1647)
at GLTF2Loader.parse (GLTF2Loader.js:108)
at GLTF2Loader.js:33
at XMLHttpRequest. (three.min.js:630)

skinEntry.jointNames is undefined

Hi, thanks for this awesome project.

I'm having trouble loading a model with skinned mesh and joint. The loader fails at GLTF2Loader.js:2166

for ( var i = 0, l = skinEntry.jointNames.length; i < l; i ++ ) {

where skinEntry.jointNames is undefined.

I'm not sure if it's an issue of the loader or it is the fault of the exporter ( the model is import from maya to blender and exported using https://github.com/KhronosGroup/glTF-Blender-Exporter )

FYI, I use the demo script to display the model

<!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="/patrick.gltf"></gltf-viewer>
</body>
</html>

Here is a link to the model : https://github.com/shrekshao/minimal-gltf-loader/tree/patrick-model/glTFs/patrick