diff --git a/public/index.html b/public/index.html
index d7d57d9c635af8ecc5281fc8e6554bf282d98b17..5c5d46b4d292baf9145956bcc633c8c80f827155 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
<head>
<title>Mozilla Mixed Reality Social Client</title>
- <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
+ <script src="https://aframe.io/releases/0.7.0/aframe.js"></script>
<script src="./app.bundle.js"></script>
</head>
@@ -60,7 +60,7 @@
<a-entity id="nametag" networked="template:#nametag-template;showLocalTemplate:false;"></a-entity>
- <a-entity id="left-hand" hand-controls="left" axis-dpad="centerZone: 1" teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
+ <a-entity id="left-hand" hand-controls="left" hand-controls-visibility axis-dpad="centerZone: 1" teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
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 scale-audio-feedback="analyserSrc: #head; minScale: 0.035; maxScale: 0.08;" position="0 0.023 0"
@@ -69,7 +69,7 @@
</a-entity>
</a-entity>
- <a-entity id="right-hand" hand-controls="right" axis-dpad teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; hitEntity: #telepor-indicator; button: action_teleport_;"
+ <a-entity id="right-hand" hand-controls="right" hand-controls-child-visibility axis-dpad teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; hitEntity: #telepor-indicator; button: action_teleport_;"
networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
</a-entity>
diff --git a/src/components/hand-controls-visibility.js b/src/components/hand-controls-visibility.js
new file mode 100644
index 0000000000000000000000000000000000000000..50d7514897b3974e3963c3fd636bea1a9e8d3aeb
--- /dev/null
+++ b/src/components/hand-controls-visibility.js
@@ -0,0 +1,21 @@
+AFRAME.registerComponent("hand-controls-visibility", {
+ init() {
+ this.onControllerConnected = this.onControllerConnected.bind(this);
+ this.onControllerDisconnected = this.onControllerDisconnected.bind(this);
+ this.el.addEventListener("controllerconnected", this.onControllerConnected);
+ this.el.addEventListener(
+ "controllerdisconnected",
+ this.onControllerDisconnected
+ );
+
+ this.el.setAttribute("visible", false);
+ },
+
+ onControllerConnected() {
+ this.el.setAttribute("visible", true);
+ },
+
+ onControllerDisconnected() {
+ this.el.setAttribute("visible", false);
+ }
+});
diff --git a/src/index.js b/src/index.js
index a54e9b8f13e73e18495e42ad1c65e7858df3c4a7..df8b464678bfef1eafe5530b38361f279d541557 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ import "./components/audio-feedback";
import "./components/nametag-transform";
import "./components/avatar-customization";
import "./components/mute-state-indicator";
+import "./components/hand-controls-visibility";
import "./systems/personal-space-bubble";
@@ -28,6 +29,11 @@ NAF.schemas.add({
]
});
+NAF.schemas.add({
+ template: "#hand-template",
+ components: ["position", "rotation", "visible"]
+});
+
AFRAME.registerInputMappings({
default: {
common: {