diff --git a/public/index.html b/public/index.html
index 6bcedf148c094a516dbc77f4d56c6e8f1e5f766b..3b58ef6cea83455e69439a53865c45ac942e4e3d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
<head>
<title>A-Frame Social VR Demo</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>
@@ -58,7 +58,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" visible="false" hand-controls-child-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"
@@ -67,7 +67,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" visible="false" 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-child-visibility.js b/src/components/hand-controls-child-visibility.js
new file mode 100644
index 0000000000000000000000000000000000000000..75b79bb210636577a2b345b6ca0b1eb8f837d0d6
--- /dev/null
+++ b/src/components/hand-controls-child-visibility.js
@@ -0,0 +1,21 @@
+AFRAME.registerComponent("hand-controls-child-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 fabb513a4751cda114a9ed2d5d30d8c6403f42d6..d230f3e3e5d399035242f547b3e1886770eefa37 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ import "./components/audio-feedback";
import "./components/nametag-transform";
import "./components/avatar-customization";
import "./components/mute-state-indicator";
+import "./components/hand-controls-child-visibility";
import { generateName } from "./utils";
@@ -24,6 +25,11 @@ NAF.schemas.add({
]
});
+NAF.schemas.add({
+ template: "#hand-template",
+ components: ["position", "rotation", "visible"]
+});
+
AFRAME.registerInputMappings({
default: {
common: {