めたねのおくすり専用アバターを読み込めるようにする

Author: calmery

src/components/Exhibition/3d/Player.tsx

@@ -15,6 +15,7 @@ import { ControllerKeys } from "./Controller";
 import { useMultiplay } from "~/hooks/exhibition/useMultuplay";
 import { Area, AreaName, AreaObject } from "~/types/exhibition";
 import { getGltf, rewriteMaterials } from "~/utils/exhibition";
+import { getMetanenoToken } from "~/utils/exhibition/metaneno";
 
 CameraControls.install({ THREE });
 
@@ -129,7 +130,7 @@ export const Exhibition3dPlayer = React.memo<
 
         accessory.position.set(
           scene?.position.x || 0,
-          (scene?.position.y || 0) + 0.95,
+          (scene?.position.y || 0) + (getMetanenoToken() ? 1.21 : 0.95),
           scene?.position.z || 0
         );
 
@@ -152,7 +153,9 @@ export const Exhibition3dPlayer = React.memo<
 
     useEffect(() => {
       (async () => {
-        const { animations, scene } = await getGltf(url);
+        const { animations, scene } = await getGltf(
+          getMetanenoToken() ? "/objects/metaneno.glb" : url
+        );
 
         scene.scale.set(0.5, 0.5, 0.5);
 
@@ -284,7 +287,7 @@ export const Exhibition3dPlayer = React.memo<
           if (accessory) {
             accessory.position.set(
               nextPosition.x,
-              nextPosition.y + 0.95,
+              nextPosition.y + (getMetanenoToken() ? 1.21 : 0.95),
               nextPosition.z
             );
             accessory.rotation.y = Math.atan2(rotation.x, rotation.z);

src/components/Exhibition/3d/Players.tsx

@@ -7,7 +7,8 @@ import { getGltf, rewriteMaterials } from "~/utils/exhibition";
 
 type S = Scene & {
   accessory: "fried_egg" | "pancake" | null;
-  hasAccessory: boolean;
+  accessoryScene: Scene | null;
+  metaneno: boolean;
   mixer: AnimationMixer;
   nextPosition: Vector3 | null;
   lerpAlpha: number;
@@ -49,7 +50,6 @@ const applyPlayerTransform = async (scene: S, payload: UpdateResponse) => {
 
   if (!scene.ready) {
     scene.accessory = null;
-    scene.hasAccessory = false;
     scene.mixer = new AnimationMixer(scene);
     scene.nextPosition = null;
     scene.position.set(
@@ -72,23 +72,18 @@ const applyPlayerTransform = async (scene: S, payload: UpdateResponse) => {
   // Accessory
 
   if (scene.accessory !== payload.accessory) {
-    if (scene.hasAccessory) {
-      scene.children = scene.children.slice(0, scene.children.length - 1);
-    }
-
     if (payload.accessory === "pancake" || payload.accessory === "fried_egg") {
       const { scene: accessory } = await getGltf(
         `/objects/accessories/${payload.accessory}.glb`
       );
       rewriteMaterials(accessory);
       accessory.position.set(
         scene.position.x || 0,
-        (scene.position.y || 0) + 0.95,
+        (scene.position.y || 0) + (scene.metaneno ? 1.21 : 0.95),
         scene.position.z || 0
       );
-      scene.children.push(accessory);
+      scene.accessoryScene = accessory;
       scene.accessory = payload.accessory;
-      scene.hasAccessory = true;
     }
   }
 
@@ -128,10 +123,10 @@ const applyPlayerTransform = async (scene: S, payload: UpdateResponse) => {
       const position = scene.position.lerp(nextPosition, scene.lerpAlpha);
       scene.lerpAlpha += ALPFA;
 
-      if (scene.hasAccessory) {
-        scene.children[scene.children.length - 1].position.set(
+      if (scene.accessoryScene) {
+        scene.accessoryScene.position.set(
           position.x,
-          position.y + 0.95,
+          position.y + (scene.metaneno ? 1.21 : 0.95),
           position.z
         );
       }
@@ -188,9 +183,13 @@ export const Exhibition3dPlayers = React.memo<{
                 });
               } else {
                 const { scene } = await getGltf(
-                  `/objects/${payload.metaneno ? "" : "other_"}player.glb`
+                  `/objects/${
+                    payload.metaneno ? "metaneno" : "other_player"
+                  }.glb`
                 );
 
+                (scene as S).metaneno = !!payload.metaneno;
+
                 return Promise.resolve({
                   [playerId]: await applyPlayerTransform(scene as S, payload),
                 });
@@ -211,7 +210,10 @@ export const Exhibition3dPlayers = React.memo<{
   return (
     <>
       {Object.values(scenes).map((scene) => (
-        <primitive key={scene.id} object={scene} />
+        <React.Fragment key={scene.id}>
+          <primitive object={scene} />
+          {scene.accessoryScene && <primitive object={scene.accessoryScene} />}
+        </React.Fragment>
       ))}
     </>
   );

src/hooks/exhibition/useMultuplay.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { io } from "socket.io-client";
 import { AreaName } from "~/types/exhibition";
 import * as GA from "~/utils/exhibition/google-analytics";
+import { getMetanenoToken } from "~/utils/exhibition/metaneno";
 
 export type UpdateResponse = UpdatePayload & {
   metaneno: boolean;
@@ -47,7 +48,7 @@ export const useMultiplay = () => {
   //
 
   useEffect(() => {
-    const token = localStorage.getItem("_metaneno");
+    const token = getMetanenoToken();
 
     if (token) {
       if (socket.connected) {

src/utils/exhibition/metaneno.ts

@@ -0,0 +1 @@
+export const getMetanenoToken = () => localStorage.getItem("_metaneno");