diff --git a/src/components/ik-controller.js b/src/components/ik-controller.js index 3b2f3026a56ce64afb9460c6c6de0f37ccc6d969..1bf9e71de656aa9b4972cdf59e534af78599493b 100644 --- a/src/components/ik-controller.js +++ b/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; diff --git a/src/hub.html b/src/hub.html index a6f61a120aaed24284bb152f71ce0865a38eb078..3438ab9a046581e9e5f940e25a98ede7ff88bb91 100644 --- a/src/hub.html +++ b/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>