diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js index b3bf2418f788b996e765a5b13d61aa1fc13f2309..0475c698168cdcf4f0fe76fec9de6999782fdf6b 100644 --- a/src/components/in-world-hud.js +++ b/src/components/in-world-hud.js @@ -1,6 +1,7 @@ AFRAME.registerComponent("in-world-hud", { schema: { - haptic: { type: "selector" } + haptic: { type: "selector" }, + raycaster: { type: "selector" } }, init() { this.bg = this.el.querySelector(".bg"); @@ -8,6 +9,7 @@ AFRAME.registerComponent("in-world-hud", { this.nametag = this.el.querySelector(".nametag"); this.nametag.object3DMap.text.material.depthTest = false; this.avatar = this.el.querySelector(".avatar"); + this.data.raycaster.components.line.material.depthTest = false; const muted = this.el.sceneEl.is("muted"); this.mic.setAttribute("src", muted ? "#muted" : "#unmuted"); diff --git a/src/room.html b/src/room.html index 435e8f553f53b4ec29d73c6dd2fba42ecd10c683..a746813c23d3eef555d7482618693271523cf534 100644 --- a/src/room.html +++ b/src/room.html @@ -104,15 +104,6 @@ mode-responder-toggle__character-controller="mode: hud; invert: true;" ik-root > - <a-entity id="player-hud"> - <a-entity in-world-hud="haptic:#player-right-controller" rotation="-39.01000608674482 0 0"> - <a-box geometry="height:0.13;width:0.6;depth:0.001" material="depthTest:false; color:#000000;opacity:0.35" class="hud bg"></a-box> - <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;depthTest:false;" geometry=""></a-image> - <a-text scale="0.3 0.3 0.3" position="-0.12 0 0.001" class="hud nametag" text="width:6;alphaTest:0.1"></a-text> - <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="depthTest:false;" geometry=""></a-image> - </a-entity> - </a-entity> - <a-entity id="player-camera" class="camera" @@ -134,6 +125,16 @@ haptic-feedback ></a-entity> + + <a-entity id="player-hud"> + <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="-39.01000608674482 0 0"> + <a-box geometry="height:0.13;width:0.6;depth:0.001" material="depthTest:false; color:#000000;opacity:0.35" class="hud bg"></a-box> + <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;depthTest:false;" geometry=""></a-image> + <a-text scale="0.3 0.3 0.3" position="-0.12 0 0.001" class="hud nametag" text="width:6;alphaTest:0.1"></a-text> + <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="depthTest:false;" geometry=""></a-image> + </a-entity> + </a-entity> + <a-entity id="player-right-controller" class="right-controller" diff --git a/src/systems/app-mode.js b/src/systems/app-mode.js index ffeccbc040104c9e18438eead6dd4cb37a596756..136028251c6e1f3cc28ef61353452b24f7ce8e49 100644 --- a/src/systems/app-mode.js +++ b/src/systems/app-mode.js @@ -97,7 +97,7 @@ AFRAME.registerComponent("hud-detector", { schema: { hud: { type: "selector" }, offset: { default: 1 }, // distance from hud below head, - lookCutoff: { default: -20 }, // angle at which the hud should be "on", + lookCutoff: { default: -25 }, // angle at which the hud should be "on", animRange: { default: 30 } // degrees over which to animate the hud into view }, init() { @@ -144,8 +144,10 @@ AFRAME.registerComponent("hud-detector", { const AppModeSystem = this.el.sceneEl.systems["app-mode"]; if (pitch < lookCutoff && AppModeSystem.mode !== AppModes.HUD) { AppModeSystem.setMode(AppModes.HUD); + this.el.sceneEl.renderer.sortObjects = true; } else if (pitch > lookCutoff && AppModeSystem.mode === AppModes.HUD) { AppModeSystem.setMode(AppModes.DEFAULT); + this.el.sceneEl.renderer.sortObjects = false; } } });