diff --git a/public/assets/hud/watch.bin b/public/assets/hud/watch.bin
new file mode 100644
index 0000000000000000000000000000000000000000..c90e4ecbe70f2623bfab3bcbf75dbee0e96a4144
Binary files /dev/null and b/public/assets/hud/watch.bin differ
diff --git a/public/assets/hud/watch.gltf b/public/assets/hud/watch.gltf
new file mode 100644
index 0000000000000000000000000000000000000000..0f50a203d39958e0464bf333f177810af777e19e
--- /dev/null
+++ b/public/assets/hud/watch.gltf
@@ -0,0 +1,127 @@
+{
+ "accessors" : [
+ {
+ "bufferView" : 0,
+ "componentType" : 5121,
+ "count" : 204,
+ "max" : [
+ 119
+ ],
+ "min" : [
+ 0
+ ],
+ "type" : "SCALAR"
+ },
+ {
+ "bufferView" : 1,
+ "componentType" : 5126,
+ "count" : 120,
+ "max" : [
+ 0.10501318424940109,
+ 0.04724307730793953,
+ 0.10020249336957932
+ ],
+ "min" : [
+ -0.10501328855752945,
+ 0.01861731894314289,
+ -0.10663323104381561
+ ],
+ "type" : "VEC3"
+ },
+ {
+ "bufferView" : 2,
+ "componentType" : 5126,
+ "count" : 120,
+ "max" : [
+ 0.9848077297210693,
+ 1.0,
+ 1.0
+ ],
+ "min" : [
+ -0.9848077297210693,
+ -1.0,
+ -0.9396926164627075
+ ],
+ "type" : "VEC3"
+ }
+ ],
+ "asset" : {
+ "generator" : "Khronos Blender glTF 2.0 exporter",
+ "version" : "2.0"
+ },
+ "bufferViews" : [
+ {
+ "buffer" : 0,
+ "byteLength" : 204,
+ "byteOffset" : 0,
+ "target" : 34963
+ },
+ {
+ "buffer" : 0,
+ "byteLength" : 1440,
+ "byteOffset" : 204,
+ "target" : 34962
+ },
+ {
+ "buffer" : 0,
+ "byteLength" : 1440,
+ "byteOffset" : 1644,
+ "target" : 34962
+ }
+ ],
+ "buffers" : [
+ {
+ "byteLength" : 3084,
+ "uri" : "watch.bin"
+ }
+ ],
+ "materials" : [
+ {
+ "name" : "Material.001",
+ "pbrMetallicRoughness" : {
+ "baseColorFactor" : [
+ 0.6400000190734865,
+ 0.6400000190734865,
+ 0.6400000190734865,
+ 1.0
+ ],
+ "metallicFactor" : 0.0
+ }
+ }
+ ],
+ "meshes" : [
+ {
+ "name" : "Cylinder.001",
+ "primitives" : [
+ {
+ "attributes" : {
+ "NORMAL" : 2,
+ "POSITION" : 1
+ },
+ "indices" : 0,
+ "material" : 0
+ }
+ ]
+ }
+ ],
+ "nodes" : [
+ {
+ "mesh" : 0,
+ "name" : "Watch",
+ "scale" : [
+ 0.6932165622711182,
+ 0.6932165622711182,
+ 0.6932165622711182
+ ]
+ }
+ ],
+ "scene" : 0,
+ "scenes" : [
+ {
+ "name" : "Scene",
+ "nodes" : [
+ 0
+ ]
+ }
+ ]
+}
diff --git a/public/index.html b/public/index.html
index 73482ec382d2a63c64850dab5672475ce4e6d005..b5e9c3a876d8ae1bf1c7c1307557ff92837c727a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,13 +15,14 @@
audio: true;
debug: true;
connectOnLoad: false"
- mute-mic="eventSrc: #right-hand; toggleEvents: action_mute">
+ mute-mic="eventSrc: a-scene; toggleEvents: action_mute">
<a-assets>
<img id="grid" src="assets/grid.png" crossorigin="anonymous">
<img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
<a-asset-item id="dodec-avatar-head" src="assets/avatars/dodec/DodecAvatarGLTF/DodecAvatar_Head.gltf"></a-asset-item>
+ <a-asset-item id="watch-model" src="assets/hud/watch.gltf"></a-asset-item>
<a-asset-item id="rock-island" src="assets/environments/RockIslandTest/RockIsland.gltf"></a-asset-item>
@@ -69,27 +70,25 @@
<a-entity
id="left-hand"
-
- vive-controls="hand: left"
- oculus-touch-controls="hand: left"
- daydream-controls
- gearvr-controls
+ hand-controls="left"
axis-dpad="centerZone: 1"
teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
- networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+ networked="template:#hand-template;showLocalTemplate:false;"
+ >
+ <a-entity id="watch" gltf-model="assets/hud/watch.gltf" position="0 0.0015 0.147" rotation="3.5 0 0">
+ <a-circle mute-state-indicator="" position="0 0.023 0" rotation="-90 0 0" scale="0.04 0.04 0.04" material="color:#d8eece;shader:flat"></a-circle>
+ </a-entity>
+ </a-entity>
<a-entity
id="right-hand"
- vive-controls="hand: right"
- oculus-touch-controls="hand: right"
- daydream-controls
- gearvr-controls
+ hand-controls="right"
axis-dpad
teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; hitEntity: #telepor-indicator; button: action_teleport_;"
- networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+ networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
</a-entity>
<a-entity class="head" gltf-model="#rock-island" position="0 0 0">
diff --git a/src/components/mute-state-indicator.js b/src/components/mute-state-indicator.js
new file mode 100644
index 0000000000000000000000000000000000000000..00f61159c0e26ae706f51c4e48b8dbb02957b555
--- /dev/null
+++ b/src/components/mute-state-indicator.js
@@ -0,0 +1,31 @@
+AFRAME.registerComponent("mute-state-indicator", {
+ schema: {},
+
+ init() {
+ this.onStateToggled = this.onStateToggled.bind(this);
+ this.updateMuteState();
+ },
+
+ play() {
+ this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+ this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+ },
+
+ pause() {
+ this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+ this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+ },
+
+ onStateToggled(e) {
+ if (!e.detail.state === "muted") return;
+ this.updateMuteState();
+ },
+
+ updateMuteState() {
+ this.el.setAttribute(
+ "material",
+ "color",
+ this.el.sceneEl.is("muted") ? "#ffd8ce" : "#d8eece"
+ );
+ }
+});
diff --git a/src/index.js b/src/index.js
index 1c0ad57d8a734c409f004f44c21bc11334283f3f..dd5cc1a32185041f5f6b7ad96d8cd70b8c100154 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import "./components/mute-mic";
import "./components/audio-feedback";
import "./components/nametag-transform";
import "./components/avatar-customization";
+import "./components/mute-state-indicator";
import { generateName } from "./utils";