From 0e2dad697126068fb30c19c4776a8fc1b23bb5b9 Mon Sep 17 00:00:00 2001 From: netpro2k <netpro2k@gmail.com> Date: Thu, 15 Mar 2018 19:14:06 -0700 Subject: [PATCH] Rework how player rig is instantiated to support avatar switching. Also requries changing how nametag is networked. --- src/components/animated-robot-hands.js | 2 +- src/components/ik-controller.js | 17 +++++++++-------- src/network-schemas.js | 6 +----- src/room.html | 23 +++++++++++++++++------ src/room.js | 9 ++++++--- 5 files changed, 34 insertions(+), 23 deletions(-) diff --git a/src/components/animated-robot-hands.js b/src/components/animated-robot-hands.js index ef7b429d1..d963306eb 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 3b4f323df..ea8a1d216 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 7685d08ca..175cce5cf 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 bf25b9b22..c29bb29e4 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 849cd012c..854b58f49 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); -- GitLab