Fix handling image/file cache for three r178 and above (#5776)

* Fix handling image/file cache now that the ImageLoader/FileLoader are using a prefix since three r178 (fix #5771)

* Don't set cache for video, it's not used

Author: vincentfretin

src/core/a-assets.js

@@ -41,7 +41,7 @@ class AAssets extends ANode {
       loaded.push(new Promise(function (resolve, reject) {
         // Set in cache because we won't be needing to call three.js loader if we have.
         // a loaded media element.
-        THREE.Cache.add(imgEls[i].getAttribute('src'), imgEl);
+        THREE.Cache.add('image:' + imgEls[i].getAttribute('src'), imgEl);
         if (imgEl.complete) {
           resolve();
           return;
@@ -166,13 +166,6 @@ function mediaElementLoaded (el) {
 
       // Compare seconds buffered to media duration.
       if (secondsBuffered >= el.duration) {
-        // Set in cache because we won't be needing to call three.js loader if we have.
-        // a loaded media element.
-        // Store video elements only. three.js loader is used for audio elements.
-        // See assetParse too.
-        if (el.tagName === 'VIDEO') {
-          THREE.Cache.add(el.getAttribute('src'), el);
-        }
         resolve();
       }
     }

tests/components/material.test.js

@@ -173,13 +173,16 @@ suite('material', function () {
       var textureLoaderSpy = this.sinon.spy(THREE.TextureLoader.prototype, 'load');
       img.setAttribute('src', IMG_SRC);
       img.setAttribute('id', 'foo');
-      THREE.Cache.files[IMG_SRC] = img;
+      THREE.Cache.clear();
       assetsEl.appendChild(img);
       el.sceneEl.appendChild(assetsEl);
+      // Adding the asset will add image:${IMG_SRC} in THREE.Cache.files
+      // without going through THREE.ImageLoader
       el.addEventListener('materialtextureloaded', function () {
         assert.notOk(imageLoaderSpy.called);
         assert.notOk(textureLoaderSpy.called);
-        delete THREE.Cache.files[IMG_SRC];
+        assert.ok(`image:${IMG_SRC}` in THREE.Cache.files);
+        THREE.Cache.clear();
         THREE.ImageLoader.prototype.load.restore();
         THREE.TextureLoader.prototype.load.restore();
         done();
@@ -191,10 +194,11 @@ suite('material', function () {
       var imageLoaderSpy = this.sinon.spy(THREE.ImageLoader.prototype, 'load');
       el.addEventListener('materialtextureloaded', function () {
         assert.ok(imageLoaderSpy.called);
-        assert.ok(IMG_SRC in THREE.Cache.files);
+        assert.ok(`image:${IMG_SRC}` in THREE.Cache.files);
         THREE.ImageLoader.prototype.load.restore();
         done();
       });
+      // The image is loaded via the material system using THREE.ImageLoader
       el.setAttribute('material', 'src', IMG_SRC);
     });
 

tests/core/a-assets.test.js

@@ -81,7 +81,7 @@ suite('a-assets', function () {
     assetsEl.appendChild(img);
 
     img.addEventListener('load', function () {
-      assert.equal(THREE.Cache.files[IMG_SRC], img);
+      assert.equal(THREE.Cache.files[`image:${IMG_SRC}`], img);
       done();
     });
 
@@ -248,7 +248,7 @@ suite('a-asset-item', function () {
   });
 
   test('emits progress event', function (done) {
-    THREE.Cache.remove(XHR_SRC);
+    THREE.Cache.remove(`file:${XHR_SRC}`);
     var assetItem = document.createElement('a-asset-item');
     assetItem.setAttribute('src', XHR_SRC);
     assetItem.addEventListener('progress', function (evt) {
@@ -284,7 +284,7 @@ suite('a-asset-item', function () {
     assetItem2.setAttribute('src', XHR_SRC);
 
     // Remove cache data to not load from it.
-    THREE.Cache.remove(XHR_SRC);
+    THREE.Cache.remove(`file:${XHR_SRC}`);
 
     assetItem1.addEventListener('error', function (evt) {
       assert.ok(evt.detail.xhr !== undefined);
@@ -306,7 +306,7 @@ suite('a-asset-item', function () {
   test('loads as text without responseType attribute', function (done) {
     var assetItem = document.createElement('a-asset-item');
     // Remove cache data to not load from it.
-    THREE.Cache.remove(XHR_SRC);
+    THREE.Cache.remove(`file:${XHR_SRC}`);
     assetItem.setAttribute('src', XHR_SRC);
     assetItem.addEventListener('loaded', function (evt) {
       assert.ok(assetItem.data !== null);
@@ -319,7 +319,7 @@ suite('a-asset-item', function () {
 
   test('loads as arraybuffer', function (done) {
     var assetItem = document.createElement('a-asset-item');
-    THREE.Cache.remove(XHR_SRC);
+    THREE.Cache.remove(`file:${XHR_SRC}`);
     assetItem.setAttribute('src', XHR_SRC);
     assetItem.setAttribute('response-type', 'arraybuffer');
     assetItem.addEventListener('loaded', function (evt) {
@@ -344,7 +344,7 @@ suite('a-asset-item', function () {
   });
 
   test('reloads as text', function (done) {
-    THREE.Cache.remove(XHR_SRC);
+    THREE.Cache.remove(`file:${XHR_SRC}`);
     var assetItem = document.createElement('a-asset-item');
     assetItem.setAttribute('src', XHR_SRC);
     assetItem.addEventListener('loaded', function (evt) {