From b3e573c86167ce95715d01ffd5aed73357c9e0d9 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Sun, 22 Apr 2018 08:05:02 -0700
Subject: [PATCH] Replace hand-pose-state component with networkedAvatar. Set
back reference for hand-pose differently.
---
src/components/hand-poses.js | 51 +++++++++++++-----------------
src/components/networked-avatar.js | 9 ++++++
src/hub.html | 11 +++----
src/hub.js | 1 +
src/network-schemas.js | 11 +------
5 files changed, 38 insertions(+), 45 deletions(-)
create mode 100644 src/components/networked-avatar.js
diff --git a/src/components/hand-poses.js b/src/components/hand-poses.js
index 73bd6ab29..bbabe15be 100644
--- a/src/components/hand-poses.js
+++ b/src/components/hand-poses.js
@@ -11,26 +11,6 @@ const POSES = {
const NETWORK_POSES = ["allOpen", "thumbDown", "indexDown", "mrpDown", "thumbsUp", "point", "allGrip", "pinch"];
-AFRAME.registerComponent("hand-pose-state", {
- multiple: true,
- schema: {
- pose: { default: 0 }
- },
- init() {
- this.setSelfAsStore = this.setSelfAsStore.bind(this);
- },
- play() {
- this.el.addEventListener("model-loaded", this.setSelfAsStore);
- },
- pause() {
- this.el.removeEventListener("model-loaded", this.setSelfAsStore);
- },
- setSelfAsStore(e) {
- const poseEl = e.target.querySelector(`[hand-pose__${this.id}]`);
- poseEl.components[`hand-pose__${this.id}`].store = this;
- }
-});
-
AFRAME.registerComponent("hand-pose", {
multiple: true,
@@ -44,14 +24,27 @@ AFRAME.registerComponent("hand-pose", {
const suffix = this.id == "left" ? "_L" : "_R";
this.from = this.to = this.mixer.mixer.clipAction(POSES.open + suffix, this.clipActionObject);
this.from.play();
+
+ const getNetworkedAvatar = el => {
+ let networkedAvatar = el.components["networked-avatar"];
+ if (networkedAvatar) {
+ return networkedAvatar;
+ }
+ return getNetworkedAvatar(el.parentEl);
+ };
+ this.networkedAvatar = getNetworkedAvatar(this.el);
},
tick() {
- if (!this.store) return;
- if (this.store.data.pose != this.pose) {
- this.animatePose(NETWORK_POSES[this.pose], NETWORK_POSES[this.store.data.pose]);
- this.pose = this.store.data.pose;
- }
+ if (
+ !this.networkedAvatar ||
+ !this.networkedAvatar.data ||
+ !this.networkedAvatar.data[`${this.id}_hand_pose`] !== this.pose
+ )
+ return;
+
+ this.animatePose(NETWORK_POSES[this.pose], NETWORK_POSES[this.networkedAvatar.data[`${this.id}_hand_pose`]]);
+ this.pose = this.networkedAvatar.data[`${this.id}_hand_pose`];
},
animatePose(prev, curr) {
@@ -76,7 +69,7 @@ AFRAME.registerComponent("hand-pose-controller", {
multiple: true,
schema: {
eventSrc: { type: "selector" },
- store: { type: "selector" }
+ networkedAvatar: { type: "selector" }
},
init: function() {
this.setHandPose = this.setHandPose.bind(this);
@@ -91,9 +84,9 @@ AFRAME.registerComponent("hand-pose-controller", {
},
setHandPose: function(evt) {
- this.data.store.setAttribute(
- `hand-pose-state__${this.id}`,
- "pose",
+ this.data.networkedAvatar.setAttribute(
+ "networked-avatar",
+ `${this.id}_hand_pose`,
NETWORK_POSES.indexOf(POSES[evt.detail.current])
);
}
diff --git a/src/components/networked-avatar.js b/src/components/networked-avatar.js
new file mode 100644
index 000000000..55fc69d50
--- /dev/null
+++ b/src/components/networked-avatar.js
@@ -0,0 +1,9 @@
+AFRAME.registerComponent("networked-avatar", {
+ schema: {
+ left_hand_pose: { default: 0 },
+ right_hand_pose: { default: 0 }
+ },
+ init() {
+ console.log("networked-avatar", this.el);
+ }
+});
diff --git a/src/hub.html b/src/hub.html
index c90b81e03..3c2b5648a 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -55,14 +55,14 @@
</template>
<template id="remote-avatar-template">
- <a-entity ik-root player-info>
+ <a-entity networked-avatar ik-root player-info>
<a-entity class="camera"></a-entity>
<a-entity class="left-controller"></a-entity>
<a-entity class="right-controller"></a-entity>
- <a-entity class="model" hand-pose-state__left hand-pose-state__right gltf-model-plus="inflate: true">
+ <a-entity class="model" gltf-model-plus="inflate: true">
<template data-selector=".RootScene">
<a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity>
</template>
@@ -166,6 +166,7 @@
app-mode-toggle-playing__character-controller="mode: hud; invert: true;"
app-mode-toggle-playing__wasd-to-analog2d="mode: hud; invert: true;"
player-info
+ networked-avatar
>
<a-entity
@@ -225,8 +226,6 @@
></a-entity>
<a-entity gltf-model-plus="inflate: true;"
- hand-pose-state__left
- hand-pose-state__right
class="model">
<template data-selector=".RootScene">
<a-entity
@@ -234,8 +233,8 @@
animation-mixer
hand-pose__left
hand-pose__right
- hand-pose-controller__left="store:#player-rig [hand-pose-state__left];eventSrc:#player-left-controller"
- hand-pose-controller__right="store:#player-rig [hand-pose-state__right];eventSrc:#player-right-controller"
+ hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
+ hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
></a-entity>
</template>
diff --git a/src/hub.js b/src/hub.js
index d7ab7351a..ecfc78b3f 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -50,6 +50,7 @@ import "./components/gltf-model-plus";
import "./components/gltf-bundle";
import "./components/hud-controller";
import "./components/stats-plus";
+import "./components/networked-avatar";
import ReactDOM from "react-dom";
import React from "react";
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 00e212c21..d30176a29 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -9,16 +9,7 @@ function registerNetworkSchemas() {
},
"scale",
"player-info",
- {
- selector: ".model",
- component: "hand-pose-state__left",
- property: "pose"
- },
- {
- selector: ".model",
- component: "hand-pose-state__right",
- property: "pose"
- },
+ "networked-avatar",
{
selector: ".camera",
component: "position"
--
GitLab