From 846e90ddf371e9ae97769472072e35befb604e0a Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Wed, 25 Jul 2018 18:01:52 -0700
Subject: [PATCH] Move zip handling into gltf-model-plus so that blob urls can
be cleaned up
---
src/components/gltf-model-plus.js | 38 +++++++++++++++++++++++++++----
src/components/media-loader.js | 23 ++-----------------
2 files changed, 36 insertions(+), 25 deletions(-)
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index 0b9755a4a..b32e05a95 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -1,3 +1,5 @@
+import JSZip from "jszip";
+
const GLTFCache = {};
AFRAME.GLTFModelPlus = {
@@ -181,14 +183,41 @@ function nextTick() {
});
}
-function cachedLoadGLTF(src, basePath, preferredTechnique, onProgress) {
+function cachedLoadGLTF(src, basePath, contentType, preferredTechnique, onProgress) {
// Load the gltf model from the cache if it exists.
if (!GLTFCache[src]) {
- GLTFCache[src] = new Promise((resolve, reject) => {
+ GLTFCache[src] = new Promise(async (resolve, reject) => {
+ let gltfUrl = src;
+ let onLoad = resolve;
+ if (contentType === "model/gltf+zip") {
+ const zip = await fetch(src)
+ .then(r => r.blob())
+ .then(JSZip.loadAsync);
+
+ // Rewrite any url refferences in the GLTF to blob urls
+ const gltfJson = JSON.parse(await zip.file("scene.gltf").async("text"));
+ const fileMap = await Object.values(zip.files).reduce(async (prev, file) => {
+ if (file.name === "scene.gltf") return prev;
+ const out = await prev;
+ out[file.name] = URL.createObjectURL(await file.async("blob"));
+ return out;
+ }, Promise.resolve({}));
+ gltfJson.buffers && gltfJson.buffers.forEach(b => (b.uri = fileMap[b.uri]));
+ gltfJson.images && gltfJson.images.forEach(i => (i.uri = fileMap[i.uri]));
+
+ gltfUrl = fileMap["scene.gtlf"] = URL.createObjectURL(
+ new Blob([JSON.stringify(gltfJson, null, 2)], { type: "text/plain" })
+ );
+
+ onLoad = model => {
+ Object.keys(fileMap).forEach(URL.revokeObjectURL);
+ resolve(model);
+ };
+ }
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.path = basePath;
gltfLoader.preferredTechnique = preferredTechnique;
- gltfLoader.load(src, resolve, onProgress, reject);
+ gltfLoader.load(gltfUrl, onLoad, onProgress, reject);
});
}
return GLTFCache[src].then(cloneGltf);
@@ -203,6 +232,7 @@ function cachedLoadGLTF(src, basePath, preferredTechnique, onProgress) {
AFRAME.registerComponent("gltf-model-plus", {
schema: {
src: { type: "string" },
+ contentType: { type: "string" },
basePath: { type: "string", default: undefined },
inflate: { default: false }
},
@@ -244,7 +274,7 @@ AFRAME.registerComponent("gltf-model-plus", {
}
const gltfPath = THREE.LoaderUtils.extractUrlBase(src);
- const model = await cachedLoadGLTF(src, this.data.basePath, this.preferredTechnique);
+ const model = await cachedLoadGLTF(src, this.data.basePath, this.data.contentType, this.preferredTechnique);
// If we started loading something else already
// TODO: there should be a way to cancel loading instead
diff --git a/src/components/media-loader.js b/src/components/media-loader.js
index d760eedc4..4cee88ae2 100644
--- a/src/components/media-loader.js
+++ b/src/components/media-loader.js
@@ -1,5 +1,3 @@
-import JSZip from "jszip";
-
import { getBox, getScaleCoefficient } from "../utils/auto-box-collider";
import { resolveFarsparkUrl } from "../utils/media-utils";
@@ -70,24 +68,6 @@ AFRAME.registerComponent("media-loader", {
this.el.setAttribute("image-plus", { src: raw, contentType });
this.el.setAttribute("position-at-box-shape-border", { target: ".delete-button", dirs: ["forward", "back"] });
} else if (contentType.startsWith("model/gltf") || url.endsWith(".gltf") || url.endsWith(".glb")) {
- let gltfUrl = raw;
- if (contentType === "model/gltf+zip") {
- gltfUrl = await fetch(raw)
- .then(r => r.blob())
- .then(JSZip.loadAsync)
- .then(async zip => {
- const gltf = JSON.parse(await zip.file("scene.gltf").async("text"));
- const fileMap = await Object.values(zip.files).reduce(async (prev, file) => {
- if (file.name === "scene.gltf") return prev;
- const out = await prev;
- out[file.name] = URL.createObjectURL(await file.async("blob"));
- return out;
- }, Promise.resolve({}));
- gltf.buffers && gltf.buffers.forEach(b => (b.uri = fileMap[b.uri]));
- gltf.images && gltf.images.forEach(i => (i.uri = fileMap[i.uri]));
- return URL.createObjectURL(new Blob([JSON.stringify(gltf, null, 2)], { type: "text/plain" }));
- });
- }
this.el.addEventListener(
"model-loaded",
() => {
@@ -98,7 +78,8 @@ AFRAME.registerComponent("media-loader", {
);
this.el.addEventListener("model-error", this.onError, { once: true });
this.el.setAttribute("gltf-model-plus", {
- src: gltfUrl,
+ src: raw,
+ contentType,
basePath: THREE.LoaderUtils.extractUrlBase(origin),
inflate: true
});
--
GitLab