Remove automatic box shape if an inflated gltf created its own shapes.

src/components/auto-box-collider.js

-import { calculateBoxShape } from "../utils/auto-box-collider";
-AFRAME.registerComponent("auto-box-collider", {
-  schema: {
-    resize: { default: false },
-    resizeLength: { default: 0.5 }
-  },
-
-  init() {}
-});

src/components/gltf-model-plus.js

@@ -278,7 +278,7 @@ AFRAME.registerComponent("gltf-model-plus", {
         }
       }
 
-      this.el.emit("model-loaded", { format: "gltf", model: this.model });
+      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
     } catch (e) {
       console.error("Failed to load glTF model", e, this);
       this.el.emit("model-error", { format: "gltf", src });

src/hub.html

@@ -160,13 +160,14 @@
 
             <template id="interactable-model">
                 <a-entity
-                    gltf-model-plus="inflate: false;"
+                    gltf-model-plus="inflate: true;"
                     class="interactable"
                     super-networked-interactable="counter: #media-counter;"
                     body="type: dynamic; shape: none; mass: 1;"
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable
+                    auto-scale-cannon-physics-body
                     sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
                     position-at-box-shape-border="target:.delete-button"
                     destroy-at-extreme-distances

src/hub.js

@@ -64,7 +64,6 @@ import "./components/css-class";
 import "./components/scene-shadow";
 import "./components/avatar-replay";
 import "./components/image-plus";
-import "./components/auto-box-collider";
 import "./components/pinch-to-move";
 import "./components/look-on-mobile";
 import "./components/pitch-yaw-rotator";

src/utils/auto-box-collider.js

-export function getBox(entity) {
+export function getBox(entity, boxRoot) {
   const box = new THREE.Box3();
-  const mesh = entity.getObject3D("mesh");
   const rotation = entity.object3D.rotation.clone();
   entity.object3D.rotation.set(0, 0, 0);
   entity.object3D.updateMatrixWorld(true);
 
   box.expandByObject = expandByObject;
-  box.setFromObject(mesh);
+  box.setFromObject(boxRoot);
   entity.object3D.rotation.copy(rotation);
   return box;
 }

src/utils/media-utils.js

@@ -25,20 +25,22 @@ const offset = { x: 0, y: 0, z: -1.5 };
 export const spawnNetworkedImage = (entity, src, contentType) => {
   entity.id = "interactable-image-" + interactableId++;
   entity.setAttribute("networked", { template: "#interactable-image" });
-  entity.addEventListener("image-loaded", function onBodyLoaded() {
-    entity.removeEventListener("image-loaded", onBodyLoaded);
+  entity.addEventListener("image-loaded", function onImageLoaded() {
+    entity.removeEventListener("image-loaded", onImageLoaded);
   });
   entity.setAttribute("image-plus", { src, contentType });
+  return entity;
 };
 
 export const spawnNetworkedInteractable = (entity, src, basePath) => {
   entity.id = "interactable-model-" + interactableId++;
   entity.setAttribute("networked", { template: "#interactable-model" });
-  entity.addEventListener("model-loaded", function onBodyLoaded() {
-    entity.removeEventListener("model-loaded", onBodyLoaded);
-    setShapeAndScale(entity);
+  entity.addEventListener("model-loaded", function onModelLoaded(evt) {
+    entity.removeEventListener("model-loaded", onModelLoaded);
+    setShapeAndScale(entity, evt.detail.didInflate);
   });
   entity.setAttribute("gltf-model-plus", { src: src, basePath: basePath });
+  return entity;
 };
 
 export const addMedia = async url => {
@@ -79,26 +81,27 @@ export const addMedia = async url => {
   }
 };
 
-function setShapeAndScale(entity) {
-  const box = getBox(entity);
-  const center = new THREE.Vector3();
-  const halfExtents = new THREE.Vector3();
-  getCenterAndHalfExtents(entity, box, center, halfExtents);
-  entity.getObject3D("mesh").position.sub(center);
+function setShapeAndScale(entity, didInflate) {
+  const mesh = entity.getObject3D("mesh");
+  const boxRoot = didInflate ? mesh.parent : mesh;
+  const box = getBox(entity, boxRoot);
   const scaleCoefficient = getScaleCoefficient(0.5, box);
-  entity.setAttribute("shape", {
-    shape: "box",
-    halfExtents: halfExtents
-  });
+  if (entity.components.body && entity.components.body.body && entity.components.body.body.shapes.length > 1) {
+    entity.removeAttribute("shape");
+  } else {
+    const center = new THREE.Vector3();
+    const halfExtents = new THREE.Vector3();
+    getCenterAndHalfExtents(entity, box, center, halfExtents);
+    boxRoot.position.sub(center);
+    entity.setAttribute("shape", {
+      shape: "box",
+      halfExtents: halfExtents
+    });
+  }
   const scale = entity.object3D.scale;
   entity.setAttribute("scale", {
     x: scale.x * scaleCoefficient,
     y: scale.y * scaleCoefficient,
     z: scale.z * scaleCoefficient
   });
-  if (entity.components.body && entity.components.body.body) {
-    // TODO: Do this in shape component update
-    entity.components.body.syncToPhysics();
-    entity.components.body.updateCannonScale();
-  }
 }