model-inflator component

src/components/model-inflator.js

+const inflateEntities = function(idPrefix, componentMappings, parentEl, node) {
+  // setObject3D mutates the node's parent, so we have to copy
+  const children = node.children.slice(0);
+
+  const el = document.createElement("a-entity");
+  el.id = idPrefix + node.name;
+  parentEl.appendChild(el);
+
+  // // Copy over transform to the THREE.Group and reset the actual transform of the Object3D
+  el.setAttribute("position", {
+    x: node.position.x,
+    y: node.position.y,
+    z: node.position.z
+  });
+  el.setAttribute("rotation", {
+    x: node.rotation.x * THREE.Math.RAD2DEG,
+    y: node.rotation.y * THREE.Math.RAD2DEG,
+    z: node.rotation.z * THREE.Math.RAD2DEG
+  });
+  el.setAttribute("scale", {
+    x: node.scale.x,
+    y: node.scale.y,
+    z: node.scale.z
+  });
+
+  node.position.set(0, 0, 0);
+  node.rotation.set(0, 0, 0);
+  node.scale.set(1, 1, 1);
+
+  el.setObject3D(node.type.toLowerCase(), node);
+
+  if (componentMappings && componentMappings[node.name]) {
+    const components = componentMappings[node.name];
+    for (const componentName of Object.keys(components)) {
+      el.setAttribute(componentName, components[componentName]);
+    }
+  }
+
+  children.forEach(childNode => {
+    inflateEntities(idPrefix, componentMappings, el, childNode);
+  });
+};
+
+AFRAME.registerComponent("model-inflator", {
+  schema: {
+    idPrefix: { type: "string" }
+  },
+  init: function() {
+    const componentMappings = {
+      RightHand: {
+        spin: "speed: 1;"
+      }
+    };
+
+    this.el.addEventListener("model-loaded", e => {
+      inflateEntities(
+        `${this.data.idPrefix}_`,
+        componentMappings,
+        this.el,
+        e.detail.model
+      );
+    });
+  }
+});

src/room.js

@@ -34,6 +34,7 @@ import "./components/water";
 import "./components/skybox";
 import "./components/layers";
 import "./components/spawn-controller";
+import "./components/model-inflator";
 import "./systems/personal-space-bubble";
 
 import { promptForName, getCookie, parseJwt } from "./utils";

templates/room.hbs

@@ -44,6 +44,7 @@
         light="defaultLightsEnabled: false">
 
         <a-assets>
+            <a-asset-item id="bot-skinned-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_Skinned.glb" }}"></a-asset-item>
             <a-asset-item id="bot-head-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_Head_Mesh.glb" }}"></a-asset-item>
             <a-asset-item id="bot-body-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_Body_Mesh.glb" }}"></a-asset-item>
             <a-asset-item id="bot-left-hand-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_LeftHand_Mesh.glb" }}"></a-asset-item>
@@ -174,6 +175,14 @@
             ></a-entity>
         </a-entity>
 
+         <a-entity
+            id="bot-skinned"
+            cached-gltf-model="#bot-skinned-mesh"
+            position="0 0 0"
+            spin
+            model-inflator="idPrefix: bot;"
+        ></a-entity>
+
         <!-- Environment -->
         <a-entity
             id="meeting-space"