fix first load

.vscode/launch.json

@@ -13,7 +13,8 @@
         "name": "Next.js: debug client-side",
         "type": "chrome",
         "request": "launch",
-        "url": "http://localhost:3000"
+        "url": "http://localhost:3000",
+        "runtimeArgs": ["--incognito"]
       },
       {
         "name": "Next.js: debug full stack",

app/components/three-world/ModelController/index.tsx

@@ -9,7 +9,7 @@ const keyMap = {
 
 function ModelController({ type }: { type: keyof typeof keyMap }) {
 
-    const modelPromise = useGlobalStore.getState()[keyMap[type]]
+    const modelPromise = useGlobalStore(state => state[keyMap[type]])
     const props = { type, modelPromise }
 
     return (

app/components/three-world/character/Helper.tsx

@@ -1,14 +1,21 @@
 import WithSuspense from "../../suspense";
 import useAnimation from "./useAnimation";
-import Model from "./Model";
 import usePose from "./usePose";
 import usePhysics from "./usePhysics";
+import useGlobalStore from "@/app/stores/useGlobalStore";
+import { SkinnedMesh } from "three";
+
+const BaseHelper = WithSuspense(({ characterPromise, stagePromise }: { characterPromise: Promise<SkinnedMesh>, stagePromise: Promise<SkinnedMesh> }) => {
+    useAnimation(characterPromise)
+    usePhysics(characterPromise)
+    usePose(characterPromise, stagePromise)
+    return <></>
+})
 
 function Helper() {
-        usePhysics()
-        useAnimation()
-        usePose()
-    return <></>;
+    const characterPromise = useGlobalStore(state => state.characterPromise)
+    const stagePromise = useGlobalStore(state => state.stagePromise)
+    return <BaseHelper characterPromise={characterPromise} stagePromise={stagePromise}></BaseHelper>;
 }
 
 export default WithSuspense(Helper);

app/components/three-world/character/useAnimation.ts

@@ -1,13 +1,14 @@
 import useGlobalStore from "@/app/stores/useGlobalStore";
 import useVMD from "../animation/useVMD";
 import usePresetStore from "@/app/stores/usePresetStore";
-import { AnimationMixer, Quaternion } from "three";
+import { AnimationMixer, Quaternion, SkinnedMesh } from "three";
 import { use, useEffect, useMemo } from "react";
 import { GrantSolver } from "@/app/modules/MMDAnimationHelper";
 import { CCDIKSolver } from "three/examples/jsm/animation/CCDIKSolver.js";
 
-function useAnimation() {
-    const mesh = use(useGlobalStore(state => state.characterPromise))
+function useAnimation(characterPromise: Promise<SkinnedMesh>) {
+    const mesh = use(characterPromise)
+    console.log(mesh)
     const player = useGlobalStore(state => state.player)
     const motionFile = usePresetStore(state => state.motionFile)
 

app/components/three-world/character/usePhysics.ts

@@ -1,10 +1,11 @@
 import useGlobalStore from "@/app/stores/useGlobalStore";
 import { RootState, useFrame } from "@react-three/fiber";
 import { use, useMemo } from "react";
+import { SkinnedMesh } from "three";
 import { MMDPhysics } from "three/examples/jsm/animation/MMDPhysics.js";
 
-function usePhysics() {
-    const mesh = use(useGlobalStore(state => state.characterPromise))
+function usePhysics(promise: Promise<SkinnedMesh>) {
+    const mesh = use(promise)
     const playDeltaRef = useGlobalStore(state => state.playDeltaRef)
     const isMotionUpdating = useGlobalStore(state => state.isMotionUpdating)
     const onUpdate = useMemo(() => {

app/components/three-world/character/usePose.tsx

@@ -2,12 +2,9 @@ import useGlobalStore from "@/app/stores/useGlobalStore";
 import { buildLoadFileFn } from "@/app/utils/gui";
 import { button, useControls } from "leva";
 import { use } from "react";
-import WithSuspense from "../../suspense";
+import { SkinnedMesh } from "three";
 
-function usePose() {
-
-    const characterPromise = useGlobalStore(state => state.characterPromise)
-    const stagePromise = useGlobalStore(state => state.stagePromise)
+function usePose(characterPromise: Promise<SkinnedMesh>, stagePromise: Promise<SkinnedMesh>) {
     const bindParentCb = useGlobalStore(state => state.bindParentCb)
     const character = use(characterPromise)
     const stage = use(stagePromise)