diff --git a/src/components/hand-poses.js b/src/components/hand-poses.js index d20b688ae0d9615ffbfc1a6685d076147af05353..16d1f1479af6f4f4e17963084e6e135ecb82b942 100644 --- a/src/components/hand-poses.js +++ b/src/components/hand-poses.js @@ -9,90 +9,67 @@ const POSES = { pinch: "pinch" }; -AFRAME.registerComponent("hand-poses", { +const NETWORK_POSES = ["allOpen", "thumbDown", "indexDown", "mrpDown", "thumbsUp", "point", "allGrip", "pinch"]; + +AFRAME.registerComponent("hand-pose", { + multiple: true, schema: { - leftPose: { type: "string", default: "allOpen" }, - rightPose: { type: "string", default: "allOpen" }, - gltfEntity: { type: "string", default: "a-gltf-entity" } + pose: { default: 0 } }, init() { this.animatePose = this.animatePose.bind(this); - this.animatePoses = this.animatePoses.bind(this); this.mixer = this.el.components["animation-mixer"]; - this.leftClipFrom = this.leftClipTo = this.mixer.mixer.clipAction(POSES.open + "_L", this.clipActionObject); - this.rightClipFrom = this.rightClipTo = this.mixer.mixer.clipAction(POSES.open + "_R", this.clipActionObject); - this.leftClipTo.play(); - this.rightClipTo.play(); + const object3DMap = this.mixer.el.object3DMap; + const rootObj = object3DMap.mesh || object3DMap.scene; + this.clipActionObject = rootObj.parent; + const suffix = this.id == "left" ? "_L" : "_R"; + this.from = this.to = this.mixer.mixer.clipAction(POSES.open + suffix, this.clipActionObject); + this.from.play(); }, update(oldData) { - if (!this.mixer) return; - if (!this.clipActionObject) { - const object3DMap = this.mixer.el.object3DMap; - const rootObj = object3DMap.mesh || object3DMap.scene; - this.clipActionObject = rootObj.parent; - } else { - this.animatePoses(oldData); + if (oldData.pose != this.data.pose) { + this.animatePose(NETWORK_POSES[oldData.pose || 0], NETWORK_POSES[this.data.pose]); } }, - animatePose(hand, prev, curr) { - this[`${hand}ClipFrom`].stop(); - this[`${hand}ClipTo`].stop(); + animatePose(prev, curr) { + this.from.stop(); + this.to.stop(); const duration = 0.065; - const suffix = hand == "left" ? "_L" : "_R"; - const from = (this[`${hand}ClipFrom`] = this.mixer.mixer.clipAction(prev + suffix, this.clipActionObject)); - const to = (this[`${hand}ClipTo`] = this.mixer.mixer.clipAction(curr + suffix, this.clipActionObject)); + const suffix = this.id == "left" ? "_L" : "_R"; + this.from = this.mixer.mixer.clipAction(prev + suffix, this.clipActionObject); + this.to = this.mixer.mixer.clipAction(curr + suffix, this.clipActionObject); - from.fadeOut(duration); - to.fadeIn(duration); - to.play(); - from.play(); + this.from.fadeOut(duration); + this.to.fadeIn(duration); + this.to.play(); + this.from.play(); this.mixer.mixer.update(0.001); - }, - - animatePoses(oldData) { - if (oldData.leftPose != this.data.leftPose) { - this.animatePose("left", oldData.leftPose, this.data.leftPose); - } - if (oldData.rightPose != this.data.rightPose) { - this.animatePose("right", oldData.rightPose, this.data.rightPose); - } } }); -AFRAME.registerComponent("hand-poses-controller", { +AFRAME.registerComponent("hand-pose-controller", { + multiple: true, schema: { - left: { type: "selector", default: "#player-left-controller" }, - right: { type: "selector", default: "#player-right-controller" } + eventSrc: { type: "selector" } }, - init: function() { this.setHandPose = this.setHandPose.bind(this); - - this.el.setAttribute("hand-poses", { - leftPose: POSES.open, - rightPose: POSES.open - }); }, play: function() { - this.data.left.addEventListener("hand-pose", this.setHandPose); - this.data.right.addEventListener("hand-pose", this.setHandPose); + this.data.eventSrc.addEventListener("hand-pose", this.setHandPose); }, pause: function() { - this.data.left.removeEventListener("hand-pose", this.setHandPose); - this.data.right.removeEventListener("hand-pose", this.setHandPose); + this.data.eventSrc.removeEventListener("hand-pose", this.setHandPose); }, setHandPose: function(evt) { - const { current, previous } = evt.detail; - const isLeft = evt.target === this.data.left; - const pose = POSES[current]; - this.el.setAttribute("hand-poses", `${isLeft ? "left" : "right"}Pose`, pose); + this.el.setAttribute(`hand-pose__${this.id}`, "pose", NETWORK_POSES.indexOf(POSES[evt.detail.current])); } }); diff --git a/src/hub.html b/src/hub.html index 82760675557d13b17adfbae292b85d4ec345c003..b1f063732df95a6da2da232a209ccdffc465d4bd 100644 --- a/src/hub.html +++ b/src/hub.html @@ -63,7 +63,7 @@ <a-entity class="model" gltf-model-plus="inflate: true"> <template data-selector=".RootScene"> - <a-entity ik-controller hand-poses animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity> + <a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity> </template> <template data-selector=".Neck"> @@ -230,8 +230,10 @@ <a-entity ik-controller animation-mixer - hand-poses - hand-poses-controller + hand-pose__left + hand-pose__right + hand-pose-controller__left="eventSrc:#player-left-controller" + hand-pose-controller__right="eventSrc:#player-right-controller" ></a-entity> </template> diff --git a/src/network-schemas.js b/src/network-schemas.js index 05ddf0381249954c018168acec0d8363a314ce2b..58b7cc8b33ecb0c3cf173c5b550c58259e2379d8 100644 --- a/src/network-schemas.js +++ b/src/network-schemas.js @@ -8,13 +8,13 @@ function registerNetworkSchemas() { "player-info", { selector: ".RootScene", - component: "hand-poses", - property: "leftPose" + component: "hand-pose__left", + property: "pose" }, { selector: ".RootScene", - component: "hand-poses", - property: "rightPose" + component: "hand-pose__right", + property: "pose" }, { selector: ".camera",