From 34a140f234be01a803291664367fb66b988ce7d2 Mon Sep 17 00:00:00 2001 From: Takahiro Date: Sat, 4 Mar 2017 18:31:39 -0800 Subject: [PATCH 1/4] Bump Three.js to r84 --- examples/primitives/models/index.html | 2 +- examples/test/model/index.html | 2 +- package.json | 2 +- tests/components/gltf-model.test.js | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/primitives/models/index.html b/examples/primitives/models/index.html index 0593e0aa154..fd7a66bfa88 100644 --- a/examples/primitives/models/index.html +++ b/examples/primitives/models/index.html @@ -13,7 +13,7 @@ - + diff --git a/examples/test/model/index.html b/examples/test/model/index.html index f48336a0621..7a8a921a280 100644 --- a/examples/test/model/index.html +++ b/examples/test/model/index.html @@ -11,7 +11,7 @@ - + diff --git a/package.json b/package.json index cc03adca4ed..3af7da8916c 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "present": "0.0.6", "promise-polyfill": "^3.1.0", "style-attr": "^1.0.2", - "three": "^0.83.0", + "three": "^0.84.0", "three-bmfont-text": "^2.1.0", "tween.js": "^15.0.0", "webvr-polyfill": "dmarcos/webvr-polyfill#a02a8089b" diff --git a/tests/components/gltf-model.test.js b/tests/components/gltf-model.test.js index d76246c3425..2a7e8df0513 100644 --- a/tests/components/gltf-model.test.js +++ b/tests/components/gltf-model.test.js @@ -10,6 +10,7 @@ suite('gltf-model', function () { var asset = document.createElement('a-asset-item'); asset.setAttribute('id', 'gltf'); asset.setAttribute('src', SRC); + asset.setAttribute('response-type', 'arraybuffer'); el = this.el = entityFactory({assets: [asset]}); if (el.hasLoaded) { done(); } el.addEventListener('loaded', function () { done(); }); From 63d2f8f18c9cb53803993e329c1a5700e42ec61c Mon Sep 17 00:00:00 2001 From: Takahiro Date: Sat, 4 Mar 2017 21:20:46 -0800 Subject: [PATCH 2/4] Automatically set arraybuffer response-type for glTF files because of THREE.GLTFLoader specification --- examples/primitives/models/index.html | 2 +- examples/test/model/index.html | 2 +- src/core/a-assets.js | 21 +++++++- tests/assets/{dummy.txt => dummy/dummy.glb} | 0 tests/assets/dummy/dummy.gltf | 1 + tests/assets/dummy/dummy.txt | 1 + tests/components/gltf-model.test.js | 1 - tests/core/a-assets.test.js | 56 ++++++++++++++++++++- 8 files changed, 79 insertions(+), 5 deletions(-) rename tests/assets/{dummy.txt => dummy/dummy.glb} (100%) create mode 100644 tests/assets/dummy/dummy.gltf create mode 100644 tests/assets/dummy/dummy.txt diff --git a/examples/primitives/models/index.html b/examples/primitives/models/index.html index fd7a66bfa88..0593e0aa154 100644 --- a/examples/primitives/models/index.html +++ b/examples/primitives/models/index.html @@ -13,7 +13,7 @@ - + diff --git a/examples/test/model/index.html b/examples/test/model/index.html index 7a8a921a280..f48336a0621 100644 --- a/examples/test/model/index.html +++ b/examples/test/model/index.html @@ -11,7 +11,7 @@ - + diff --git a/src/core/a-assets.js b/src/core/a-assets.js index 7ab91b9a65f..438578c594d 100644 --- a/src/core/a-assets.js +++ b/src/core/a-assets.js @@ -98,7 +98,26 @@ registerElement('a-asset-item', { value: function () { var self = this; var src = this.getAttribute('src'); - fileLoader.setResponseType(this.getAttribute('response-type') || 'text'); + var responseType = this.getAttribute('response-type'); + /* + If response-type isn't set, we load files as text + (default XMLHttpRequest.responseType). + But we load .gltf and .glb files as arraybuffer + because of THREE.GLTFLoader specification. + */ + if (!responseType) { + var extension = ''; + var dotLastIndex = src.lastIndexOf('.'); + if (dotLastIndex >= 0) { + extension = src.slice(dotLastIndex, src.length); + } + if (extension === '.gltf' || extension === '.glb') { + responseType = 'arraybuffer'; + } else { + responseType = 'text'; + } + } + fileLoader.setResponseType(responseType); fileLoader.load(src, function handleOnLoad (response) { self.data = response; /* diff --git a/tests/assets/dummy.txt b/tests/assets/dummy/dummy.glb similarity index 100% rename from tests/assets/dummy.txt rename to tests/assets/dummy/dummy.glb diff --git a/tests/assets/dummy/dummy.gltf b/tests/assets/dummy/dummy.gltf new file mode 100644 index 00000000000..45bd2d09230 --- /dev/null +++ b/tests/assets/dummy/dummy.gltf @@ -0,0 +1 @@ +dummy file for a-assets.test.js diff --git a/tests/assets/dummy/dummy.txt b/tests/assets/dummy/dummy.txt new file mode 100644 index 00000000000..45bd2d09230 --- /dev/null +++ b/tests/assets/dummy/dummy.txt @@ -0,0 +1 @@ +dummy file for a-assets.test.js diff --git a/tests/components/gltf-model.test.js b/tests/components/gltf-model.test.js index 2a7e8df0513..d76246c3425 100644 --- a/tests/components/gltf-model.test.js +++ b/tests/components/gltf-model.test.js @@ -10,7 +10,6 @@ suite('gltf-model', function () { var asset = document.createElement('a-asset-item'); asset.setAttribute('id', 'gltf'); asset.setAttribute('src', SRC); - asset.setAttribute('response-type', 'arraybuffer'); el = this.el = entityFactory({assets: [asset]}); if (el.hasLoaded) { done(); } el.addEventListener('loaded', function () { done(); }); diff --git a/tests/core/a-assets.test.js b/tests/core/a-assets.test.js index 75abb8a47c4..a66f0840e00 100644 --- a/tests/core/a-assets.test.js +++ b/tests/core/a-assets.test.js @@ -5,7 +5,9 @@ var THREE = require('lib/three'); // Use data URI where a load event is needed. var IMG_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; -var XHR_SRC = '/base/tests/assets/dummy.txt'; +var XHR_SRC = '/base/tests/assets/dummy/dummy.txt'; +var XHR_SRC_GLTF = '/base/tests/assets/dummy/dummy.gltf'; +var XHR_SRC_GLB = '/base/tests/assets/dummy/dummy.glb'; suite('a-assets', function () { setup(function () { @@ -284,4 +286,56 @@ suite('a-asset-item', function () { this.assetsEl.appendChild(assetItem); document.body.appendChild(this.sceneEl); }); + + test('loads .gltf file as arraybuffer without response-type attribute', function (done) { + var assetItem = document.createElement('a-asset-item'); + assetItem.setAttribute('src', XHR_SRC_GLTF); + assetItem.addEventListener('loaded', function (evt) { + assert.ok(assetItem.data !== null); + assert.ok(assetItem.data instanceof ArrayBuffer); + done(); + }); + this.assetsEl.appendChild(assetItem); + document.body.appendChild(this.sceneEl); + }); + + test('loads .gltf file as text with response-type attribute', function (done) { + var assetItem = document.createElement('a-asset-item'); + THREE.Cache.remove(XHR_SRC_GLTF); + assetItem.setAttribute('src', XHR_SRC_GLTF); + assetItem.setAttribute('response-type', 'text'); + assetItem.addEventListener('loaded', function (evt) { + assert.ok(assetItem.data !== null); + assert.ok(typeof assetItem.data === 'string'); + done(); + }); + this.assetsEl.appendChild(assetItem); + document.body.appendChild(this.sceneEl); + }); + + test('loads .glb file as arraybuffer without response-type attribute', function (done) { + var assetItem = document.createElement('a-asset-item'); + assetItem.setAttribute('src', XHR_SRC_GLB); + assetItem.addEventListener('loaded', function (evt) { + assert.ok(assetItem.data !== null); + assert.ok(assetItem.data instanceof ArrayBuffer); + done(); + }); + this.assetsEl.appendChild(assetItem); + document.body.appendChild(this.sceneEl); + }); + + test('loads .glb file as text with response-type attribute', function (done) { + var assetItem = document.createElement('a-asset-item'); + THREE.Cache.remove(XHR_SRC_GLB); + assetItem.setAttribute('src', XHR_SRC_GLB); + assetItem.setAttribute('response-type', 'text'); + assetItem.addEventListener('loaded', function (evt) { + assert.ok(assetItem.data !== null); + assert.ok(typeof assetItem.data === 'string'); + done(); + }); + this.assetsEl.appendChild(assetItem); + document.body.appendChild(this.sceneEl); + }); }); From bd81bd9b2f0d8ea38d6d0970697b909b40d466fc Mon Sep 17 00:00:00 2001 From: Takahiro Date: Sun, 5 Mar 2017 00:27:19 -0800 Subject: [PATCH 3/4] Export inferResponseType function in a-asset-item --- src/core/a-assets.js | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/core/a-assets.js b/src/core/a-assets.js index 438578c594d..afc4f1389fe 100644 --- a/src/core/a-assets.js +++ b/src/core/a-assets.js @@ -98,26 +98,8 @@ registerElement('a-asset-item', { value: function () { var self = this; var src = this.getAttribute('src'); - var responseType = this.getAttribute('response-type'); - /* - If response-type isn't set, we load files as text - (default XMLHttpRequest.responseType). - But we load .gltf and .glb files as arraybuffer - because of THREE.GLTFLoader specification. - */ - if (!responseType) { - var extension = ''; - var dotLastIndex = src.lastIndexOf('.'); - if (dotLastIndex >= 0) { - extension = src.slice(dotLastIndex, src.length); - } - if (extension === '.gltf' || extension === '.glb') { - responseType = 'arraybuffer'; - } else { - responseType = 'text'; - } - } - fileLoader.setResponseType(responseType); + fileLoader.setResponseType( + this.getAttribute('response-type') || inferResponseType(src)); fileLoader.load(src, function handleOnLoad (response) { self.data = response; /* @@ -244,3 +226,23 @@ function extractDomain (url) { // Find and remove port number. return domain.split(':')[0]; } + +/** + * Infer response-type attribute from src. + * Default is text(default XMLHttpRequest.responseType) + * but we use arraybuffer for .gltf and .glb files + * because of THREE.GLTFLoader specification. + * + * @param {string} src + * @returns {string} + */ +function inferResponseType (src) { + var dotLastIndex = src.lastIndexOf('.'); + if (dotLastIndex >= 0) { + var extension = src.slice(dotLastIndex, src.length); + if (extension === '.gltf' || extension === '.glb') { + return 'arraybuffer'; + } + } + return 'text'; +} From fc2fd6f0505b42d3777f5a27e8834677fa20279c Mon Sep 17 00:00:00 2001 From: Takahiro Date: Sun, 5 Mar 2017 18:38:00 -0800 Subject: [PATCH 4/4] Add inferResponseType test in a-assets.test.js --- src/core/a-assets.js | 1 + tests/core/a-assets.test.js | 42 ++++++++----------------------------- 2 files changed, 10 insertions(+), 33 deletions(-) diff --git a/src/core/a-assets.js b/src/core/a-assets.js index afc4f1389fe..5dbf93a5fcf 100644 --- a/src/core/a-assets.js +++ b/src/core/a-assets.js @@ -246,3 +246,4 @@ function inferResponseType (src) { } return 'text'; } +module.exports.inferResponseType = inferResponseType; diff --git a/tests/core/a-assets.test.js b/tests/core/a-assets.test.js index a66f0840e00..2bb8c635a5f 100644 --- a/tests/core/a-assets.test.js +++ b/tests/core/a-assets.test.js @@ -1,6 +1,8 @@ /* global assert, setup, suite, test */ var THREE = require('lib/three'); +var inferResponseType = require('core/a-assets').inferResponseType; + // Empty src will not trigger load events in Chrome. // Use data URI where a load event is needed. var IMG_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; @@ -299,43 +301,17 @@ suite('a-asset-item', function () { document.body.appendChild(this.sceneEl); }); - test('loads .gltf file as text with response-type attribute', function (done) { - var assetItem = document.createElement('a-asset-item'); - THREE.Cache.remove(XHR_SRC_GLTF); - assetItem.setAttribute('src', XHR_SRC_GLTF); - assetItem.setAttribute('response-type', 'text'); - assetItem.addEventListener('loaded', function (evt) { - assert.ok(assetItem.data !== null); - assert.ok(typeof assetItem.data === 'string'); - done(); + suite('inferResponseType', function () { + test('returns text as default', function () { + assert.equal(inferResponseType(XHR_SRC), 'text'); }); - this.assetsEl.appendChild(assetItem); - document.body.appendChild(this.sceneEl); - }); - test('loads .glb file as arraybuffer without response-type attribute', function (done) { - var assetItem = document.createElement('a-asset-item'); - assetItem.setAttribute('src', XHR_SRC_GLB); - assetItem.addEventListener('loaded', function (evt) { - assert.ok(assetItem.data !== null); - assert.ok(assetItem.data instanceof ArrayBuffer); - done(); + test('returns arraybuffer for .gltf file', function () { + assert.equal(inferResponseType(XHR_SRC_GLTF), 'arraybuffer'); }); - this.assetsEl.appendChild(assetItem); - document.body.appendChild(this.sceneEl); - }); - test('loads .glb file as text with response-type attribute', function (done) { - var assetItem = document.createElement('a-asset-item'); - THREE.Cache.remove(XHR_SRC_GLB); - assetItem.setAttribute('src', XHR_SRC_GLB); - assetItem.setAttribute('response-type', 'text'); - assetItem.addEventListener('loaded', function (evt) { - assert.ok(assetItem.data !== null); - assert.ok(typeof assetItem.data === 'string'); - done(); + test('returns arraybuffer for .glb file', function () { + assert.equal(inferResponseType(XHR_SRC_GLB), 'arraybuffer'); }); - this.assetsEl.appendChild(assetItem); - document.body.appendChild(this.sceneEl); }); });