diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index 5a6a3025c5b78e24883bfb04e1f2f801475bd14c..6e79da6ff80c4282685dd8da5024cd8f618135ad 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -226,9 +226,11 @@ function resolveURL(url, path) { return path + url; } -async function loadGLTF(src, basePath, contentType, preferredTechnique, onProgress) { - let gltfUrl = (await resolveMedia(src)).raw; +async function loadGLTF(src, preferredTechnique, onProgress) { + const { raw, origin, contentType } = await resolveMedia(src); + const basePath = THREE.LoaderUtils.extractUrlBase(origin); + let gltfUrl = raw; let fileMap; if (contentType === "model/gltf+zip") { @@ -327,8 +329,6 @@ async function loadGLTF(src, basePath, contentType, preferredTechnique, onProgre AFRAME.registerComponent("gltf-model-plus", { schema: { src: { type: "string" }, - contentType: { type: "string" }, - basePath: { type: "string", default: undefined }, inflate: { default: false } }, @@ -371,7 +371,7 @@ AFRAME.registerComponent("gltf-model-plus", { const gltfPath = THREE.LoaderUtils.extractUrlBase(src); if (!GLTFCache[src]) { - GLTFCache[src] = loadGLTF(src, this.data.basePath, this.data.contentType, this.preferredTechnique); + GLTFCache[src] = loadGLTF(src, this.preferredTechnique); } const cachedModel = await GLTFCache[src]; diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 544d4443a4304e0ed1d3ad75523c89cafa46c979..ada77a5183f367ddab0031120b88bbc544073821 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -1,8 +1,6 @@ import { getBox, getScaleCoefficient } from "../utils/auto-box-collider"; import { resolveMedia } from "../utils/media-utils"; -const fetchContentType = async url => fetch(url, { method: "HEAD" }).then(r => r.headers.get("content-type")); - AFRAME.registerComponent("media-loader", { schema: { src: { type: "string" }, @@ -53,10 +51,8 @@ AFRAME.registerComponent("media-loader", { this.setShapeAndScale(true); }, 100); - const { raw, origin, meta } = await resolveMedia(url); - console.log("resolved", url, raw, origin, meta); + const { raw, contentType } = await resolveMedia(url); - const contentType = (meta && meta.expected_content_type) || (await fetchContentType(raw)); if (contentType.startsWith("image/") || contentType.startsWith("video/") || contentType.startsWith("audio/")) { this.el.addEventListener( "image-loaded", @@ -78,9 +74,7 @@ AFRAME.registerComponent("media-loader", { ); this.el.addEventListener("model-error", this.onError, { once: true }); this.el.setAttribute("gltf-model-plus", { - src: raw, - contentType, - basePath: THREE.LoaderUtils.extractUrlBase(origin), + src: url, inflate: true }); } else { diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 96e3b618a79a0f492cd64d9f82d551aace83f795..0ebd5c3e1af6cc3e24152fe16fea8835faa22542 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -6,6 +6,8 @@ if (process.env.RETICULUM_SERVER) { mediaAPIEndpoint = `https://${process.env.RETICULUM_SERVER}${mediaAPIEndpoint}`; } +const fetchContentType = async url => fetch(url, { method: "HEAD" }).then(r => r.headers.get("content-type")); + const resolveMediaCache = new Map(); export const resolveMedia = async url => { const parsedUrl = new URL(url); @@ -19,6 +21,10 @@ export const resolveMedia = async url => { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ media: { url } }) }).then(r => r.json()); + + const contentType = (resolved.meta && resolved.meta.expected_content_type) || (await fetchContentType(resolved.raw)); + resolved.contentType = contentType; + resolveMediaCache.set(url, resolved); return resolved; };