diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index b070c83c7938666ee9a79064b4f9b9b438461cea..825fd0713a7540923da2628128bba29ea294de77 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -265,10 +265,10 @@ AFRAME.registerComponent("gltf-model-plus", { this.model.animations = model.animations; this.el.setObject3D("mesh", this.model); - if (this.data.inflate) { this.inflatedEl = inflateEntities(this.model, this.templates, gltfPath); this.el.appendChild(this.inflatedEl); + this.el.setObject3D("mesh", this.inflatedEl.object3D); // TODO: Still don't fully understand the lifecycle here and how it differs between browsers, we should dig in more // Wait one tick for the appended custom elements to be connected before attaching templates await nextTick(); @@ -277,8 +277,7 @@ AFRAME.registerComponent("gltf-model-plus", { attachTemplate(this.el, name, this.templates[name]); } } - - this.el.emit("model-loaded", { format: "gltf", model: this.model, didInflate: this.data.inflate }); // TODO: this.data.inflate is not the same as actually inflating + this.el.emit("model-loaded", { format: "gltf", model: this.model }); } catch (e) { console.error("Failed to load glTF model", e, this); this.el.emit("model-error", { format: "gltf", src }); diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 1ee8e20a22b9487f16bf4c3c53053e1049213e2c..862dd8512c1ea2e9083a181894052821082f8fb3 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -8,10 +8,9 @@ AFRAME.registerComponent("media-loader", { src: { type: "string" } }, - setShapeAndScale(didInflate) { + setShapeAndScale() { const mesh = this.el.getObject3D("mesh"); - const boxRoot = didInflate ? mesh.parent : mesh; - const box = getBox(this.el, boxRoot); + const box = getBox(this.el, mesh); const scaleCoefficient = getScaleCoefficient(0.5, box); if (this.el.body && this.el.body.shapes.length > 1) { this.el.removeAttribute("shape"); @@ -19,7 +18,7 @@ AFRAME.registerComponent("media-loader", { const center = new THREE.Vector3(); const halfExtents = new THREE.Vector3(); getCenterAndHalfExtents(this.el, box, center, halfExtents); - boxRoot.position.sub(center); + mesh.position.sub(center); this.el.setAttribute("shape", { shape: "box", halfExtents: halfExtents @@ -49,8 +48,12 @@ 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(evt.detail.didInflate), { once: true }); - this.el.setAttribute("gltf-model-plus", { src: raw, basePath: THREE.LoaderUtils.extractUrlBase(origin) }); + this.el.addEventListener("model-loaded", evt => this.setShapeAndScale(), { once: true }); + this.el.setAttribute("gltf-model-plus", { + src: raw, + basePath: THREE.LoaderUtils.extractUrlBase(origin), + inflate: true + }); } else { throw new Error(`Unsupported content type: ${contentType}`); }