diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss index fd787680d7ad82635d44c913f83000d3f92a90ff..ce859513782b721503e84524360b2496b271f9bf 100644 --- a/src/assets/stylesheets/entry.scss +++ b/src/assets/stylesheets/entry.scss @@ -10,15 +10,19 @@ :local(.collapse) { @extend %fa-icon-button; position: absolute; - top: 4px; - right: 24px; + top: 0px; + right: 12px; + width: 32px; + height: 32px; } :local(.expand) { @extend %fa-icon-button; position: absolute; - top: -32px; - right: 24px; + top: -48px; + right: 12px; + width: 32px; + height: 32px; } } diff --git a/src/assets/stylesheets/hub.scss b/src/assets/stylesheets/hub.scss index e24bf7f06dd6c27231971ce03e244ac829087d7c..8ce382b26542abc5df4cc138c0846035c700f81a 100644 --- a/src/assets/stylesheets/hub.scss +++ b/src/assets/stylesheets/hub.scss @@ -13,11 +13,14 @@ display: none; } +.grab-cursor { + cursor: grab; +} + .no-cursor { cursor: none; } - .webxr-realities, .webxr-sessions { @extend %unselectable } diff --git a/src/hub.html b/src/hub.html index 19a8282eab596478712464d1a9bef2fb95be8a8b..16dd5bdade66eef08ede23d13c7e104b49847882 100644 --- a/src/hub.html +++ b/src/hub.html @@ -21,6 +21,7 @@ </audio> <a-scene + class="grab-cursor" renderer="antialias: true; gammaOutput: true; sortObjects: true; physicallyCorrectLights: true;" gamma-factor networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;" diff --git a/src/hub.js b/src/hub.js index 2a7df3cb62f87e1685ec14ca86323e60c6249fa9..08e391ac9658812022f0f9003c79c1edcf2c86a6 100644 --- a/src/hub.js +++ b/src/hub.js @@ -294,6 +294,8 @@ document.addEventListener("DOMContentLoaded", () => { const scene = document.querySelector("a-scene"); const hubChannel = new HubChannel(store); const entryManager = new SceneEntryManager(hubChannel); + entryManager.init(); + const linkChannel = new LinkChannel(store); window.APP.scene = scene; diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js index 999075799c2b97cbd92241f2352b676b86549f94..adbc63e1449a57216c556b726d31945b4283899c 100644 --- a/src/scene-entry-manager.js +++ b/src/scene-entry-manager.js @@ -21,9 +21,16 @@ export default class SceneEntryManager { this.hubChannel = hubChannel; this.store = window.APP.store; this.scene = document.querySelector("a-scene"); + this.cursorController = document.querySelector("#cursor-controller"); this.playerRig = document.querySelector("#player-rig"); } + init = () => { + this.whenSceneLoaded(() => { + this.cursorController.components["cursor-controller"].disable(); + }); + }; + enterScene = async (mediaStream, enterInVR) => { const playerCamera = document.querySelector("#player-camera"); playerCamera.removeAttribute("scene-preview-camera"); @@ -68,23 +75,30 @@ export default class SceneEntryManager { return; } + this.scene.classList.remove("hand-cursor"); this.scene.classList.add("no-cursor"); + const cursor = this.cursorController.components["cursor-controller"]; + cursor.enable(); + cursor.setCursorVisibility(true); + this.hubChannel.sendEntryEvent().then(() => { this.store.update({ activity: { lastEnteredAt: new Date().toISOString() } }); }); }; - enterSceneWhenLoaded = (mediaStream, enterInVR) => { - const enterSceneImmediately = () => this.enterScene(mediaStream, enterInVR); - + whenSceneLoaded = callback => { if (this.scene.hasLoaded) { - enterSceneImmediately(); + callback(); } else { - this.scene.addEventListener("loaded", enterSceneImmediately); + this.scene.addEventListener("loaded", callback); } }; + enterSceneWhenLoaded = (mediaStream, enterInVR) => { + this.whenSceneLoaded(() => this.enterScene(mediaStream, enterInVR)); + }; + exitScene = () => { if (NAF.connection.adapter && NAF.connection.adapter.localMediaStream) { NAF.connection.adapter.localMediaStream.getTracks().forEach(t => t.stop());