Skip to content
Snippets Groups Projects
Commit 7e59a676 authored by joni's avatar joni
Browse files

Only create event listeners for the platform you're on.

parent 42d811f2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/cursor-controller.js
+ 1
− 2
View file @ 7e59a676
...@@ -126,7 +126,6 @@ AFRAME.registerComponent("cursor-controller", { ...@@ -126,7 +126,6 @@ AFRAME.registerComponent("cursor-controller", {
.applyQuaternion(this.controllerQuaternion) .applyQuaternion(this.controllerQuaternion)
.normalize(); .normalize();
} }
this.el.setAttribute("raycaster", { origin: this.origin, direction: this.direction }); this.el.setAttribute("raycaster", { origin: this.origin, direction: this.direction });
let intersection = null; let intersection = null;
...@@ -293,7 +292,7 @@ AFRAME.registerComponent("cursor-controller", { ...@@ -293,7 +292,7 @@ AFRAME.registerComponent("cursor-controller", {
_updateController: function() { _updateController: function() {
this.hasPointingDevice = this.controllerQueue.length > 0 && this.inVR; this.hasPointingDevice = this.controllerQueue.length > 0 && this.inVR;
this.setCursorVisibility(this.hasPointingDevice || this.isMobile); this.setCursorVisibility(this.hasPointingDevice || this.isMobile || (!this.isMobile && !this.inVR));
if (this.hasPointingDevice) { if (this.hasPointingDevice) {
const controllerData = this.controllerQueue[0]; const controllerData = this.controllerQueue[0];
......
src/hub.js
+ 67
− 15
View file @ 7e59a676
...@@ -124,7 +124,8 @@ import { generateDefaultProfile, generateRandomName } from "./utils/identity.js" ...@@ -124,7 +124,8 @@ import { generateDefaultProfile, generateRandomName } from "./utils/identity.js"
import { getAvailableVREntryTypes, VR_DEVICE_AVAILABILITY } from "./utils/vr-caps-detect.js"; import { getAvailableVREntryTypes, VR_DEVICE_AVAILABILITY } from "./utils/vr-caps-detect.js";
import ConcurrentLoadDetector from "./utils/concurrent-load-detector.js"; import ConcurrentLoadDetector from "./utils/concurrent-load-detector.js";
import TouchEventsHandler from "./utils/touch-events-handler.js"; import TouchEventsHandler from "./utils/touch-events-handler.js";
import { MouseEventsHandler, GearVRMouseEventsHandler } from "./utils/mouse-events-handler.js"; import MouseEventsHandler from "./utils/mouse-events-handler.js";
import GearVRMouseEventsHandler from "./utils/gearvr-mouse-events-handler.js";
import PrimaryActionHandler from "./utils/primary-action-handler.js"; import PrimaryActionHandler from "./utils/primary-action-handler.js";
function qsTruthy(param) { function qsTruthy(param) {
...@@ -230,6 +231,7 @@ const onReady = async () => { ...@@ -230,6 +231,7 @@ const onReady = async () => {
const enterScene = async (mediaStream, enterInVR, hubId) => { const enterScene = async (mediaStream, enterInVR, hubId) => {
const scene = document.querySelector("a-scene"); const scene = document.querySelector("a-scene");
scene.style.cursor = "none";
scene.renderer.sortObjects = true; scene.renderer.sortObjects = true;
const playerRig = document.querySelector("#player-rig"); const playerRig = document.querySelector("#player-rig");
document.querySelector("canvas").classList.remove("blurred"); document.querySelector("canvas").classList.remove("blurred");
...@@ -237,6 +239,40 @@ const onReady = async () => { ...@@ -237,6 +239,40 @@ const onReady = async () => {
if (enterInVR) { if (enterInVR) {
scene.enterVR(); scene.enterVR();
if (isMobile) {
// Set up GearVR event handling
// TODO: Only use this when using gearvr
window.APP.gearvrMouseEventsHandler = new GearVRMouseEventsHandler();
const teleportEl = document.querySelector("#gaze-teleport");
if (teleportEl && teleportEl.components && teleportEl.components["teleport-controls"]) {
const teleportControls = teleportEl.components["teleport-controls"];
window.APP.gearvrMouseEventsHandler.registerGazeTeleporter(teleportControls);
} else {
const registerTeleporter = e => {
if (e.detail.name !== "teleport-controls") return;
teleportEl.removeEventListener("componentinitialized", registerTeleporter);
const teleportControls = teleportEl.components["teleport-controls"];
window.APP.gearvrMouseEventsHandler.registerGazeTeleporter(teleportControls);
};
teleportEl.addEventListener("componentinitialized", registerTeleporter);
}
const cursorEl = document.querySelector("#cursor-controller");
if (cursorEl && cursorEl.components && cursorEl.components["cursor-controller"]) {
const cursor = cursorEl.components["cursor-controller"];
window.APP.gearvrMouseEventsHandler.registerCursor(cursor);
} else {
const registerCursor = e => {
if (e.detail.name !== "cursor-controller") return;
cursorEl.removeEventListener("componentinitialized", registerCursor);
const cursor = cursorEl.components["cursor-controller"];
window.APP.gearvrMouseEventsHandler.registerCursor(cursor);
};
cursorEl.addEventListener("componentinitialized", registerCursor);
}
}
// Set up event handling for anything emitting "action_primary_down/up" and "action_grab/release"
window.APP.primaryActionHandler = new PrimaryActionHandler(scene); window.APP.primaryActionHandler = new PrimaryActionHandler(scene);
const cursorEl = document.querySelector("#cursor-controller"); const cursorEl = document.querySelector("#cursor-controller");
...@@ -246,27 +282,34 @@ const onReady = async () => { ...@@ -246,27 +282,34 @@ const onReady = async () => {
} else { } else {
const registerCursor = e => { const registerCursor = e => {
if (e.detail.name !== "cursor-controller") return; if (e.detail.name !== "cursor-controller") return;
cursorEl.removeEventListener("componentinitialized", registerCursor);
const cursor = cursorEl.components["cursor-controller"]; const cursor = cursorEl.components["cursor-controller"];
window.APP.primaryActionHandler.registerCursor(cursor); window.APP.primaryActionHandler.registerCursor(cursor);
}; };
cursorEl.addEventListener("componentinitialized", registerCursor); cursorEl.addEventListener("componentinitialized", registerCursor);
} }
} else { } else {
window.APP.touchEventsHandler = new TouchEventsHandler(); if (isMobile) {
window.APP.mouseEventsHandler = new MouseEventsHandler(); window.APP.touchEventsHandler = new TouchEventsHandler();
window.APP.gearvrMouseEventsHandler = new GearVRMouseEventsHandler(); // TODO: Use when gearvr is detected } else {
window.APP.mouseEventsHandler = new MouseEventsHandler();
}
const camera = document.querySelector("#player-camera"); const camera = document.querySelector("#player-camera");
const registerCameraController = e => { const registerCameraController = e => {
if (e.detail.name !== "camera-controller") return; if (e.detail.name !== "camera-controller") return;
camera.removeEventListener("componentinitialized", registerCameraController); camera.removeEventListener("componentinitialized", registerCameraController);
window.APP.touchEventsHandler.registerCameraController(camera.components["camera-controller"]); if (window.APP.touchEventsHandler) {
scene.components["look-on-mobile"].registerCameraController(camera.components["camera-controller"]); window.APP.touchEventsHandler.registerCameraController(camera.components["camera-controller"]);
scene.setAttribute("look-on-mobile", "enabled", true); scene.components["look-on-mobile"].registerCameraController(camera.components["camera-controller"]);
scene.setAttribute("look-on-mobile", "enabled", true);
}
window.APP.mouseEventsHandler.registerCameraController(camera.components["camera-controller"]); if (window.APP.mouseEventsHandler) {
window.APP.mouseEventsHandler.setInverseMouseLook(qsTruthy("invertMouseLook")); window.APP.mouseEventsHandler.registerCameraController(camera.components["camera-controller"]);
window.APP.mouseEventsHandler.setInverseMouseLook(qsTruthy("invertMouseLook"));
}
}; };
camera.addEventListener("componentinitialized", registerCameraController); camera.addEventListener("componentinitialized", registerCameraController);
camera.setAttribute("camera-controller", "foo", "bar"); camera.setAttribute("camera-controller", "foo", "bar");
...@@ -274,16 +317,25 @@ const onReady = async () => { ...@@ -274,16 +317,25 @@ const onReady = async () => {
const cursorEl = document.querySelector("#cursor-controller"); const cursorEl = document.querySelector("#cursor-controller");
if (cursorEl && cursorEl.components && cursorEl.components["cursor-controller"]) { if (cursorEl && cursorEl.components && cursorEl.components["cursor-controller"]) {
const cursor = cursorEl.components["cursor-controller"]; const cursor = cursorEl.components["cursor-controller"];
window.APP.touchEventsHandler.registerPinchEmitter(cursorEl); if (window.APP.touchEventsHandler) {
window.APP.touchEventsHandler.registerCursor(cursor); window.APP.touchEventsHandler.registerPinchEmitter(cursorEl);
window.APP.mouseEventsHandler.registerCursor(cursor); window.APP.touchEventsHandler.registerCursor(cursor);
}
if (window.APP.mouseEventsHandler) {
window.APP.mouseEventsHandler.registerCursor(cursor);
}
} else { } else {
const registerCursor = e => { const registerCursor = e => {
if (e.detail.name !== "cursor-controller") return; if (e.detail.name !== "cursor-controller") return;
cursorEl.removeEventListener("componentinitialized", registerCursor);
const cursor = cursorEl.components["cursor-controller"]; const cursor = cursorEl.components["cursor-controller"];
window.APP.touchEventsHandler.registerPinchEmitter(cursorEl); if (window.APP.touchEventsHandler) {
window.APP.touchEventsHandler.registerCursor(cursor); window.APP.touchEventsHandler.registerPinchEmitter(cursorEl);
window.APP.mouseEventsHandler.registerCursor(cursor); window.APP.touchEventsHandler.registerCursor(cursor);
}
if (window.APP.mouseEventsHandler) {
window.APP.mouseEventsHandler.registerCursor(cursor);
}
}; };
cursorEl.addEventListener("componentinitialized", registerCursor); cursorEl.addEventListener("componentinitialized", registerCursor);
} }
......
src/utils/gearvr-mouse-events-handler.js 0 → 100644
+ 62
− 0
View file @ 7e59a676
export default class GearVRMouseEventsHandler {
constructor() {
this.cursor = null;
this.gazeTeleporter = null;
this.isMouseDownHandledByCursor = false;
this.isMouseDownHandledByGazeTeleporter = false;
this.registerCursor = this.registerCursor.bind(this);
this.registerGazeTeleporter = this.registerGazeTeleporter.bind(this);
this.isReady = this.isReady.bind(this);
this.addEventListeners = this.addEventListeners.bind(this);
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
}
registerCursor(cursor) {
this.cursor = cursor;
if (this.isReady()) {
this.addEventListeners();
}
}
registerGazeTeleporter(gazeTeleporter) {
this.gazeTeleporter = gazeTeleporter;
if (this.isReady()) {
this.addEventListeners();
}
}
isReady() {
return this.cursor && this.gazeTeleporter;
}
addEventListeners() {
document.addEventListener("mousedown", this.onMouseDown);
document.addEventListener("mouseup", this.onMouseUp);
}
onMouseDown() {
this.isMouseDownHandledByCursor = this.cursor.startInteraction();
if (this.isMouseDownHandledByCursor) {
return;
}
const button = this.gazeTeleporter.data.button;
this.gazeTeleporter.el.emit(button + "down");
this.isMouseDownHandledByGazeTeleporter = true;
}
onMouseUp() {
if (this.isMouseDownHandledByCursor) {
this.cursor.endInteraction();
this.isMouseDownHandledByCursor = false;
}
if (this.isMouseDownHandledByGazeTeleporter) {
const button = this.gazeTeleporter.data.button;
this.gazeTeleporter.el.emit(button + "up");
this.isMouseDownHandledByGazeTeleporter = false;
}
}
}
src/utils/mouse-events-handler.js
+ 1
− 63
View file @ 7e59a676
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
const HORIZONTAL_LOOK_SPEED = 0.1; const HORIZONTAL_LOOK_SPEED = 0.1;
const VERTICAL_LOOK_SPEED = 0.06; const VERTICAL_LOOK_SPEED = 0.06;
export class MouseEventsHandler { export default class MouseEventsHandler {
constructor() { constructor() {
this.cursor = null; this.cursor = null;
this.cameraController = null; this.cameraController = null;
...@@ -113,65 +113,3 @@ export class MouseEventsHandler { ...@@ -113,65 +113,3 @@ export class MouseEventsHandler {
this.cameraController.look(deltaPitch, deltaYaw); this.cameraController.look(deltaPitch, deltaYaw);
} }
} }
//TODO: Finish gearvr mouse events handler
export class GearVRMouseEventsHandler {
constructor() {
this.cursor = null;
this.gazeTeleporter = null;
this.isMouseDownHandledByCursor = false;
this.isMouseDownHandledByGazeTeleporter = false;
this.registerCursor = this.registerCursor.bind(this);
this.registerGazeTeleporter = this.registerGazeTeleporter.bind(this);
this.isReady = this.isReady.bind(this);
this.addEventListeners = this.addEventListeners.bind(this);
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
}
registerCursor(cursor) {
this.cursor = cursor;
if (this.isReady()) {
this.addEventListeners();
}
}
registerGazeTeleporter(gazeTeleporter) {
this.gazeTeleporter = gazeTeleporter;
if (this.isReady()) {
this.addEventListeners();
}
}
isReady() {
return this.cursor && this.gazeTeleporter;
}
addEventListeners() {
document.addEventListener("mousedown", this.onMouseDown);
document.addEventListener("mouseup", this.onMouseUp);
}
onMouseDown() {
this.isMouseDownHandledByCursor = this.cursor.startInteraction();
if (this.isMouseDownHandledByCursor) {
return;
}
this.gazeTeleporter.startTeleport();
this.isMouseDownHandledByGazeTeleporter = true;
}
onMouseUp() {
if (this.isMouseDownHandledByCursor) {
this.cursor.endInteraction();
this.isMouseDownHandledByCursor = false;
}
if (this.isMouseDownHandledByGazeTeleporter) {
this.gazeTeleporter.endTeleport();
this.isMouseDownHandledByGazeTeleporter = false;
}
}
}
src/utils/touch-events-handler.js
+ 0
− 2
View file @ 7e59a676
...@@ -2,7 +2,6 @@ const VIRTUAL_JOYSTICK_HEIGHT = 0.8; ...@@ -2,7 +2,6 @@ const VIRTUAL_JOYSTICK_HEIGHT = 0.8;
const HORIZONTAL_LOOK_SPEED = 0.35; const HORIZONTAL_LOOK_SPEED = 0.35;
const VERTICAL_LOOK_SPEED = 0.18; const VERTICAL_LOOK_SPEED = 0.18;
//TODO: Oculus Touch controls emit touch events (wat), so we have to filter those out.
export default class TouchEventsHandler { export default class TouchEventsHandler {
constructor() { constructor() {
this.cursor = null; this.cursor = null;
...@@ -63,7 +62,6 @@ export default class TouchEventsHandler { ...@@ -63,7 +62,6 @@ export default class TouchEventsHandler {
} }
handleTouchStart(e) { handleTouchStart(e) {
console.log(e);
this.cursor.setCursorVisibility(false); this.cursor.setCursorVisibility(false);
Array.prototype.forEach.call(e.changedTouches, this.singleTouchStart); Array.prototype.forEach.call(e.changedTouches, this.singleTouchStart);
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment