Update gltf-model to glTF 2.0. (#2986)

* Update code and docs for glTF2.

* Update test assets, fix tests.

Author: donmccurdy

docs/components/gltf-model.md

@@ -22,6 +22,11 @@ Note that glTF is a fairly new specification and adoption is still growing.
 Work on the [three.js glTF loader][threejsgltf] and converters are still
 active.
 
+> **NOTE:** A-Frame supports glTF 2.0. For models using older versions of the
+> glTF format, use `gltf-model-legacy` from [donmccurdy/aframe-extras][extras].
+
+[extras]: https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders
+
 <!--toc-->
 
 ## Why use glTF?
@@ -91,17 +96,18 @@ rendering.
 
 ## More Resources
 
-The glTF format is fairly new, and few editors will export a `.gltf` file
-directly. Instead, various converters are available or in progress:
-
-[fbx-converter]: http://gltf.autodesk.io/
-[collada-converter]: http://cesiumjs.org/convertmodel.html
+[sketchfab]: https://sketchfab.com/models?features=downloadable&sort_by=-likeCount
+[blender-exporter]: https://github.com/KhronosGroup/glTF-Blender-Exporter/
 [obj-converter]: https://github.com/AnalyticalGraphicsInc/obj2gltf
+[collada-converter]: http://cesiumjs.org/convertmodel.html
 
-- [glTF Workflow for A Saturday Night](https://blog.mozvr.com/a-saturday-night-gltf-workflow/)
-- [FBX &rarr; glTF][fbx-converter] - Coming soon.
-- [COLLADA &rarr; glTF][collada-converter]
+Over 100,000 glTF models are free for download on [Sketchfab][sketchfab], and
+various exporters and converters converters are available:
+
+- [Blender Exporter](blender-exporter)
 - [OBJ &rarr; glTF][obj-converter]
+- [COLLADA &rarr; glTF][collada-converter]
+- [glTF Workflow for A Saturday Night](https://blog.mozvr.com/a-saturday-night-gltf-workflow/)
 
 [spec]: https://github.com/KhronosGroup/glTF
 

src/components/gltf-model.js

@@ -9,7 +9,7 @@ module.exports.Component = registerComponent('gltf-model', {
 
   init: function () {
     this.model = null;
-    this.loader = new THREE.GLTFLoader();
+    this.loader = new THREE.GLTF2Loader();
   },
 
   update: function () {
@@ -24,7 +24,6 @@ module.exports.Component = registerComponent('gltf-model', {
     this.loader.load(src, function gltfLoaded (gltfModel) {
       self.model = gltfModel.scene || gltfModel.scenes[0];
       self.model.animations = gltfModel.animations;
-      self.system.registerModel(self.model);
       el.setObject3D('mesh', self.model);
       el.emit('model-loaded', {format: 'gltf', model: self.model});
     });
@@ -33,6 +32,5 @@ module.exports.Component = registerComponent('gltf-model', {
   remove: function () {
     if (!this.model) { return; }
     this.el.removeObject3D('mesh');
-    this.system.unregisterModel(this.model);
   }
 });

src/lib/three.js

@@ -19,15 +19,15 @@ if (THREE.Cache) {
 }
 
 // TODO: Eventually include these only if they are needed by a component.
-require('three/examples/js/loaders/GLTFLoader');  // THREE.GLTFLoader
+require('three/examples/js/loaders/GLTF2Loader');  // THREE.GLTF2Loader
 require('three/examples/js/loaders/OBJLoader');  // THREE.OBJLoader
 require('three/examples/js/loaders/MTLLoader');  // THREE.MTLLoader
 require('three/examples/js/loaders/ColladaLoader');  // THREE.ColladaLoader
 require('../../vendor/VRControls');  // THREE.VRControls
 require('../../vendor/VREffect');  // THREE.VREffect
 
 THREE.ColladaLoader.prototype.crossOrigin = 'anonymous';
-THREE.GLTFLoader.prototype.crossOrigin = 'anonymous';
+THREE.GLTF2Loader.prototype.crossOrigin = 'anonymous';
 THREE.MTLLoader.prototype.crossOrigin = 'anonymous';
 THREE.OBJLoader.prototype.crossOrigin = 'anonymous';
 

src/systems/gltf-model.js

@@ -1,6 +1,5 @@
 require('./camera');
 require('./geometry');
-require('./gltf-model');
 require('./light');
 require('./material');
 require('./shadow');