fix first load default camera broken

app/components/three-world/ModelHelper/ModelContext.ts

@@ -1,5 +1,5 @@
-import { createContext, use } from 'react';
+import { createContext, useContext } from 'react';
 import { SkinnedMesh } from 'three';
 
 export const ModelContext = createContext<SkinnedMesh>(null);
-export const useModel = () => use(ModelContext);
+export const useModel = () => useContext(ModelContext);

app/components/three-world/camera/helper/motion-file-mode/index.tsx

@@ -1,16 +1,15 @@
 import usePresetStore from "@/app/stores/usePresetStore";
 import { useThree } from "@react-three/fiber";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { AnimationMixer } from "three";
 import useVMD from "../../../animation/useVMD";
 import WithSuspense from "@/app/components/suspense";
-import usePresetReady from "@/app/stores/usePresetReady";
+import WithReady from "@/app/stores/WithReady";
 
 
 function MotionFileMode() {
     const camera = useThree(state => state.camera)
     const cameraMixer = useMemo(() => new AnimationMixer(camera), [camera])
-    usePresetReady()
     const cameraFile = usePresetStore(state => state.cameraFile)
     const setTimeCb = useCallback((setTime: () => void) => {
         setTime();
@@ -23,4 +22,4 @@ function MotionFileMode() {
     return <></>;
 }
 
-export default WithSuspense(MotionFileMode);
+export default WithReady(MotionFileMode);

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

@@ -3,14 +3,11 @@ import usePresetStore from "@/app/stores/usePresetStore";
 import { buildGuiItem, buildLoadFileFn, buildLoadModelFn } from "@/app/utils/gui";
 import { button, useControls } from "leva";
 import * as THREE from 'three';
-import WithSuspense from "../../suspense";
-import usePresetReady from "@/app/stores/usePresetReady";
 import PmxModel from "../pmx-model";
 import { ThreeEvent } from "@react-three/fiber";
+import WithReady from "@/app/stores/WithReady";
 
 function Model() {
-    usePresetReady()
-
     const characterName = usePresetStore(state => state.character)
     const motionName = usePresetStore(state => state.motion)
     const pmxFiles = usePresetStore(state => state.pmxFiles)
@@ -83,4 +80,4 @@ function Model() {
     );
 }
 
-export default WithSuspense(Model);
+export default WithReady(Model);

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

@@ -2,20 +2,17 @@ import useGlobalStore from "@/app/stores/useGlobalStore";
 import usePresetStore from "@/app/stores/usePresetStore";
 import { buildGuiItem, buildLoadModelFn } from "@/app/utils/gui";
 import { button, useControls } from "leva";
-import usePresetReady from "@/app/stores/usePresetReady";
-import WithSuspense from "../../suspense";
 import PmxModel from "../pmx-model";
 import * as THREE from 'three';
+import WithReady from "@/app/stores/WithReady";
 
 function Stage() {
-    usePresetReady()
     const stageName = usePresetStore(state => state.stage)
     const pmxFiles = usePresetStore(state => state.pmxFiles)
     const enablePBR = usePresetStore(state => state["enable PBR"])
     const groundShadow = usePresetStore(state => state["ground shadow"])
 
     const url = pmxFiles.stage[stageName]
-    const filename = stageName
 
     const [_, set] = useControls('Stage', () => ({
         name: {
@@ -51,4 +48,4 @@ function Stage() {
     );
 }
 
-export default WithSuspense(Stage);
+export default WithReady(Stage);

app/stores/WithReady.tsx

@@ -0,0 +1,15 @@
+import useGlobalStore, { GlobalState } from "@/app/stores/useGlobalStore";
+import { useThree } from "@react-three/fiber";
+
+function WithReady<T>(Component: React.ComponentType<T>) {
+    return function WrappedComponent(props: T) {
+        const presetReady = useGlobalStore(state => state.presetReady)
+        const camera = useThree(state => state.camera)
+        if (!presetReady || !camera.getObjectByName("target")) return <></>
+        return (
+            <Component {...props}></Component>
+        )
+    };
+}
+
+export default WithReady