add vrm mode

src/App.jsx

@@ -5,6 +5,7 @@ import AtmosphereScene from './AtmosphereScene';
 import AvatarScene from './AvatarScene';
 import { LOCATIONS, teleportTo } from './worldState';
 import { adminMode, onAdminChange } from './controls/KeyInput';
+import ControlPanel from './ui/ControlPanel';
 
 const ACTION_SEQUENCE = ['attack', 'skill', 'jump', 'fly_dodge', 'damage'];
 const TELEPORT_ANIM = 'fly_dodge';
@@ -16,6 +17,9 @@ export default function App() {
   const [animState, setAnimState] = useState({ name: 'fly_idle', count: 0 });
   const [isAdmin, setIsAdmin] = useState(false);
   const [view, setView] = useState('avatar'); // 'avatar' | 'nasa'
+  const [timeScale, setTimeScale] = useState(100);
+  const [camSpeed, setCamSpeed] = useState(0.05);
+  const [vrmModel, setVrmModel] = useState('ai.vrm');
   const actionIndexRef = useRef(0);
   const teleportIndexRef = useRef(0);
   const countRef = useRef(0);
@@ -50,6 +54,7 @@ export default function App() {
     } else if (e.code === 'KeyS') {
       e.preventDefault();
       playAnim('skill');
+      setVrmModel(prev => prev === 'ai.vrm' ? 'ai_mode.vrm' : 'ai.vrm');
     }
   }, [playAnim, view]);
 
@@ -90,6 +95,7 @@ export default function App() {
 
   const doSkill = useCallback(() => {
     playAnim('skill');
+    setVrmModel(prev => prev === 'ai.vrm' ? 'ai_mode.vrm' : 'ai.vrm');
   }, [playAnim]);
 
   const appStartRef = useRef(Date.now());
@@ -154,17 +160,28 @@ export default function App() {
       {/* Atmosphere background */}
       <div style={{ ...layerStyle, zIndex: 0, opacity: isNasa ? 0 : 1, transition: 'opacity 1.5s ease' }}>
         <Canvas gl={{ alpha: true, antialias: true }}>
-          <AtmosphereScene />
+          <AtmosphereScene timeScale={timeScale} />
         </Canvas>
       </div>
 
       {/* Avatar layer */}
       <div style={{ ...layerStyle, zIndex: 1, pointerEvents: 'none', opacity: isNasa ? 0 : 1, transition: 'opacity 1.5s ease' }}>
         <div style={{ width: '100%', height: '100%', pointerEvents: isNasa ? 'none' : 'auto' }}>
-          <AvatarScene selectedAnimation={animState} onZoomOut={handleZoomOut} />
+          <AvatarScene selectedAnimation={animState} onZoomOut={handleZoomOut} camSpeed={camSpeed} vrmModel={vrmModel} />
         </div>
       </div>
 
+      {/* Control panel */}
+      {!isNasa && (
+        <ControlPanel
+          timeScale={timeScale}
+          onTimeScaleChange={setTimeScale}
+          camSpeed={camSpeed}
+          onCamSpeedChange={setCamSpeed}
+          onSkill={doSkill}
+        />
+      )}
+
       {/* Admin controls */}
       {isAdmin && !isNasa && (
         <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 2, display: 'flex', gap: 8, alignItems: 'center' }}>