also apply newly set materials to obj-model recursively (aframevr#4062)

Author: ngokevin

src/components/obj-model.js

@@ -11,11 +11,19 @@ module.exports.Component = registerComponent('obj-model', {
   },
 
   init: function () {
+    var self = this;
+
     this.model = null;
     this.objLoader = new THREE.OBJLoader();
     this.mtlLoader = new THREE.MTLLoader(this.objLoader.manager);
     // Allow cross-origin images to be loaded.
     this.mtlLoader.crossOrigin = '';
+
+    this.el.addEventListener('componentinitialized', function (evt) {
+      if (!self.model) { return; }
+      if (evt.detail.name !== 'material') { return; }
+      self.applyMaterial();
+    });
   },
 
   update: function () {
@@ -70,19 +78,23 @@ module.exports.Component = registerComponent('obj-model', {
 
     // .OBJ only.
     objLoader.load(objUrl, function loadObjOnly (objModel) {
-      // Apply material.
-      var material = el.components.material;
-      if (material) {
-        objModel.traverse(function (child) {
-          if (child instanceof THREE.Mesh) {
-            child.material = material.material;
-          }
-        });
-      }
-
       self.model = objModel;
+      self.applyMaterial();
       el.setObject3D('mesh', objModel);
       el.emit('model-loaded', {format: 'obj', model: objModel});
     });
+  },
+
+  /**
+   * Apply material from material component recursively.
+   */
+  applyMaterial: function () {
+    var material = this.el.components.material;
+    if (!material) { return; }
+    this.model.traverse(function (child) {
+      if (child instanceof THREE.Mesh) {
+        child.material = material.material;
+      }
+    });
   }
 });

tests/components/obj-model.test.js

@@ -86,4 +86,18 @@ suite('obj-model', function () {
     });
     el.setAttribute('obj-model', 'obj', '#obj');
   });
+
+  test('can load .OBJ with reset material', function (done) {
+    var el = this.el;
+    el.setAttribute('material', 'color', 'red');
+    el.addEventListener('object3dset', () => {
+      el.removeAttribute('material');
+      el.setAttribute('material', 'color', 'blue');
+      setTimeout(() => {
+        assert.equal(el.getObject3D('mesh').children[0].material.color.b, 1);
+        done();
+      });
+    });
+    el.setAttribute('obj-model', 'obj', '#obj');
+  });
 });