Don't require entities for IK controller

src/components/ik-controller.js

@@ -39,14 +39,14 @@ function findIKRoot(entity) {
  */
 AFRAME.registerComponent("ik-controller", {
   schema: {
-    leftEye: { type: "string", default: ".LeftEye" },
-    rightEye: { type: "string", default: ".RightEye" },
-    head: { type: "string", default: ".Head" },
-    neck: { type: "string", default: ".Neck" },
-    leftHand: { type: "string", default: ".LeftHand" },
-    rightHand: { type: "string", default: ".RightHand" },
-    chest: { type: "string", default: ".Chest" },
-    hips: { type: "string", default: ".Hips" },
+    leftEye: { type: "string", default: "LeftEye" },
+    rightEye: { type: "string", default: "RightEye" },
+    head: { type: "string", default: "Head" },
+    neck: { type: "string", default: "Neck" },
+    leftHand: { type: "string", default: "LeftHand" },
+    rightHand: { type: "string", default: "RightHand" },
+    chest: { type: "string", default: "Chest" },
+    hips: { type: "string", default: "Hips" },
     rotationSpeed: { default: 5 }
   },
 
@@ -86,46 +86,46 @@ AFRAME.registerComponent("ik-controller", {
 
   update(oldData) {
     if (this.data.leftEye !== oldData.leftEye) {
-      this.leftEye = this.el.querySelector(this.data.leftEye);
+      this.leftEye = this.el.object3D.getObjectByName(this.data.leftEye);
     }
 
     if (this.data.rightEye !== oldData.rightEye) {
-      this.rightEye = this.el.querySelector(this.data.rightEye);
+      this.rightEye = this.el.object3D.getObjectByName(this.data.rightEye);
     }
 
     if (this.data.head !== oldData.head) {
-      this.head = this.el.querySelector(this.data.head);
+      this.head = this.el.object3D.getObjectByName(this.data.head);
     }
 
     if (this.data.neck !== oldData.neck) {
-      this.neck = this.el.querySelector(this.data.neck);
+      this.neck = this.el.object3D.getObjectByName(this.data.neck);
     }
 
     if (this.data.leftHand !== oldData.leftHand) {
-      this.leftHand = this.el.querySelector(this.data.leftHand);
+      this.leftHand = this.el.object3D.getObjectByName(this.data.leftHand);
     }
 
     if (this.data.rightHand !== oldData.rightHand) {
-      this.rightHand = this.el.querySelector(this.data.rightHand);
+      this.rightHand = this.el.object3D.getObjectByName(this.data.rightHand);
     }
 
     if (this.data.chest !== oldData.chest) {
-      this.chest = this.el.querySelector(this.data.chest);
+      this.chest = this.el.object3D.getObjectByName(this.data.chest);
     }
 
     if (this.data.hips !== oldData.hips) {
-      this.hips = this.el.querySelector(this.data.hips);
+      this.hips = this.el.object3D.getObjectByName(this.data.hips);
     }
 
     // Set middleEye's position to be right in the middle of the left and right eyes.
-    this.middleEyePosition.addVectors(this.leftEye.object3D.position, this.rightEye.object3D.position);
+    this.middleEyePosition.addVectors(this.leftEye.position, this.rightEye.position);
     this.middleEyePosition.divideScalar(2);
     this.middleEyeMatrix.makeTranslation(this.middleEyePosition.x, this.middleEyePosition.y, this.middleEyePosition.z);
     this.invMiddleEyeToHead = this.middleEyeMatrix.getInverse(this.middleEyeMatrix);
 
     this.invHipsToHeadVector
-      .addVectors(this.chest.object3D.position, this.neck.object3D.position)
-      .add(this.head.object3D.position)
+      .addVectors(this.chest.position, this.neck.position)
+      .add(this.head.position)
       .negate();
   },
 
@@ -162,35 +162,30 @@ AFRAME.registerComponent("ik-controller", {
 
     // Then position the hips such that the head is aligned with headTransform
     // (which positions middleEye in line with the hmd)
-    hips.object3D.position.setFromMatrixPosition(headTransform).add(invHipsToHeadVector);
+    hips.position.setFromMatrixPosition(headTransform).add(invHipsToHeadVector);
 
     // Animate the hip rotation to follow the Y rotation of the camera with some damping.
     cameraYRotation.setFromRotationMatrix(cameraForward, "YXZ");
     cameraYRotation.x = 0;
     cameraYRotation.z = 0;
     cameraYQuaternion.setFromEuler(cameraYRotation);
-    Quaternion.slerp(
-      hips.object3D.quaternion,
-      cameraYQuaternion,
-      hips.object3D.quaternion,
-      this.data.rotationSpeed * dt / 1000
-    );
+    Quaternion.slerp(hips.quaternion, cameraYQuaternion, hips.quaternion, this.data.rotationSpeed * dt / 1000);
 
     // Take the head orientation computed from the hmd, remove the Y rotation already applied to it by the hips,
     // and apply it to the head
-    invHipsQuaternion.copy(hips.object3D.quaternion).inverse();
-    head.object3D.quaternion.setFromRotationMatrix(headTransform).premultiply(invHipsQuaternion);
+    invHipsQuaternion.copy(hips.quaternion).inverse();
+    head.quaternion.setFromRotationMatrix(headTransform).premultiply(invHipsQuaternion);
 
-    hips.object3D.updateMatrix();
-    rootToChest.multiplyMatrices(hips.object3D.matrix, chest.object3D.matrix);
+    hips.updateMatrix();
+    rootToChest.multiplyMatrices(hips.matrix, chest.matrix);
     invRootToChest.getInverse(rootToChest);
 
     this.updateHand(this.hands.left, leftHand, leftController);
     this.updateHand(this.hands.right, rightHand, rightController);
   },
 
-  updateHand(handState, hand, controller) {
-    const handObject3D = hand.object3D;
+  updateHand(handState, handObject3D, controller) {
+    const hand = handObject3D.el;
     const handMatrix = handObject3D.matrix;
     const controllerObject3D = controller.object3D;
 

src/hub.html

@@ -148,16 +148,6 @@
                           <a-entity></a-entity>
                         </template>
 
-                        <!-- needs to exist for the benefit of the IK calculation  -->
-                        <template data-name="LeftEye">
-                          <a-entity></a-entity>
-                        </template>
-
-                        <!-- needs to exist for the benefit of the IK calculation  -->
-                        <template data-name="RightEye">
-                          <a-entity></a-entity>
-                        </template>
-
                         <template data-name="LeftHand">
                           <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
                         </template>
@@ -402,17 +392,6 @@
               </a-entity>
             </template>
 
-            <!-- needs to exist for the benefit of the IK calculation  -->
-            <template data-name="LeftEye">
-              <a-entity></a-entity>
-            </template>
-
-            <!-- needs to exist for the benefit of the IK calculation  -->
-            <template data-name="RightEye">
-              <a-entity></a-entity>
-            </template>
-
-
             <template data-name="Head">
               <a-entity visible="false" bone-visibility></a-entity>
             </template>