diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 862dd8512c1ea2e9083a181894052821082f8fb3..33d9ab39eef42f169583d5a0d3ee334ded8f4846 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -5,31 +5,31 @@ const fetchContentType = async url => fetch(url, { method: "HEAD" }).then(r => r AFRAME.registerComponent("media-loader", { schema: { - src: { type: "string" } + src: { type: "string" }, + resize: { default: false } }, - setShapeAndScale() { + setShapeAndScale(resize) { const mesh = this.el.getObject3D("mesh"); const box = getBox(this.el, mesh); const scaleCoefficient = getScaleCoefficient(0.5, box); if (this.el.body && this.el.body.shapes.length > 1) { + resize && this.el.object3D.scale.multiplyScalar(scaleCoefficient); this.el.removeAttribute("shape"); } else { const center = new THREE.Vector3(); const halfExtents = new THREE.Vector3(); getCenterAndHalfExtents(this.el, box, center, halfExtents); mesh.position.sub(center); + resize && this.el.object3D.scale.multiplyScalar(scaleCoefficient); this.el.setAttribute("shape", { shape: "box", halfExtents: halfExtents }); } - const scale = this.el.object3D.scale; - this.el.setAttribute("scale", { - x: scale.x * scaleCoefficient, - y: scale.y * scaleCoefficient, - z: scale.z * scaleCoefficient - }); + if (!resize) { + this.el.object3D.scale.set(1, 1, 1); + } }, // TODO: correctly handle case where src changes @@ -39,7 +39,7 @@ AFRAME.registerComponent("media-loader", { // show loading mesh this.el.setObject3D("mesh", new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial())); - this.setShapeAndScale(); + this.setShapeAndScale(true); const { raw, origin, meta } = await resolveFarsparkUrl(url); console.log("resolved", url, raw, origin, meta); @@ -48,7 +48,7 @@ AFRAME.registerComponent("media-loader", { if (contentType.startsWith("image/") || contentType.startsWith("video/")) { this.el.setAttribute("image-plus", { src: raw, contentType }); } else if (contentType.startsWith("model/gltf") || url.endsWith(".gltf") || url.endsWith(".glb")) { - this.el.addEventListener("model-loaded", evt => this.setShapeAndScale(), { once: true }); + this.el.addEventListener("model-loaded", evt => this.setShapeAndScale(this.data.resize), { once: true }); this.el.setAttribute("gltf-model-plus", { src: raw, basePath: THREE.LoaderUtils.extractUrlBase(origin), diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 93ad430f74db8ac0ad6863a0d7da1b668b360485..e4f812b59dd04d2402905e97e8a6e0f29f4e85f9 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -18,13 +18,13 @@ export const resolveFarsparkUrl = async url => { }; let interactableId = 0; -export const addMedia = src => { +export const addMedia = (src, resize = false) => { const scene = AFRAME.scenes[0]; const entity = document.createElement("a-entity"); entity.id = "interactable-media-" + interactableId++; entity.setAttribute("networked", { template: "#interactable-media" }); - entity.setAttribute("media-loader", { src }); + entity.setAttribute("media-loader", { src, resize }); scene.appendChild(entity); return entity; };