diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
index 9735cb0ddc7b08c8f3f4acc2fff5e3b22e96008c..01f1c75f6e8e1c12eda5531fc45182292f54c6d7 100644
--- a/src/components/in-world-hud.js
+++ b/src/components/in-world-hud.js
@@ -1,43 +1,17 @@
AFRAME.registerComponent("in-world-hud", {
init() {
- this.bg = document.createElement("a-box");
- this.mic = document.createElement("a-image");
- this.nametag = document.createElement("a-text");
- this.avatar = document.createElement("a-image");
- this.el.appendChild(this.bg);
- this.bg.appendChild(this.mic);
- this.bg.appendChild(this.nametag);
- this.bg.appendChild(this.avatar);
-
- this.bg.setAttribute("position", "0 2.0 -1");
- this.bg.setAttribute("geometry", {
- height: 0.13,
- width: 0.6,
- depth: 0.001
- });
- this.bg.setAttribute("material", {
- color: "#000000",
- opacity: 0.35
- });
+ this.bg = this.el.querySelector(".bg");
+ this.mic = this.el.querySelector(".mic");
+ this.nametag = this.el.querySelector(".nametag");
+ this.avatar = this.el.querySelector(".avatar");
const muted = this.el.sceneEl.is("muted");
this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
- this.mic.setAttribute("scale", "-0.1 0.1 0.1");
- this.mic.setAttribute("position", "-0.2 0.0 0.001");
- this.mic.classList.add("menu");
- this.avatar.setAttribute("src", "#avatar");
const avatarScale = "0.1 0.1 0.1";
const flipXAvatarScale = "-" + avatarScale;
- this.avatar.setAttribute("scale", avatarScale);
- this.avatar.setAttribute("position", "0.2 0 0.001");
- this.avatar.classList.add("menu");
- this.nametag.setAttribute("scale", "0.3 0.3 0.3");
- this.nametag.setAttribute("position", "-0.12 0 0.0001");
- this.nametag.classList.add("menu");
-
- const scene = document.querySelector("a-scene");
+ const scene = this.el.sceneEl;
this.onUsernameChanged = this.onUsernameChanged.bind(this);
scene.addEventListener("username-changed", this.onUsernameChanged);
@@ -119,7 +93,7 @@ AFRAME.registerComponent("in-world-hud", {
},
onUsernameChanged(evt) {
- var width;
+ let width;
if (evt.detail.username.length == 0) {
width = 1;
} else {
diff --git a/src/systems/app-mode.js b/src/systems/app-mode.js
index 10f26cf0f1563760a143e26577cb67c8e94815fc..c34dba3a4f1b181b71a7acc8bf3a545569f50596 100644
--- a/src/systems/app-mode.js
+++ b/src/systems/app-mode.js
@@ -42,11 +42,11 @@ AFRAME.registerComponent("mode-responder-hudstate", {
switch (e.detail.mode) {
case AppModes.HUD:
this.el.setAttribute("material", "color", "green");
- this.el.setAttribute("scale", "2 1 1");
+ this.el.setAttribute("scale", "2 2 2");
break;
case AppModes.DEFAULT:
this.el.setAttribute("material", "color", "white");
- this.el.setAttribute("scale", "0.3 0.3 1");
+ this.el.setAttribute("scale", "1 1 1");
break;
}
});
@@ -54,20 +54,20 @@ AFRAME.registerComponent("mode-responder-hudstate", {
});
AFRAME.registerComponent("hud-detector", {
- dependencies: ["raycaster"],
-
init() {
const AppModeSystem = this.el.sceneEl.systems["app-mode"];
let hoverTimeout;
- this.el.addEventListener("raycaster-intersection", e => {
- console.log("raycast hit", e.detail.els, e.detail.intersections);
+ this.el.addEventListener("raycaster-intersected", e => {
+ if (e.target != this.el) return;
+ console.log("raycast hit", e);
hoverTimeout = setTimeout(() => {
AppModeSystem.setMode(AppModes.HUD);
}, 500);
});
- this.el.addEventListener("raycaster-intersection-cleared", e => {
- console.log("raycast clear", e.detail.clearedEls);
+ this.el.addEventListener("raycaster-intersected-cleared", e => {
+ if (e.target != this.el) return;
+ console.log("raycast clear", e);
AppModeSystem.setMode(AppModes.DEFAULT);
clearTimeout(hoverTimeout);
});
diff --git a/templates/room.hbs b/templates/room.hbs
index 7ba0b408abc236be624b2472e0d6ad746ac48dc9..5bc61c3f0bdcae9f8a63b688cc98b5874db57631 100644
--- a/templates/room.hbs
+++ b/templates/room.hbs
@@ -41,11 +41,10 @@
onConnect: App.onConnect;
connectOnLoad: false;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
- raycaster="objects:.menu;"
+ raycaster="objects:.hud;"
cursor="rayOrigin: mouse;"
2d-mute-state-indicator
2d-hud
- in-world-hud
light="defaultLightsEnabled: false">
<a-assets>
@@ -127,15 +126,17 @@
mode-responder-toggle__character-controller="mode: hud; invert: true;"
ik-root
>
- <a-plane
- class="hud"
- mode-responder-hudstate
- position="0 0.7 -0.7"
- rotation="-28.9 0 0"
- scale="0.3 0.3 1"
- material="side:double"
- >
- </a-plane>
+ <a-entity
+ mode-responder-hudstate=""
+ in-world-hud=""
+ position="0 1.002 -1.363"
+ rotation="-39.01000608674482 0 0">
+ <a-box hud-detector geometry="height:0.13;width:0.6;depth:0.001" material="color:#000000;opacity:0.35" class="hud bg">
+ <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="" geometry=""></a-image>
+ <a-text scale="0.3 0.3 0.3" position="-0.12 0 0.0001" class="hud nametag" text="width:6;value:dom"></a-text>
+ <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="" geometry=""></a-image>
+ </a-box>
+ </a-entity>
<a-entity
id="player-camera"
@@ -145,7 +146,6 @@
personal-space-bubble
look-controls
raycaster="objects: .hud; interval: 100; showLine: true; direction: 0 0 -1; origin: 0 -0.05 0;"
- hud-detector
></a-entity>
<a-entity