Add Avatar Selection UI

example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts

@@ -46,6 +46,7 @@ const characterDescription: CharacterDescription = {
 
 export class LocalAvatarClient {
   public element: HTMLDivElement;
+  private canvasHolder: HTMLDivElement;
 
   private readonly scene = new Scene();
   private readonly audioListener = new AudioListener();
@@ -83,8 +84,14 @@ export class LocalAvatarClient {
       }
     });
 
+    this.canvasHolder = document.createElement("div");
+    this.canvasHolder.style.position = "absolute";
+    this.canvasHolder.style.width = "100%";
+    this.canvasHolder.style.height = "100%";
+    this.element.appendChild(this.canvasHolder);
+
     this.cameraManager = new CameraManager(
-      this.element,
+      this.canvasHolder,
       this.collisionsManager,
       Math.PI / 2,
       Math.PI / 2,

example/multi-user-3d-web-experience/client/src/index.ts

@@ -27,6 +27,9 @@ const app = new Networked3dWebExperienceClient(holder, {
   skyboxHdrJpgUrl: hdrJpgUrl,
   mmlDocuments: [{ url: `${protocol}//${host}/mml-documents/example-mml.html` }],
   environmentConfiguration: {},
+  avatarConfiguration: {
+    availableAvatars: [],
+  },
 });
 
 app.update();

example/multi-user-3d-web-experience/server/src/BasicUserAuthenticator.ts

@@ -93,12 +93,28 @@ export class BasicUserAuthenticator {
   }
 
   public onClientUserIdentityUpdate(clientId: number, msg: UserIdentity): UserData | null {
-    // This implementation does not allow updating user data after initial connect.
-
     // To allow updating user data after initial connect, return the UserData object that reflects the requested change.
-
     // Returning null will not update the user data.
-    return null;
+
+    const user = this.usersByClientId.get(clientId);
+
+    if (!user) {
+      console.error(`onClientUserIdentityUpdate - unknown clientId ${clientId}`);
+      return null;
+    }
+
+    if (!user.userData) {
+      console.error(`onClientUserIdentityUpdate - no user data for clientId ${clientId}`);
+      return null;
+    }
+
+    const newUserData: UserData = {
+      username: msg.username ?? user.userData.username,
+      characterDescription: msg.characterDescription ?? user.userData.characterDescription,
+    };
+
+    this.usersByClientId.set(clientId, { ...user, userData: newUserData });
+    return newUserData;
   }
 
   public onClientDisconnect(clientId: number) {

example/multi-user-3d-web-experience/server/src/index.ts

@@ -32,6 +32,7 @@ const characterDescription: CharacterDescription = {
   // </m-character>
   // `,
 };
+
 const userAuthenticator = new BasicUserAuthenticator(characterDescription, {
   /*
    This option allows sessions that are reconnecting from a previous run of the server to connect even if the present a

packages/3d-web-avatar-selection-ui/build.ts

@@ -0,0 +1,15 @@
+import cssModulesPlugin from "esbuild-css-modules-plugin";
+
+import { handleLibraryBuild } from "../../utils/build-library";
+
+handleLibraryBuild({
+  plugins: [
+    cssModulesPlugin({
+      inject: true,
+      emitDeclarationFile: true,
+    }),
+  ],
+  loader: {
+    ".svg": "text",
+  },
+});

packages/3d-web-avatar-selection-ui/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mml-io/3d-web-avatar-selection-ui",
+  "version": "0.17.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "type": "module",
+  "files": [
+    "/build"
+  ],
+  "scripts": {
+    "build": "tsx ./build.ts --build",
+    "iterate": "tsx ./build.ts --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
+  },
+  "dependencies": {
+    "express": "4.19.2",
+    "express-ws": "5.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ws": "^8.16.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/express-ws": "^3.0.4",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@types/ws": "^8.5.10",
+    "esbuild-css-modules-plugin": "3.1.0"
+  }
+}