From 23151d87b7fe1ef5338f15f218612beb2a8400b5 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Sat, 21 Apr 2018 22:32:23 -0700
Subject: [PATCH] Move hand-pose state out of an inflated gltf-model-plus
entity.
---
src/components/hand-poses.js | 38 +++++++++++++++++++++++++++------
src/hub.html | 11 ++++++----
src/network-schemas.js | 8 +++----
src/react-components/ui-root.js | 1 -
4 files changed, 43 insertions(+), 15 deletions(-)
diff --git a/src/components/hand-poses.js b/src/components/hand-poses.js
index 16d1f1479..ae717a445 100644
--- a/src/components/hand-poses.js
+++ b/src/components/hand-poses.js
@@ -11,13 +11,32 @@ const POSES = {
const NETWORK_POSES = ["allOpen", "thumbDown", "indexDown", "mrpDown", "thumbsUp", "point", "allGrip", "pinch"];
-AFRAME.registerComponent("hand-pose", {
+AFRAME.registerComponent("hand-pose-state", {
multiple: true,
schema: {
pose: { default: 0 }
},
+ init() {
+ this.setSelfAsStore = this.setSelfAsStore.bind(this);
+ this.setSelfAsStore();
+ },
+ setSelfAsStore() {
+ let poseEl = this.el.querySelector(`[hand-pose__${this.id}]`);
+ if (!poseEl) {
+ window.setTimeout(() => {
+ this.setSelfAsStore();
+ }, 3000);
+ return;
+ }
+ poseEl.components[`hand-pose__${this.id}`].store = this;
+ }
+});
+
+AFRAME.registerComponent("hand-pose", {
+ multiple: true,
init() {
+ this.pose = 0;
this.animatePose = this.animatePose.bind(this);
this.mixer = this.el.components["animation-mixer"];
const object3DMap = this.mixer.el.object3DMap;
@@ -28,9 +47,11 @@ AFRAME.registerComponent("hand-pose", {
this.from.play();
},
- update(oldData) {
- if (oldData.pose != this.data.pose) {
- this.animatePose(NETWORK_POSES[oldData.pose || 0], NETWORK_POSES[this.data.pose]);
+ 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;
}
},
@@ -55,7 +76,8 @@ AFRAME.registerComponent("hand-pose", {
AFRAME.registerComponent("hand-pose-controller", {
multiple: true,
schema: {
- eventSrc: { type: "selector" }
+ eventSrc: { type: "selector" },
+ store: { type: "selector" }
},
init: function() {
this.setHandPose = this.setHandPose.bind(this);
@@ -70,6 +92,10 @@ AFRAME.registerComponent("hand-pose-controller", {
},
setHandPose: function(evt) {
- this.el.setAttribute(`hand-pose__${this.id}`, "pose", NETWORK_POSES.indexOf(POSES[evt.detail.current]));
+ this.data.store.setAttribute(
+ `hand-pose-state__${this.id}`,
+ "pose",
+ NETWORK_POSES.indexOf(POSES[evt.detail.current])
+ );
}
});
diff --git a/src/hub.html b/src/hub.html
index edb7395d4..c90b81e03 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -62,7 +62,7 @@
<a-entity class="right-controller"></a-entity>
- <a-entity class="model" gltf-model-plus="inflate: true">
+ <a-entity class="model" hand-pose-state__left hand-pose-state__right 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>
@@ -224,15 +224,18 @@
app-mode-toggle-attribute__line="mode: hud; property: visible;"
></a-entity>
- <a-entity gltf-model-plus="inflate: true;" class="model">
+ <a-entity gltf-model-plus="inflate: true;"
+ hand-pose-state__left
+ hand-pose-state__right
+ class="model">
<template data-selector=".RootScene">
<a-entity
ik-controller
animation-mixer
hand-pose__left
hand-pose__right
- hand-pose-controller__left="eventSrc:#player-left-controller"
- hand-pose-controller__right="eventSrc:#player-right-controller"
+ 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"
></a-entity>
</template>
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 822951bed..00e212c21 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -10,13 +10,13 @@ function registerNetworkSchemas() {
"scale",
"player-info",
{
- selector: ".RootScene",
- component: "hand-pose__left",
+ selector: ".model",
+ component: "hand-pose-state__left",
property: "pose"
},
{
- selector: ".RootScene",
- component: "hand-pose__right",
+ selector: ".model",
+ component: "hand-pose-state__right",
property: "pose"
},
{
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 512cb62c1..6e575dcfa 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -103,7 +103,6 @@ class UIRoot extends Component {
componentDidMount() {
this.setupTestTone();
- this.props.concurrentLoadDetector.addEventListener("concurrentload", this.onConcurrentLoad);
this.micLevelMovingAverage = MovingAverage(100);
this.props.scene.addEventListener("loaded", this.onSceneLoaded);
this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
--
GitLab