From 645c22ca41a20aecf27f55ebba188513ba99c3b3 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Fri, 13 Oct 2017 14:53:18 -0700
Subject: [PATCH] Move all input handling to aframe-input-mapping-component
---
package.json | 1 +
public/index.html | 19 +++++++++++++++----
src/components/snap-rotation.js | 25 +++++++++----------------
src/index.js | 26 ++++++++++++++++++++++++++
yarn.lock | 4 ++++
5 files changed, 55 insertions(+), 20 deletions(-)
diff --git a/package.json b/package.json
index 9ff615051..f3c528aa7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"build": "webpack"
},
"dependencies": {
+ "aframe-input-mapping-component": "https://github.com/fernandojsg/aframe-input-mapping-component",
"aframe-teleport-controls": "^0.3.0",
"easyrtc": "^1.1.0",
"express": "^4.15.5",
diff --git a/public/index.html b/public/index.html
index d6ec86c70..123f8b1cb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
<title>A-Frame Social VR Demo</title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
+
<script src="easyrtc/easyrtc.js"></script>
<script src="./app.bundle.js"></script>
</head>
@@ -14,7 +15,7 @@
audio: true;
debug: true;
connectOnLoad: false"
- mute-mic="eventSrc: #right-hand; toggleEvents: menudown, xbuttondown">
+ mute-mic="eventSrc: #right-hand; toggleEvents: action_mute">
<a-assets>
<img id="grid" src="assets/grid.png" crossorigin="anonymous">
<img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
@@ -50,7 +51,11 @@
</script>
</a-assets>
- <a-entity id="player-rig" networked wasd-controls snap-rotation="leftEventSrc: #right-hand; rightEventSrc: #right-hand; pivotSrc: #head">
+ <a-entity
+ id="player-rig"
+ networked
+ wasd-controls
+ snap-rotation="pivotSrc: #head">
<a-entity
id="head"
camera="userHeight: 1.6"
@@ -63,20 +68,26 @@
<a-entity
id="left-hand"
+
vive-controls="hand: left"
oculus-touch-controls="hand: left"
+ daydream-controls
+ gearvr-controls
+
axis-dpad="centerZone: 1"
- teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+ teleport-controls="cameraRig: #player-rig; button: action_teleport_"
networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
<a-entity
id="right-hand"
+
vive-controls="hand: right"
oculus-touch-controls="hand: right"
daydream-controls
gearvr-controls
+
axis-dpad
- teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+ teleport-controls="cameraRig: #player-rig; button: action_teleport_"
networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
</a-entity>
diff --git a/src/components/snap-rotation.js b/src/components/snap-rotation.js
index d80ef742f..808acb7b6 100644
--- a/src/components/snap-rotation.js
+++ b/src/components/snap-rotation.js
@@ -1,8 +1,7 @@
/**
* @fileOverview
- * Rotate an entity in fixed increments based on events or keyboard input
+ * Rotate an entity in fixed increments based on events
* @name snap-rotation.js
- * @TODO pull keyboard input out into a component that just emits events
* @TODO allow specifying multiple events and sources
*/
@@ -11,14 +10,12 @@ AFRAME.registerComponent("snap-rotation", {
rotationAxis: { type: "vec3", default: { x: 0, y: 1, z: 0 } },
rotationDegres: { default: 45 },
- leftKey: { default: "q" },
- leftEvent: { default: "dpadleftdown" },
- leftEventSrc: { type: "selector" },
+ leftEvent: { default: "action_snap_rotate_left" },
+ leftEventSrc: { type: "selector", default: "a-scene" },
+
+ rightEvent: { default: "action_snap_rotate_right" },
+ rightEventSrc: { type: "selector", default: "a-scene" },
- rightKey: { default: "e" },
- rightEvent: { default: "dpadrightdown" },
- rightEventSrc: { type: "selector" },
-
pivotSrc: { type: "selector" }
},
@@ -27,7 +24,7 @@ AFRAME.registerComponent("snap-rotation", {
},
update: function() {
- const {rotationAxis, rotationDegres} = this.data;
+ const { rotationAxis, rotationDegres } = this.data;
const angle = rotationDegres * THREE.Math.DEG2RAD;
this.lRotMat = new THREE.Matrix4().makeRotationAxis(rotationAxis, angle);
@@ -36,7 +33,6 @@ AFRAME.registerComponent("snap-rotation", {
play: function() {
const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
- window.addEventListener("keypress", this.onButtonPressed);
rightEventSrc &&
rightEventSrc.addEventListener(rightEvent, this.onButtonPressed);
leftEventSrc &&
@@ -45,7 +41,6 @@ AFRAME.registerComponent("snap-rotation", {
pause: function() {
const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
- window.removeEventListener("keypress", this.onButtonPRessed);
rightEventSrc &&
rightEventSrc.removeEventListener(rightEvent, this.onButtonPressed);
leftEventSrc &&
@@ -61,17 +56,15 @@ AFRAME.registerComponent("snap-rotation", {
const {
rotationAxis,
rotationDegres,
- leftKey,
leftEvent,
- rightKey,
rightEvent,
pivotSrc
} = this.data;
var rot;
- if (e.type === leftEvent || (leftKey && e.key === leftKey)) {
+ if (e.type === leftEvent) {
rot = this.lRotMat;
- } else if (e.type === rightEvent || (rightKey && e.key === rightKey)) {
+ } else if (e.type === rightEvent) {
rot = this.rRotMat;
} else {
return;
diff --git a/src/index.js b/src/index.js
index 1c226e589..1c0ad57d8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
import "networked-aframe";
import "aframe-teleport-controls";
+import "aframe-input-mapping-component";
import "./components/axis-dpad";
import "./components/snap-rotation";
@@ -21,6 +22,31 @@ NAF.schemas.add({
]
});
+AFRAME.registerInputMappings({
+ default: {
+ common: {
+ // @TODO these dpad events are emmited by an axis-dpad component. This should probalby move into either tracked-controller or input-mapping
+ dpadleftdown: "action_snap_rotate_left",
+ dpadrightdown: "action_snap_rotate_right",
+ dpadcenterdown: "action_teleport_down", // @TODO once once #30 lands in aframe-teleport controls this just maps to "action_teleport_aim"
+ dpadcenterup: "action_teleport_up" // @TODO once once #30 lands in aframe-teleport controls this just maps to "action_teleport_teleport"
+ },
+ "vive-controls": {
+ menudown: "action_mute"
+ },
+ "oculus-touch-controls": {
+ xbuttondown: "action_mute"
+ },
+ daydream: {
+ menudown: "action_mute"
+ },
+ keyboard: {
+ m_press: "action_mute",
+ q_press: "action_snap_rotate_left",
+ e_press: "action_snap_rotate_right"
+ }
+ }
+});
window.onSceneLoad = function() {
var username = generateName();
do {
diff --git a/yarn.lock b/yarn.lock
index 5a60e56fe..5abfe97ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38,6 +38,10 @@ acorn@^5.0.0:
version "5.1.2"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+"aframe-input-mapping-component@https://github.com/fernandojsg/aframe-input-mapping-component":
+ version "1.0.0"
+ resolved "https://github.com/fernandojsg/aframe-input-mapping-component#577cadad5a42e7216843dfeca9770fa8be465e09"
+
aframe-lerp-component@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/aframe-lerp-component/-/aframe-lerp-component-1.1.0.tgz#dc8c12c53698770c30f25eef8873e34a4e79c765"
--
GitLab