From 88a00688a8ac5ffbee5191596b5c21dbbdb26c60 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Thu, 10 May 2018 19:24:16 -0700
Subject: [PATCH] Add pitch rotation to right virtual joystick.
---
src/components/virtual-gamepad-controls.js | 13 ++++++++++---
src/hub.js | 1 -
src/utils/look-controls-toggle.js | 2 +-
src/utils/pointer-look-controls.js | 19 +++++++++++++------
4 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/src/components/virtual-gamepad-controls.js b/src/components/virtual-gamepad-controls.js
index 5b45d07cb..44843532d 100644
--- a/src/components/virtual-gamepad-controls.js
+++ b/src/components/virtual-gamepad-controls.js
@@ -72,6 +72,9 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
this.rotateYEvent = {
value: 0
};
+ this.rotateXEvent = {
+ value: 0
+ };
this.el.sceneEl.addEventListener("enter-vr", this.onEnterVr);
this.el.sceneEl.addEventListener("exit-vr", this.onExitVr);
@@ -86,8 +89,8 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
onMoveJoystickChanged(event, joystick) {
const angle = joystick.angle.radian;
const force = joystick.force < 1 ? joystick.force : 1;
- const x = Math.cos(angle) * force;
- const z = Math.sin(angle) * force;
+ const x = Math.cos(angle) * force * 0.85;
+ const z = Math.sin(angle) * force * 0.85;
this.moving = true;
this.moveEvent.axis[0] = x;
this.moveEvent.axis[1] = z;
@@ -105,13 +108,16 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
const angle = joystick.angle.radian;
const force = joystick.force < 1 ? joystick.force : 1;
this.rotating = true;
- this.rotateYEvent.value = Math.cos(angle) * force;
+ this.rotateYEvent.value = Math.cos(angle) * force * 0.5;
+ this.rotateXEvent.value = Math.sin(angle) * force * 0.5;
},
onLookJoystickEnd() {
this.rotating = false;
this.rotateYEvent.value = 0;
+ this.rotateXEvent.value = 0;
this.el.sceneEl.emit("rotateY", this.rotateYEvent);
+ this.el.sceneEl.emit("rotateX", this.rotateXEvent);
},
tick() {
@@ -122,6 +128,7 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
if (this.rotating) {
this.el.sceneEl.emit("rotateY", this.rotateYEvent);
+ this.el.sceneEl.emit("rotateX", this.rotateXEvent);
}
}
},
diff --git a/src/hub.js b/src/hub.js
index 12e948166..de956a122 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -226,7 +226,6 @@ const onReady = async () => {
scene.renderer.sortObjects = true;
const pinch = new Pinch(scene);
const pinchToMove = new PinchToMove(scene);
- window.p = pinchToMove;
const playerRig = document.querySelector("#player-rig");
document.querySelector("a-scene canvas").classList.remove("blurred");
scene.render();
diff --git a/src/utils/look-controls-toggle.js b/src/utils/look-controls-toggle.js
index d7f21347e..0a80ef87e 100644
--- a/src/utils/look-controls-toggle.js
+++ b/src/utils/look-controls-toggle.js
@@ -8,7 +8,7 @@ export default class LookControlsToggle {
}
allAgreeToEnable() {
- for (let i in this.requesters) {
+ for (const i in this.requesters) {
if (!this.requesters[i]) {
return false;
}
diff --git a/src/utils/pointer-look-controls.js b/src/utils/pointer-look-controls.js
index 78b23bbc6..227706edb 100644
--- a/src/utils/pointer-look-controls.js
+++ b/src/utils/pointer-look-controls.js
@@ -1,4 +1,4 @@
-const PI_2 = Math.PI / 2;
+const PI_4 = Math.PI / 4;
export default class PointerLookControls {
constructor(lookControlsEl) {
this.xSpeed = 0.005;
@@ -9,6 +9,7 @@ export default class PointerLookControls {
this.onTouchEnd = this.onTouchEnd.bind(this);
this.getLookControls = this.getLookControls.bind(this);
this.removeTouch = this.removeTouch.bind(this);
+ this.onRotateX = this.onRotateX.bind(this);
this.usedTouch = { identifier: -1 };
document.addEventListener("touch-used-by-cursor", ev => {
const touch = ev.detail;
@@ -26,6 +27,13 @@ export default class PointerLookControls {
document.addEventListener("touchmove", this.onTouchMove);
document.addEventListener("touchend", this.onTouchEnd);
document.addEventListener("touchcancel", this.onTouchEnd);
+ AFRAME.scenes[0].sceneEl.addEventListener("rotateX", this.onRotateX);
+ }
+
+ onRotateX(e) {
+ const dY = e.detail.value;
+ this.pitchObject.rotation.x += dY * 0.02;
+ this.pitchObject.rotation.x = Math.max(-PI_4, Math.min(PI_4, this.pitchObject.rotation.x));
}
getLookControls() {
@@ -47,7 +55,7 @@ export default class PointerLookControls {
onTouchStart(ev) {
for (let i = 0; i < ev.touches.length; i++) {
- let touch = ev.touches[i];
+ const touch = ev.touches[i];
if (touch.identifier === this.usedTouch.identifier || touch.clientY / window.innerHeight >= 0.8) {
continue;
}
@@ -56,16 +64,15 @@ export default class PointerLookControls {
onTouchMove(ev) {
const cache = this.cache;
- this.foo = !!this.foo ? this.foo + 1 : 1;
for (let i = 0; i < ev.touches.length; i++) {
- let touch = ev.touches[i];
+ const touch = ev.touches[i];
if (touch.identifier === this.usedTouch.identifier || touch.clientY / window.innerHeight >= 0.8) {
continue;
}
let cachedTouch = null;
- for (var j = 0; j < cache.length; j++) {
+ for (let j = 0; j < cache.length; j++) {
if (touch.identifier === cache[j].identifier) {
cachedTouch = cache[j];
cache[j] = touch;
@@ -85,7 +92,7 @@ export default class PointerLookControls {
this.yawObject.rotation.y -= dX * this.xSpeed;
this.pitchObject.rotation.x -= dY * this.ySpeed;
- this.pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, this.pitchObject.rotation.x));
+ this.pitchObject.rotation.x = Math.max(-PI_4, Math.min(PI_4, this.pitchObject.rotation.x));
}
}
--
GitLab