diff --git a/public/index.html b/public/index.html index 2ab7db16f4de7c2b592666ee695e873ce138ff25..d5a65fa81d82b16aa8852b689da35fbb32d0db24 100644 --- a/public/index.html +++ b/public/index.html @@ -36,7 +36,7 @@ <script id="nametag-template" type="text/html"> <a-entity class="nametag" - billboard + nametag="follow: .head" text="side:double;align:center;" position="0 2.5 0" scale="6 6 6"></a-entity> @@ -48,7 +48,7 @@ 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" diff --git a/src/components/billboard.js b/src/components/billboard.js index 4e108c4cab407b21471891fb60790bf06f855a66..9ff004e57c206eaa0fa2a1d8df9ac83f5f3a53bf 100644 --- a/src/components/billboard.js +++ b/src/components/billboard.js @@ -1,16 +1,30 @@ -AFRAME.registerComponent("billboard", { +AFRAME.registerComponent("nametag", { + schema: { + follow: {type: "string"} + }, init: function() { this.vector = new THREE.Vector3(); + // traverse up to the networked player rig and find the networked head. + var head = this._findParent(this.el, '[networked]').parentNode.querySelector(this.data.follow); + // traverse up to the head's networked parent and get its object3D + this.followObj = this._findParent(head, '[networked]').object3D; + }, + _findParent: function (el, selector) { + var parent = el.parentNode; + while(parent && !parent.matches(selector)) { + parent = parent.parentNode; + } + return parent; }, - tick: function(t) { - var self = this; - var target = self.el.sceneEl.camera; - var object3D = self.el.object3D; + var target = this.el.sceneEl.camera; + var object3D = this.el.object3D; + + var followPosition = this.followObj.position; + object3D.position.x = followPosition.x; + object3D.position.z = followPosition.z; - // make sure camera is set if (target) { - //target.updateMatrixWorld(); this.vector.setFromMatrixPosition(target.matrixWorld); if (object3D.parent) { object3D.parent.updateMatrixWorld();