Create auto-scale-cannon-physics-body component.

src/components/auto-scale-cannon-physics-body.js

+function almostEquals(u, v, eps) {
+  return Math.abs(u.x - v.x) < eps && Math.abs(u.y - v.y) < eps && Math.abs(u.z - v.z) < eps;
+}
+
+function debounce(fn, delay) {
+  let timer = null;
+  return function() {
+    const args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+AFRAME.registerComponent("auto-scale-cannon-physics-body", {
+  dependencies: ["body"],
+
+  init: function() {
+    this.body = this.el.components["body"];
+    this.prevScale = this.el.object3D.scale.clone();
+    this.updateCannonScale = debounce(this.updateCannonScale.bind(this), 200);
+  },
+
+  tick: function() {
+    const scale = this.el.object3D.scale;
+    if (!almostEquals(scale, this.prevScale, 0.001)) {
+      this.updateCannonScale();
+      this.prevScale.copy(scale);
+    }
+  },
+
+  updateCannonScale: function() {
+    this.body.updateCannonScale();
+    console.log("updating?");
+  }
+});

src/hub.html

@@ -162,7 +162,8 @@
                     gltf-model-plus="src: #interactable-duck; inflate: true;"
                     class="interactable"
                     super-networked-interactable="counter: #counter; mass: 1;"
-                    body="type: dynamic; shape: none; mass: 1; monitorScale: true"
+                    body="type: dynamic; shape: none; mass: 1;"
+                    auto-scale-cannon-physics-body
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable
@@ -176,7 +177,8 @@
                     gltf-model-plus="inflate: false;"
                     class="interactable"
                     super-networked-interactable="counter: #media-counter; mass: 1;"
-                    body="type: dynamic; shape: none; mass: 1; monitorScale: true"
+                    body="type: dynamic; shape: none; mass: 1;"
+                    auto-scale-cannon-physics-body
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable
@@ -190,7 +192,8 @@
                 <a-entity
                     class="interactable"
                     super-networked-interactable="counter: #media-counter; mass: 1;"
-                    body="type: dynamic; shape: none; mass: 1; monitorScale: true"
+                    body="type: dynamic; shape: none; mass: 1;"
+                    auto-scale-cannon-physics-body
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable

src/hub.js

@@ -71,6 +71,7 @@ import "./components/look-on-mobile";
 import "./components/pitch-yaw-rotator";
 import "./components/input-configurator";
 import "./components/sticky-object";
+import "./components/auto-scale-cannon-physics-body";
 
 import ReactDOM from "react-dom";
 import React from "react";