various updates to support moving the duck and pen into the gltf-component...

various updates to support moving the duck and pen into the gltf-component data of the environments instead of hubs.html and getting rid of interactable-template again

src/components/css-class.js

@@ -6,6 +6,7 @@ AFRAME.registerComponent("css-class", {
   schema: {
     type: "string"
   },
+  multiple: true,
   init() {
     this.el.classList.add(this.data);
   },

src/components/media-loader.js

@@ -12,6 +12,7 @@ AFRAME.registerComponent("media-loader", {
     this.onError = this.onError.bind(this);
     this.showLoader = this.showLoader.bind(this);
     this.clearLoadingTimeout = this.clearLoadingTimeout.bind(this);
+    this.shapeAdded = false;
   },
 
   setShapeAndScale(resize) {
@@ -19,9 +20,10 @@ AFRAME.registerComponent("media-loader", {
     const box = getBox(this.el, mesh);
     const scaleCoefficient = resize ? getScaleCoefficient(0.5, box) : 1;
     this.el.object3DMap.mesh.scale.multiplyScalar(scaleCoefficient);
-    if (this.el.body && this.el.body.shapes.length > 1) {
+    if (this.el.body && this.shapeAdded) {
       this.el.removeAttribute("shape");
-    } else {
+      this.shapeAdded = false;
+    } else if (this.el.body.shapes.length === 0) {
       const center = new THREE.Vector3();
       const { min, max } = box;
       const halfExtents = {
@@ -35,6 +37,7 @@ AFRAME.registerComponent("media-loader", {
         shape: "box",
         halfExtents: halfExtents
       });
+      this.shapeAdded = true;
     }
   },
 

src/components/super-spawner.js

@@ -13,7 +13,7 @@ AFRAME.registerComponent("super-spawner", {
     /**
      * Source of the media asset the spawner will spawn when grabbed. This can be a gltf, video, or image, or a url that the reticiulm media API can resolve to a gltf, video, or image.
      */
-    src: { default: "https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf" },
+    src: { default: "" },
 
     /**
      * The template to use for this object

src/gltf-component-mappings.js

 import "./components/gltf-model-plus";
 import { resolveURL } from "./utils/resolveURL";
 
+AFRAME.GLTFModelPlus.registerComponent("duck", "duck");
 AFRAME.GLTFModelPlus.registerComponent("quack", "quack");
 AFRAME.GLTFModelPlus.registerComponent("sound", "sound");
 AFRAME.GLTFModelPlus.registerComponent("collision-filter", "collision-filter");

src/hub.html

@@ -69,7 +69,6 @@
             <a-asset-item id="botwoody" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotWoody_Avatar-0140485a23.gltf"></a-asset-item>
 
             <a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.glb"></a-asset-item>
-            <a-asset-item id="interactable-duck" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf"></a-asset-item>
 
             <a-asset-item id="quack" src="./assets/sfx/quack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
             <a-asset-item id="specialquack" src="./assets/sfx/specialquack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
@@ -143,27 +142,6 @@
                 </a-entity>
             </template>
 
-            <template id="interactable-template">
-                <a-entity
-                    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
-                    duck
-                >
-                    <a-entity class="delete-button" visible-while-frozen>
-                        <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
-                        <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
-                    </a-entity>
-                </a-entity>
-            </template>
-
             <template id="interactable-media">
                 <a-entity
                     class="interactable"
@@ -210,6 +188,10 @@
                         color="#FF0033"
                         pen="camera: #player-camera; drawingManager: #drawing-manager"
                     ></a-sphere>
+                    <a-entity class="delete-button" visible-while-frozen>
+                        <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
+                        <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
+                    </a-entity>
                 </a-entity>
             </template>
 
@@ -454,6 +436,7 @@
             networked="template: #interactable-drawing;"
         ></a-entity>
 
+        <!-- TODO: remove this once the pens are added into the environments -->
         <a-entity 
             gltf-model-plus="src: https://asset-bundles-prod.reticulum.io/interactables/DrawingPen/DrawingPen-484ae5682f.gltf"
             class="interactable toggle" 

src/network-schemas.js

@@ -83,22 +83,6 @@ function registerNetworkSchemas() {
     ]
   });
 
-  NAF.schemas.add({
-    template: "#interactable-template",
-    components: [
-      {
-        component: "position",
-        requiresNetworkUpdate: vectorRequiresUpdate(0.001)
-      },
-      {
-        component: "rotation",
-        requiresNetworkUpdate: vectorRequiresUpdate(0.5)
-      },
-      "scale",
-      "media-loader"
-    ]
-  });
-
   NAF.schemas.add({
     template: "#interactable-media",
     components: [