diff --git a/public/index.html b/public/index.html
index a7fd2a2f4fe6808568c6a174a237bc592e6a8a85..06cc255934e2474d3d5a93c86406397edea6b959 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,12 @@
</head>
<body>
- <a-scene networked-scene="adapter: easyrtc; audio: true; debug: true;" mute-mic="eventSrc: #right-hand; toggleEvents: menudown, xbuttondown">
+ <a-scene
+ networked-scene="adapter: easyrtc;
+ audio: true;
+ debug: true;
+ connectOnLoad: false"
+ mute-mic="eventSrc: #right-hand; toggleEvents: menudown, xbuttondown">
<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" />
@@ -24,6 +29,15 @@
<script id="hand-template" type="text/html">
<a-box class="hand" scale="0.2 0.1 0.3"></a-box>
</script>
+
+ <script id="nametag-template" type="text/html">
+ <a-entity
+ class="nametag"
+ billboard
+ text="side:double;align:center;"
+ position="0 3 0"
+ scale="6 6 6"></a-entity>
+ </script>
</a-assets>
<a-entity id="player-rig" networked wasd-controls snap-rotation="leftEventSrc: #right-hand; rightEventSrc: #right-hand">
@@ -31,7 +45,11 @@
id="head"
camera="userHeight: 1.6"
look-controls
- networked="template:#head-template;showLocalTemplate:false;"></a-entity>
+ networked="template:#head-template;showLocalTemplate:false;"></a-entity>
+
+ <a-entity
+ id="nametag"
+ networked="template:#nametag-template;showLocalTemplate:false;"></a-entity>
<a-entity
id="left-hand"
@@ -57,6 +75,9 @@
material="shader: flat; src: #grid; repeat: 100 100;"></a-entity>
<a-sky src="#sky" rotation="0 -90 0"></a-sky>
</a-scene>
+ <script>
+ document.querySelector('a-scene').addEventListener('loaded', onSceneLoad)
+ </script>
</body>
</html>
diff --git a/src/components/billboard.js b/src/components/billboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..4e108c4cab407b21471891fb60790bf06f855a66
--- /dev/null
+++ b/src/components/billboard.js
@@ -0,0 +1,22 @@
+AFRAME.registerComponent("billboard", {
+ init: function() {
+ this.vector = new THREE.Vector3();
+ },
+
+ tick: function(t) {
+ var self = this;
+ var target = self.el.sceneEl.camera;
+ var object3D = self.el.object3D;
+
+ // make sure camera is set
+ if (target) {
+ //target.updateMatrixWorld();
+ this.vector.setFromMatrixPosition(target.matrixWorld);
+ if (object3D.parent) {
+ object3D.parent.updateMatrixWorld();
+ object3D.parent.worldToLocal(this.vector);
+ }
+ return object3D.lookAt(this.vector);
+ }
+ }
+});
diff --git a/src/index.js b/src/index.js
index 2e6e43af198771b448502b08a8224245ee13cb1d..fb96329a79148288fcdc8618e5758a1b0246efdd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,3 +6,196 @@ require("./components/axis-dpad");
require("./components/snap-rotation");
require("./components/mute-mic");
require("./components/audio-feedback");
+require("./components/billboard");
+
+NAF.schemas.add({
+ template: "#nametag-template",
+ components: [
+ {
+ selector: ".nametag",
+ component: "text",
+ property: "value"
+ }
+ ]
+});
+
+window.onSceneLoad = function() {
+ var username = generateName();
+ do {
+ username = prompt("Choose a username", username);
+ } while (!(username && username.length));
+
+ var player = document.getElementById("player-rig");
+ var myNametag = player.querySelector(".nametag");
+ myNametag.setAttribute("text", "value", username);
+
+ document.querySelector("a-scene").components["networked-scene"].connect();
+};
+
+const names = [
+ "albattani",
+ "allen",
+ "almeida",
+ "agnesi",
+ "archimedes",
+ "ardinghelli",
+ "aryabhata",
+ "austin",
+ "babbage",
+ "banach",
+ "bardeen",
+ "bartik",
+ "bassi",
+ "beaver",
+ "bell",
+ "benz",
+ "bhabha",
+ "bhaskara",
+ "blackwell",
+ "bohr",
+ "booth",
+ "borg",
+ "bose",
+ "boyd",
+ "brahmagupta",
+ "brattain",
+ "brown",
+ "carson",
+ "chandrasekhar",
+ "shannon",
+ "clarke",
+ "colden",
+ "cori",
+ "cray",
+ "curran",
+ "curie",
+ "darwin",
+ "davinci",
+ "dijkstra",
+ "dubinsky",
+ "easley",
+ "edison",
+ "einstein",
+ "elion",
+ "engelbart",
+ "euclid",
+ "euler",
+ "fermat",
+ "fermi",
+ "feynman",
+ "franklin",
+ "galileo",
+ "gates",
+ "goldberg",
+ "goldstine",
+ "goldwasser",
+ "golick",
+ "goodall",
+ "haibt",
+ "hamilton",
+ "hawking",
+ "heisenberg",
+ "hermann",
+ "heyrovsky",
+ "hodgkin",
+ "hoover",
+ "hopper",
+ "hugle",
+ "hypatia",
+ "jackson",
+ "jang",
+ "jennings",
+ "jepsen",
+ "johnson",
+ "joliot",
+ "jones",
+ "kalam",
+ "kare",
+ "keller",
+ "kepler",
+ "khorana",
+ "kilby",
+ "kirch",
+ "knuth",
+ "kowalevski",
+ "lalande",
+ "lamarr",
+ "lamport",
+ "leakey",
+ "leavitt",
+ "lewin",
+ "lichterman",
+ "liskov",
+ "lovelace",
+ "lumiere",
+ "mahavira",
+ "mayer",
+ "mccarthy",
+ "mcclintock",
+ "mclean",
+ "mcnulty",
+ "meitner",
+ "meninsky",
+ "mestorf",
+ "minsky",
+ "mirzakhani",
+ "morse",
+ "murdock",
+ "neumann",
+ "newton",
+ "nightingale",
+ "nobel",
+ "noether",
+ "northcutt",
+ "noyce",
+ "panini",
+ "pare",
+ "pasteur",
+ "payne",
+ "perlman",
+ "pike",
+ "poincare",
+ "poitras",
+ "ptolemy",
+ "raman",
+ "ramanujan",
+ "ride",
+ "montalcini",
+ "ritchie",
+ "roentgen",
+ "rosalind",
+ "saha",
+ "sammet",
+ "shaw",
+ "shirley",
+ "shockley",
+ "sinoussi",
+ "snyder",
+ "spence",
+ "stallman",
+ "stonebraker",
+ "swanson",
+ "swartz",
+ "swirles",
+ "tesla",
+ "thompson",
+ "torvalds",
+ "turing",
+ "varahamihira",
+ "visvesvaraya",
+ "volhard",
+ "wescoff",
+ "wiles",
+ "williams",
+ "wilson",
+ "wing",
+ "wozniak",
+ "wright",
+ "yalow",
+ "yonath"
+];
+
+function generateName() {
+ const name = names[Math.floor(Math.random() * names.length)];
+ return name.replace(/^./, name[0].toUpperCase());
+}