diff --git a/src/components/animated-robot-hands.js b/src/components/animated-robot-hands.js
index ef7b429d177864cc4d78a907f333e5e38411d7f9..d963306eb9186654f89f201732ea5c91562f64c1 100644
--- a/src/components/animated-robot-hands.js
+++ b/src/components/animated-robot-hands.js
@@ -23,7 +23,7 @@ AFRAME.registerComponent("animated-robot-hands", {
this.playAnimation = this.playAnimation.bind(this);
// Get the three.js object in the scene graph that has the animation data
- const root = this.el.querySelector("a-gltf-entity .RootScene").object3D.children[0];
+ const root = this.el.object3D.children[0];
this.mixer = new THREE.AnimationMixer(root);
this.root = root;
diff --git a/src/components/ik-controller.js b/src/components/ik-controller.js
index 3b4f323df72d83cfbe0d03ab00094318485eed22..ea8a1d216ad19cefc1b7d7450330888e1776c9c6 100644
--- a/src/components/ik-controller.js
+++ b/src/components/ik-controller.js
@@ -23,13 +23,16 @@ AFRAME.registerComponent("ik-root", {
this.rightController = this.el.querySelector(this.data.rightController);
updated = true;
}
-
- if (updated) {
- this.el.querySelector("[ik-controller]").components["ik-controller"].updateIkRoot(this);
- }
}
});
+function findIKRoot(entity) {
+ while (entity && !(entity.components && entity.components["ik-root"])) {
+ entity = entity.parentNode;
+ }
+ return entity && entity.components["ik-root"];
+}
+
AFRAME.registerComponent("ik-controller", {
schema: {
leftEye: { type: "string", default: ".LeftEye" },
@@ -65,6 +68,8 @@ AFRAME.registerComponent("ik-controller", {
this.rootToChest = new Matrix4();
this.invRootToChest = new Matrix4();
+ this.ikRoot = findIKRoot(this.el);
+
this.hands = {
left: {
lastVisible: true,
@@ -124,10 +129,6 @@ AFRAME.registerComponent("ik-controller", {
.negate();
},
- updateIkRoot(ikRoot) {
- this.ikRoot = ikRoot;
- },
-
tick(time, dt) {
if (!this.ikRoot) {
return;
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 7685d08ca4b0daf81052e108d4d7c3629447bdfd..175cce5cf7c1d1ad48beb01fe72143ca781818a8 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -5,6 +5,7 @@ function registerNetworkSchemas() {
"position",
"rotation",
"scale",
+ "player-info",
{
selector: ".camera",
component: "position"
@@ -36,11 +37,6 @@ function registerNetworkSchemas() {
{
selector: ".right-controller",
component: "visible"
- },
- {
- selector: ".nametag",
- component: "text",
- property: "value"
}
]
});
diff --git a/src/room.html b/src/room.html
index bf25b9b22a87d6c4702546bba5abac4e179f2709..c29bb29e467f8395cbd22ccd04479df7a210b674 100644
--- a/src/room.html
+++ b/src/room.html
@@ -33,7 +33,7 @@
high-src="./assets/avatars/BotDefault_Avatar.glb"
low-src="./assets/avatars/BotDefault_Avatar_Unlit.glb"
></a-progressive-asset>
-
+ <a-asset-item id="bot-dom-mesh" response-type="arraybuffer" src="./assets/avatars/BotDom_Avatar.glb"></a-asset-item>
<a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.glb"></a-asset-item>
<a-asset-item id="meeting-space1-mesh" response-type="arraybuffer" src="./assets/environments/MeetingSpace1_mesh.glb"></a-asset-item>
@@ -50,14 +50,18 @@
</template>
<template id="remote-avatar-template">
- <a-entity ik-root>
+ <a-entity ik-root player-info>
<a-entity class="camera"></a-entity>
<a-entity class="left-controller"></a-entity>
<a-entity class="right-controller"></a-entity>
- <a-gltf-entity src="#bot-skinned-mesh" inflate="true" ik-controller >
+ <a-gltf-entity class="model" inflate="true">
+ <template data-selector=".RootScene">
+ <a-entity ik-controller></a-entity>
+ </template>
+
<template data-selector=".Neck">
<a-entity>
<a-entity
@@ -79,7 +83,7 @@
</a-entity>
</template>
- <template selector=".LeftHand">
+ <template data-selector=".LeftHand">
<a-entity personal-space-invader ></a-entity>
</template>
@@ -100,7 +104,7 @@
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
- animated-robot-hands
+ player-info
>
<a-entity
id="player-camera"
@@ -129,7 +133,14 @@
haptic-feedback
></a-entity>
- <a-gltf-entity src="#bot-skinned-mesh" inflate="true" ik-controller>
+ <a-gltf-entity class="model" inflate="true">
+ <template data-selector=".RootScene">
+ <a-entity
+ ik-controller
+ animated-robot-hands
+ ></a-entity>
+ </template>
+
<template data-selector=".Neck">
<a-entity>
<a-entity class="nametag" visible="false" text ></a-entity>
diff --git a/src/room.js b/src/room.js
index 849cd012ca5590ac974c9f9c4d6313c097671d02..854b58f495fe0fd0bd333128b5bbf0f9a5e9c2fd 100644
--- a/src/room.js
+++ b/src/room.js
@@ -40,6 +40,7 @@ import "./components/layers";
import "./components/spawn-controller";
import "./components/animated-robot-hands";
import "./components/hide-when-quality";
+import "./components/player-info";
import "./components/debug";
import "./systems/personal-space-bubble";
@@ -104,6 +105,7 @@ async function shareMedia(audio, video) {
async function onSceneLoad() {
const scene = document.querySelector("a-scene");
+ const playerRig = document.querySelector("#player-rig");
scene.setAttribute("networked-scene", {
room: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1,
@@ -115,7 +117,6 @@ async function onSceneLoad() {
}
if (isMobile || qs.mobile) {
- const playerRig = document.querySelector("#player-rig");
playerRig.setAttribute("virtual-gamepad-controls", {});
}
@@ -133,8 +134,10 @@ async function onSceneLoad() {
username = promptForName(username); // promptForName is blocking
}
- const myNametag = document.querySelector("#player-rig .nametag");
- myNametag.setAttribute("text", "value", username);
+ playerRig.setAttribute("player-info", {
+ displayName: username,
+ avatar: qs.avatar || "#bot-skinned-mesh"
+ });
const avatarScale = parseInt(qs.avatarScale, 10);