sa2kit 1.6.18 → 1.6.19

package/dist/mmd/index.mjs

@@ -6,8 +6,9 @@ import '../chunk-BJTO5JO5.mjs';
 import React10, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
 import * as THREE2 from 'three';
 import { OutlineEffect, OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { Sparkles, AlertCircle, Compass, Camera, Settings, RefreshCw, CameraOff, X, RotateCcw, SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Shuffle, ListMusic, Music, Search, Loader2, Layers, ChevronDown, Grid3x3, Minimize, Maximize, Video, Check, User, Image as Image$1 } from 'lucide-react';
+import { SkipBack, Pause, Play, SkipForward, Camera, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Search, Loader2, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
 import { createPortal } from 'react-dom';
+import Script from 'next/script';
 
 // src/mmd/pmx/editor/PMXEditor.ts
 var PMXEditor = class {
@@ -2297,7 +2298,7 @@ var SettingsPanel = ({
   };
   const renderOptionsMode = () => {
     if (!options) return null;
-    return /* @__PURE__ */ React10.createElement("div", { className: "p-4" }, renderOptionGroup("\u6A21\u578B", /* @__PURE__ */ React10.createElement(User, { size: 16 }), "models", options.models, currentSelection?.modelId), renderOptionGroup("\u52A8\u4F5C", /* @__PURE__ */ React10.createElement(Video, { size: 16 }), "motions", options.motions, currentSelection?.motionId), renderOptionGroup("\u955C\u5934", /* @__PURE__ */ React10.createElement(Image$1, { size: 16 }), "cameras", options.cameras, currentSelection?.cameraId), renderOptionGroup("\u97F3\u9891", /* @__PURE__ */ React10.createElement(Music, { size: 16 }), "audios", options.audios, currentSelection?.audioId), renderOptionGroup("\u821E\u53F0", /* @__PURE__ */ React10.createElement(Image$1, { size: 16 }), "stages", options.stages, currentSelection?.stageId));
+    return /* @__PURE__ */ React10.createElement("div", { className: "p-4" }, renderOptionGroup("\u6A21\u578B", /* @__PURE__ */ React10.createElement(User, { size: 16 }), "models", options.models, currentSelection?.modelId), renderOptionGroup("\u52A8\u4F5C", /* @__PURE__ */ React10.createElement(Video, { size: 16 }), "motions", options.motions, currentSelection?.motionId), renderOptionGroup("\u955C\u5934", /* @__PURE__ */ React10.createElement(Image, { size: 16 }), "cameras", options.cameras, currentSelection?.cameraId), renderOptionGroup("\u97F3\u9891", /* @__PURE__ */ React10.createElement(Music, { size: 16 }), "audios", options.audios, currentSelection?.audioId), renderOptionGroup("\u821E\u53F0", /* @__PURE__ */ React10.createElement(Image, { size: 16 }), "stages", options.stages, currentSelection?.stageId));
   };
   return /* @__PURE__ */ React10.createElement("div", { className: "absolute right-0 top-0 h-full w-full max-w-sm transform bg-[#1a1a1e]/95 backdrop-blur-md shadow-2xl transition-transform duration-300 ease-in-out overflow-y-auto z-20 border-l border-white/10" }, /* @__PURE__ */ React10.createElement("div", { className: "sticky top-0 z-10 flex items-center justify-between border-b border-white/10 bg-[#1a1a1e]/95 p-4 backdrop-blur-md" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-lg font-semibold text-white" }, mode === "list" ? "\u64AD\u653E\u5217\u8868" : "\u81EA\u5B9A\u4E49\u573A\u666F"), /* @__PURE__ */ React10.createElement(
     "button",
@@ -4389,7 +4390,7 @@ var VNModal = ({ title, show, onClose, children }) => {
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: "fixed inset-0 flex items-center justify-center backdrop-blur-xl z-[1000000] pointer-events-auto transition-all animate-in fade-in zoom-in-95 duration-300 px-4",
+      className: "fixed inset-0 flex items-center justify-center backdrop-blur-xl z-[1000] pointer-events-auto transition-all animate-in fade-in zoom-in-95 duration-300 px-4",
       style: { background: "rgba(100, 116, 139, 0.3)" },
       onClick: onClose
     },
@@ -6312,499 +6313,595 @@ var MMDMusicPlayer = forwardRef(
   }
 );
 MMDMusicPlayer.displayName = "MMDMusicPlayer";
-
-// src/mmd/ar/types.ts
-var ARMode = /* @__PURE__ */ ((ARMode2) => {
-  ARMode2["Overlay"] = "overlay";
-  ARMode2["WorldFixed"] = "world-fixed";
-  return ARMode2;
-})(ARMode || {});
-function Select({
-  label,
-  options,
-  value,
-  onChange,
-  placeholder = "\u8BF7\u9009\u62E9...",
-  allowEmpty = false,
-  emptyLabel = "\u65E0"
-}) {
-  const selectedOption = options.find((opt) => opt.id === value);
-  const showPlaceholder = !selectedOption && !allowEmpty && value !== "";
-  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React10.createElement("label", { className: "block text-xs font-medium text-white/50 ml-1 uppercase tracking-wider" }, label), /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(
-    "select",
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      className: "w-full appearance-none bg-white/5 border border-white/10 rounded-xl px-4 py-3 pr-10 text-sm text-white focus:outline-none focus:border-cyan-500/50 transition-colors cursor-pointer hover:bg-white/10"
-    },
-    showPlaceholder && /* @__PURE__ */ React10.createElement("option", { value: "", disabled: true, className: "bg-gray-900 text-white/50" }, placeholder),
-    allowEmpty && /* @__PURE__ */ React10.createElement("option", { value: "", className: "bg-gray-900 text-white/60" }, emptyLabel),
-    options.map((option) => /* @__PURE__ */ React10.createElement(
-      "option",
-      {
-        key: option.id,
-        value: option.id,
-        className: "bg-gray-900 text-white"
-      },
-      option.name
-    ))
-  ), /* @__PURE__ */ React10.createElement(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none" })));
-}
-function ARModeSwitch({ mode, onChange, gyroSupported }) {
-  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React10.createElement("label", { className: "block text-xs font-medium text-white/50 ml-1 uppercase tracking-wider" }, "AR \u6A21\u5F0F"), /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      onClick: () => onChange("overlay" /* Overlay */),
-      className: `p-3 rounded-xl border transition-all flex flex-col items-center gap-1.5 ${mode === "overlay" /* Overlay */ ? "bg-cyan-500/20 border-cyan-500/50 text-cyan-400" : "bg-white/5 border-white/10 text-white/60 hover:bg-white/10"}`
-    },
-    /* @__PURE__ */ React10.createElement(Layers, { className: "w-5 h-5" }),
-    /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-medium" }, "\u53E0\u52A0\u6A21\u5F0F")
-  ), /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      onClick: () => gyroSupported && onChange("world-fixed" /* WorldFixed */),
-      disabled: !gyroSupported,
-      className: `p-3 rounded-xl border transition-all flex flex-col items-center gap-1.5 ${mode === "world-fixed" /* WorldFixed */ ? "bg-purple-500/20 border-purple-500/50 text-purple-400" : gyroSupported ? "bg-white/5 border-white/10 text-white/60 hover:bg-white/10" : "bg-white/5 border-white/10 text-white/30 cursor-not-allowed"}`,
-      title: gyroSupported ? "\u4E16\u754C\u56FA\u5B9A\u6A21\u5F0F" : "\u8BBE\u5907\u4E0D\u652F\u6301\u9640\u87BA\u4EEA"
-    },
-    /* @__PURE__ */ React10.createElement(Compass, { className: "w-5 h-5" }),
-    /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-medium" }, "\u4E16\u754C\u56FA\u5B9A"),
-    !gyroSupported && /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] text-red-400" }, "\u4E0D\u652F\u6301")
-  )), /* @__PURE__ */ React10.createElement("p", { className: "text-[10px] text-white/40 ml-1 mt-1" }, mode === "overlay" /* Overlay */ ? "\u6A21\u578B\u56FA\u5B9A\u5728\u5C4F\u5E55\u4E0A" : "\u6A21\u578B\u56FA\u5B9A\u5728\u4E16\u754C\u7A7A\u95F4\uFF0C\u79FB\u52A8\u8BBE\u5907\u67E5\u770B"));
+if (typeof window !== "undefined") {
+  window.THREE = THREE2;
 }
-var MMDARPlayer = forwardRef((props, ref) => {
-  const {
-    stage = {},
-    mobileOptimization,
-    cameraConfig = { facingMode: "user" },
-    mirrored,
-    showSettings = true,
-    modelPresets,
-    motionPresets,
-    audioPresets = [],
-    defaultModelId,
-    defaultMotionId,
-    defaultAudioId,
-    initialModelVisible = false,
-    placementText = "TOUCH!",
-    defaultARMode = "overlay" /* Overlay */,
-    autoPlay = true,
-    loop = true,
-    onCameraReady,
-    onCameraError,
-    onResourcesChange,
-    onModelPlaced,
-    onARModeChange,
-    onLoad,
-    onError,
-    className,
-    style
-  } = props;
-  const initialModelId = defaultModelId || modelPresets[0]?.id || "";
-  const initialMotionId = defaultMotionId || motionPresets[0]?.id || "";
-  const initialAudioId = defaultAudioId || audioPresets[0]?.id || "";
-  const videoRef = useRef(null);
-  const playerRef = useRef(null);
-  const streamRef = useRef(null);
+var MMDARPlayer = forwardRef(({
+  width = 800,
+  height = 600,
+  onReady,
+  onError
+}, ref) => {
   const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const sceneRef = useRef();
+  const cameraRef = useRef();
+  const rendererRef = useRef();
+  const arToolkitSourceRef = useRef();
+  const arToolkitContextRef = useRef();
+  const markerRootRef = useRef();
+  const markerControlsRef = useRef();
+  const modelRootRef = useRef();
+  const modelRef = useRef();
+  const [state, setState] = useState({
+    isLoading: true,
+    cameraReady: false,
+    arReady: false,
+    error: null,
+    showSettings: false,
+    modelPlaced: false,
+    markerDetected: false,
+    selectedModel: "sphere",
+    selectedMotion: "idle",
+    selectedAudio: "none",
+    cameraFacing: "environment",
+    markerType: "barcode",
+    showWireframe: false,
+    lightingEnabled: true,
+    quality: "medium"
+  });
   const gyroDataRef = useRef({ alpha: 0, beta: 0, gamma: 0 });
-  const initialOrientationRef = useRef(null);
-  const [isCameraStarted, setIsCameraStarted] = useState(false);
-  const [cameraError, setCameraError] = useState(null);
-  const [facingMode, setFacingMode] = useState(cameraConfig.facingMode || "user");
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [gyroSupported, setGyroSupported] = useState(false);
-  const [gyroPermissionDenied, setGyroPermissionDenied] = useState(false);
-  const [selectedModelId, setSelectedModelId] = useState(initialModelId);
-  const [selectedMotionId, setSelectedMotionId] = useState(initialMotionId);
-  const [selectedAudioId, setSelectedAudioId] = useState(initialAudioId);
-  const [isModelPlaced, setIsModelPlaced] = useState(initialModelVisible);
-  const [placementAnimation, setPlacementAnimation] = useState(false);
-  const [arMode, setARModeState] = useState(defaultARMode);
-  const [modelRotation, setModelRotation] = useState({ x: 0, y: 0, z: 0 });
-  const currentResources = useMemo(() => {
-    const model = modelPresets.find((m) => m.id === selectedModelId);
-    const motion = motionPresets.find((m) => m.id === selectedMotionId);
-    const audio = audioPresets.find((a) => a.id === selectedAudioId);
-    return {
-      modelPath: model?.modelPath || modelPresets[0]?.modelPath || "",
-      motionPath: motion?.motionPath || motionPresets[0]?.motionPath || "",
-      audioPath: audio?.audioPath
-    };
-  }, [selectedModelId, selectedMotionId, selectedAudioId, modelPresets, motionPresets, audioPresets]);
-  const shouldMirror = mirrored !== void 0 ? mirrored : facingMode === "user";
-  useEffect(() => {
-    const checkGyroSupport = async () => {
-      if (typeof window === "undefined") return;
-      if (!("DeviceOrientationEvent" in window)) {
-        setGyroSupported(false);
-        return;
+  const initializeThreeJS = useCallback(() => {
+    try {
+      const scene = new THREE2.Scene();
+      sceneRef.current = scene;
+      const camera = new THREE2.Camera();
+      cameraRef.current = camera;
+      scene.add(camera);
+      const renderer = new THREE2.WebGLRenderer({
+        canvas: canvasRef.current,
+        antialias: true,
+        alpha: true
+      });
+      renderer.setSize(width, height);
+      renderer.setClearColor(0, 0);
+      rendererRef.current = renderer;
+      console.log("Three.js initialized successfully");
+      return true;
+    } catch (error) {
+      console.error("Failed to initialize Three.js:", error);
+      setState((prev) => ({ ...prev, error: "Three.js \u521D\u59CB\u5316\u5931\u8D25" }));
+      return false;
+    }
+  }, [width, height]);
+  const requestCameraPermission = useCallback(async () => {
+    try {
+      console.log("Checking camera support...");
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6444\u50CF\u5934\u8BBF\u95EE");
       }
-      if (typeof DeviceOrientationEvent.requestPermission === "function") {
+      console.log("Camera API supported, checking permissions...");
+      if (navigator.permissions) {
         try {
-          const permission = await DeviceOrientationEvent.requestPermission();
-          setGyroSupported(permission === "granted");
-          setGyroPermissionDenied(permission === "denied");
-        } catch {
-          setGyroSupported(false);
+          console.log("Querying camera permission status...");
+          const permissionPromise = navigator.permissions.query({ name: "camera" });
+          const timeoutPromise2 = new Promise((_, reject) => {
+            setTimeout(() => reject(new Error("Permission query timeout")), 5e3);
+          });
+          const permissionStatus = await Promise.race([permissionPromise, timeoutPromise2]);
+          console.log("Permission status:", permissionStatus.state);
+          if (permissionStatus.state === "denied") {
+            throw new Error("\u6444\u50CF\u5934\u6743\u9650\u5DF2\u88AB\u62D2\u7EDD\uFF0C\u8BF7\u5728\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E2D\u5141\u8BB8\u8BBF\u95EE\u6444\u50CF\u5934");
+          }
+        } catch (permissionError) {
+          console.warn("Permission query failed or timed out, proceeding with getUserMedia:", permissionError);
         }
-      } else {
-        setGyroSupported(true);
       }
-    };
-    checkGyroSupport();
-  }, []);
-  useEffect(() => {
-    if (arMode !== "world-fixed" /* WorldFixed */ || !isModelPlaced || !gyroSupported) return;
-    const handleOrientation = (event) => {
-      const { alpha, beta, gamma } = event;
-      if (alpha === null || beta === null || gamma === null) return;
-      if (!initialOrientationRef.current) {
-        initialOrientationRef.current = { alpha, beta, gamma };
-      }
-      const initial = initialOrientationRef.current;
-      const deltaAlpha = alpha - initial.alpha;
-      const deltaBeta = beta - initial.beta;
-      const deltaGamma = gamma - initial.gamma;
-      gyroDataRef.current = { alpha: deltaAlpha, beta: deltaBeta, gamma: deltaGamma };
-      setModelRotation({
-        x: -deltaBeta * (Math.PI / 180) * 0.5,
-        // 俯仰
-        y: -deltaAlpha * (Math.PI / 180) * 0.5,
-        // 偏航
-        z: deltaGamma * (Math.PI / 180) * 0.3
-        // 翻滚
+      console.log("Requesting camera access...");
+      const cameraPromise = navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: width },
+          height: { ideal: height },
+          facingMode: "environment"
+          // 优先使用后置摄像头
+        }
       });
-    };
-    window.addEventListener("deviceorientation", handleOrientation, true);
-    return () => {
-      window.removeEventListener("deviceorientation", handleOrientation, true);
-    };
-  }, [arMode, isModelPlaced, gyroSupported]);
-  const requestGyroPermission = useCallback(async () => {
-    if (typeof DeviceOrientationEvent.requestPermission === "function") {
-      try {
-        const permission = await DeviceOrientationEvent.requestPermission();
-        setGyroSupported(permission === "granted");
-        setGyroPermissionDenied(permission === "denied");
-        return permission === "granted";
-      } catch {
-        return false;
-      }
+      const timeoutPromise = new Promise((_, reject) => {
+        setTimeout(() => reject(new Error("Camera access timeout - \u8BF7\u68C0\u67E5\u6444\u50CF\u5934\u6743\u9650")), 1e4);
+      });
+      const testStream = await Promise.race([cameraPromise, timeoutPromise]);
+      console.log("Camera access granted, stopping test stream...");
+      testStream.getTracks().forEach((track) => track.stop());
+      console.log("Camera permission granted successfully");
+      return true;
+    } catch (error) {
+      console.error("Camera permission denied:", error);
+      const errorMessage = error instanceof Error ? error.message : "\u65E0\u6CD5\u8BBF\u95EE\u6444\u50CF\u5934";
+      setState((prev) => ({ ...prev, error: errorMessage, isLoading: false }));
+      onError?.(errorMessage);
+      return false;
+    }
+  }, [width, height, onError]);
+  const createModel = useCallback((modelType) => {
+    let geometry;
+    let material;
+    let mesh;
+    switch (modelType) {
+      case "sphere":
+        geometry = new THREE2.SphereGeometry(0.5, 32, 32);
+        material = new THREE2.MeshPhongMaterial({
+          color: 16738740,
+          shininess: 100,
+          specular: 1118481
+        });
+        mesh = new THREE2.Mesh(geometry, material);
+        break;
+      case "cube":
+        geometry = new THREE2.BoxGeometry(0.8, 0.8, 0.8);
+        material = new THREE2.MeshPhongMaterial({
+          color: 65407,
+          shininess: 100,
+          specular: 1118481
+        });
+        mesh = new THREE2.Mesh(geometry, material);
+        break;
+      case "torus":
+        geometry = new THREE2.TorusGeometry(0.4, 0.2, 16, 100);
+        material = new THREE2.MeshPhongMaterial({
+          color: 16753920,
+          shininess: 100,
+          specular: 1118481
+        });
+        mesh = new THREE2.Mesh(geometry, material);
+        break;
+      default:
+        geometry = new THREE2.SphereGeometry(0.5, 32, 32);
+        material = new THREE2.MeshPhongMaterial({
+          color: 16738740,
+          shininess: 100,
+          specular: 1118481
+        });
+        mesh = new THREE2.Mesh(geometry, material);
     }
-    return true;
+    mesh.rotation.x = Math.PI / 4;
+    mesh.rotation.y = Math.PI / 4;
+    return mesh;
   }, []);
-  const setARMode = useCallback(async (mode) => {
-    if (mode === "world-fixed" /* WorldFixed */) {
-      const hasPermission = await requestGyroPermission();
-      if (!hasPermission) {
-        console.warn("[MMDARPlayer] Gyro permission denied, staying in Overlay mode");
-        return;
-      }
-      initialOrientationRef.current = null;
-    }
-    setARModeState(mode);
-    onARModeChange?.(mode);
-  }, [requestGyroPermission, onARModeChange]);
   const placeModel = useCallback(() => {
-    if (isModelPlaced) return;
-    setPlacementAnimation(true);
-    setIsLoading(true);
-    initialOrientationRef.current = null;
-    setTimeout(() => {
-      setIsModelPlaced(true);
-      setPlacementAnimation(false);
-      onModelPlaced?.();
-    }, 300);
-  }, [isModelPlaced, onModelPlaced]);
-  const removeModel = useCallback(() => {
-    setIsModelPlaced(false);
-    setIsLoading(false);
-    initialOrientationRef.current = null;
-  }, []);
-  const switchModel = useCallback((newResources) => {
-    const matchedModel = modelPresets.find((m) => m.modelPath === newResources.modelPath);
-    const matchedMotion = motionPresets.find((m) => m.motionPath === newResources.motionPath);
-    const matchedAudio = audioPresets.find((a) => a.audioPath === newResources.audioPath);
-    if (matchedModel) setSelectedModelId(matchedModel.id);
-    if (matchedMotion) setSelectedMotionId(matchedMotion.id);
-    if (matchedAudio) setSelectedAudioId(matchedAudio.id);
-    onResourcesChange?.(newResources);
-    if (isModelPlaced) {
-      setIsLoading(true);
-    }
-  }, [isModelPlaced, onResourcesChange, modelPresets, motionPresets, audioPresets]);
-  const applySettings = useCallback(() => {
-    onResourcesChange?.(currentResources);
-    setIsSettingsOpen(false);
-    if (isModelPlaced) {
-      setIsLoading(true);
+    if (!markerRootRef.current || !modelRootRef.current || !sceneRef.current) {
+      console.error("Cannot place model: missing required references");
+      return;
     }
-  }, [currentResources, isModelPlaced, onResourcesChange]);
-  const resetPosition = useCallback(() => {
-    setIsModelPlaced(false);
-    setIsLoading(false);
-    setIsSettingsOpen(false);
-    initialOrientationRef.current = null;
-    setModelRotation({ x: 0, y: 0, z: 0 });
-  }, []);
-  const startCamera = useCallback(async (mode = facingMode) => {
     try {
-      setCameraError(null);
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((track) => track.stop());
-      }
-      const constraints = {
-        video: {
-          facingMode: mode,
-          width: cameraConfig.width || { ideal: 1280 },
-          height: cameraConfig.height || { ideal: 720 }
-        },
-        audio: false
-      };
-      const stream = await navigator.mediaDevices.getUserMedia(constraints);
-      streamRef.current = stream;
-      if (videoRef.current) {
-        videoRef.current.srcObject = stream;
-        await videoRef.current.play();
-      }
-      setIsCameraStarted(true);
-      setFacingMode(mode);
-      onCameraReady?.(stream);
-    } catch (err) {
-      console.error("[MMDARPlayer] Camera access error:", err);
-      const errorMsg = err.name === "NotAllowedError" ? "\u6444\u50CF\u5934\u6743\u9650\u88AB\u62D2\u7EDD" : `\u65E0\u6CD5\u8BBF\u95EE\u6444\u50CF\u5934: ${err.message}`;
-      setCameraError(errorMsg);
-      onCameraError?.(err instanceof Error ? err : new Error(errorMsg));
-    }
-  }, [facingMode, cameraConfig, onCameraReady, onCameraError]);
-  const stopCamera = useCallback(() => {
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
+      if (modelRef.current) {
+        modelRootRef.current.remove(modelRef.current);
+      }
+      const model = createModel(state.selectedModel);
+      modelRef.current = model;
+      modelRootRef.current.position.copy(markerRootRef.current.position);
+      modelRootRef.current.quaternion.copy(markerRootRef.current.quaternion);
+      modelRootRef.current.add(model);
+      modelRootRef.current.visible = true;
+      setState((prev) => ({ ...prev, modelPlaced: true }));
+      console.log("Model placed successfully at marker position");
+    } catch (error) {
+      console.error("Failed to place model:", error);
+      setState((prev) => ({ ...prev, error: "\u653E\u7F6E\u6A21\u578B\u5931\u8D25" }));
     }
-    if (videoRef.current) {
-      videoRef.current.srcObject = null;
+  }, [state.selectedModel, createModel]);
+  const handleARSettingChange = useCallback((setting, value) => {
+    setState((prev) => ({ ...prev, [setting]: value }));
+    if (setting === "cameraFacing" || setting === "markerType" || setting === "quality") {
+      setTimeout(() => {
+        alert("\u6B64\u8BBE\u7F6E\u53D8\u66F4\u9700\u8981\u91CD\u65B0\u542F\u52A8 AR \u7CFB\u7EDF\u3002\u8BF7\u5237\u65B0\u9875\u9762\u4EE5\u5E94\u7528\u65B0\u8BBE\u7F6E\u3002");
+      }, 100);
     }
-    setIsCameraStarted(false);
   }, []);
-  const switchCamera = useCallback(async () => {
-    const newMode = facingMode === "user" ? "environment" : "user";
-    await startCamera(newMode);
-  }, [facingMode, startCamera]);
-  const snapshot = useCallback(async () => {
-    if (!videoRef.current || !playerRef.current) return "";
-    const canvas = document.createElement("canvas");
-    const video = videoRef.current;
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return "";
-    if (shouldMirror) {
-      ctx.translate(canvas.width, 0);
-      ctx.scale(-1, 1);
-    }
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    if (shouldMirror) {
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-    }
-    if (isModelPlaced) {
-      const mmdBase64 = playerRef.current.snapshot();
-      const mmdImg = new Image();
-      mmdImg.src = mmdBase64;
-      await new Promise((resolve) => {
-        mmdImg.onload = () => {
-          ctx.drawImage(mmdImg, 0, 0, canvas.width, canvas.height);
-          resolve(null);
-        };
-      });
+  const takePhoto = useCallback(() => {
+    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) {
+      console.error("Cannot take photo: missing required references");
+      return;
     }
-    return canvas.toDataURL("image/png");
-  }, [shouldMirror, isModelPlaced]);
-  useImperativeHandle(ref, () => ({
-    startCamera,
-    stopCamera,
-    switchCamera,
-    snapshot,
-    placeModel,
-    removeModel,
-    switchModel,
-    setARMode,
-    getARMode: () => arMode
-  }));
-  useEffect(() => {
-    if (autoPlay) {
-      startCamera();
+    try {
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      if (!context) {
+        throw new Error("Cannot create canvas context");
+      }
+      canvas.width = width;
+      canvas.height = height;
+      rendererRef.current.render(sceneRef.current, cameraRef.current);
+      const rendererCanvas = rendererRef.current.domElement;
+      context.drawImage(rendererCanvas, 0, 0, width, height);
+      if (arToolkitSourceRef.current && arToolkitSourceRef.current.domElement) {
+        const videoElement = arToolkitSourceRef.current.domElement;
+        context.globalCompositeOperation = "source-over";
+        context.drawImage(videoElement, 0, 0, width, height);
+      }
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = `ar-photo-${Date.now()}.png`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          console.log("Photo saved successfully");
+        }
+      }, "image/png");
+    } catch (error) {
+      console.error("Failed to take photo:", error);
+      setState((prev) => ({ ...prev, error: "\u62CD\u7167\u5931\u8D25" }));
     }
-    return () => stopCamera();
-  }, [autoPlay, startCamera, stopCamera]);
+  }, [width, height]);
+  const initializeAR = useCallback(async () => {
+    try {
+      console.log("Starting AR initialization...");
+      if (!window.__arjs_ready) {
+        console.log("Waiting for AR.js initialization...");
+        await new Promise((resolve, reject) => {
+          const check = setInterval(() => {
+            if (window.__arjs_ready) {
+              clearInterval(check);
+              console.log("AR.js initialization complete!");
+              resolve();
+            }
+          }, 50);
+          setTimeout(() => {
+            clearInterval(check);
+            reject(new Error("AR.js initialization timeout"));
+          }, 15e3);
+        });
+      }
+      console.log("Getting THREEx...");
+      const THREEx = window.THREEx;
+      if (!THREEx) {
+        console.error("THREEx not found, available window properties:", Object.keys(window).filter((key) => key.toLowerCase().includes("ar") || key.toLowerCase().includes("three")));
+        throw new Error("THREEx not found after AR.js loaded");
+      }
+      console.log("THREEx loaded successfully:", Object.keys(THREEx));
+      console.log("THREEx loaded, requesting camera permission...");
+      const hasPermission = await requestCameraPermission();
+      if (!hasPermission) {
+        console.log("Camera permission denied");
+        return false;
+      }
+      console.log("Camera permission granted, initializing AR Toolkit Source...");
+      const arToolkitSource = new THREEx.ArToolkitSource({
+        sourceType: "webcam",
+        sourceWidth: width,
+        sourceHeight: height,
+        // 使用用户选择的摄像头朝向
+        ...state.cameraFacing && { facingMode: state.cameraFacing }
+      });
+      arToolkitSourceRef.current = arToolkitSource;
+      const arToolkitContext = new THREEx.ArToolkitContext({
+        cameraParametersUrl: "data/camera_para.dat",
+        // 使用内建相机参数
+        detectionMode: "mono",
+        // 根据质量设置调整检测参数
+        ...state.quality && {
+          maxDetectionRate: state.quality === "high" ? 60 : state.quality === "medium" ? 30 : 15
+        }
+      });
+      arToolkitContextRef.current = arToolkitContext;
+      arToolkitContext.init(() => {
+        cameraRef.current.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
+        const markerRoot = new THREE2.Group();
+        sceneRef.current.add(markerRoot);
+        markerRootRef.current = markerRoot;
+        const markerGeometry = new THREE2.BoxGeometry(1, 1, 0.1);
+        const markerMaterial = new THREE2.MeshBasicMaterial({
+          color: 65280,
+          transparent: true,
+          opacity: 0.7,
+          wireframe: state.showWireframe
+          // 根据设置显示线框
+        });
+        const markerMesh = new THREE2.Mesh(markerGeometry, markerMaterial);
+        markerMesh.position.set(0, 0, 0);
+        markerRoot.add(markerMesh);
+        if (!state.showWireframe) {
+          const edges = new THREE2.EdgesGeometry(markerGeometry);
+          const lineMaterial = new THREE2.LineBasicMaterial({ color: 16777215 });
+          const wireframe = new THREE2.LineSegments(edges, lineMaterial);
+          markerRoot.add(wireframe);
+        }
+        const markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+          type: state.markerType,
+          ...state.markerType === "barcode" ? { barcodeValue: 0 } : { patternUrl: "data/patt.hiro" }
+        });
+        markerControlsRef.current = markerControls;
+        if (state.lightingEnabled) {
+          const ambientLight = new THREE2.AmbientLight(4210752, 0.6);
+          sceneRef.current.add(ambientLight);
+          const directionalLight = new THREE2.DirectionalLight(16777215, 0.8);
+          directionalLight.position.set(1, 1, 1);
+          sceneRef.current.add(directionalLight);
+        }
+        const modelRoot = new THREE2.Group();
+        modelRoot.visible = false;
+        sceneRef.current.add(modelRoot);
+        modelRootRef.current = modelRoot;
+        setState((prev) => ({
+          ...prev,
+          arReady: true,
+          isLoading: false
+        }));
+        onReady?.();
+        console.log("AR.js and marker system initialized successfully");
+      });
+      arToolkitSource.init(() => {
+        arToolkitSource.domElement.style.display = "none";
+        setState((prev) => ({ ...prev, cameraReady: true }));
+        console.log("Camera initialized successfully");
+      });
+      return true;
+    } catch (error) {
+      console.error("Failed to initialize AR.js:", error);
+      const errorMessage = error instanceof Error ? error.message : "AR.js \u521D\u59CB\u5316\u5931\u8D25";
+      setState((prev) => ({
+        ...prev,
+        error: errorMessage,
+        isLoading: false
+      }));
+      onError?.(errorMessage);
+      return false;
+    }
+  }, [width, height, requestCameraPermission, onReady, onError]);
+  const render = useCallback(() => {
+    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
+    requestAnimationFrame(render);
+    if (arToolkitSourceRef.current && arToolkitSourceRef.current.ready) {
+      arToolkitContextRef.current.update(arToolkitSourceRef.current.domElement);
+      if (markerRootRef.current && markerRootRef.current.visible !== state.markerDetected) {
+        setState((prev) => ({ ...prev, markerDetected: markerRootRef.current.visible }));
+      }
+    }
+    if (modelRef.current && state.modelPlaced) {
+      modelRef.current.rotation.y += 0.01;
+    }
+    rendererRef.current.render(sceneRef.current, cameraRef.current);
+  }, [state.markerDetected]);
   useEffect(() => {
-    onResourcesChange?.(currentResources);
-  }, [currentResources, onResourcesChange]);
-  const modelContainerStyle = useMemo(() => {
-    if (arMode !== "world-fixed" /* WorldFixed */) return {};
-    return {
-      transform: `rotateX(${modelRotation.x}rad) rotateY(${modelRotation.y}rad) rotateZ(${modelRotation.z}rad)`,
-      transformStyle: "preserve-3d",
-      transition: "transform 0.1s ease-out"
+    const initialize = async () => {
+      try {
+        setState((prev) => ({ ...prev, isLoading: true, error: null }));
+        if (!initializeThreeJS()) return;
+        await initializeAR();
+        if (window.DeviceOrientationEvent) {
+          const handleOrientation = (event) => {
+            gyroDataRef.current = {
+              alpha: event.alpha || 0,
+              beta: event.beta || 0,
+              gamma: event.gamma || 0
+            };
+            if (state.modelPlaced && modelRef.current) {
+            }
+          };
+          window.addEventListener("deviceorientation", handleOrientation);
+          const cleanupGyro = () => {
+            window.removeEventListener("deviceorientation", handleOrientation);
+          };
+          window.__gyroCleanup = cleanupGyro;
+        }
+        render();
+      } catch (error) {
+        console.error("Initialization failed:", error);
+        setState((prev) => ({
+          ...prev,
+          error: "\u7EC4\u4EF6\u521D\u59CB\u5316\u5931\u8D25",
+          isLoading: false
+        }));
+        onError?.("\u7EC4\u4EF6\u521D\u59CB\u5316\u5931\u8D25");
+      }
     };
-  }, [arMode, modelRotation]);
-  return /* @__PURE__ */ React10.createElement(
-    "div",
-    {
-      ref: containerRef,
-      className: `relative w-full h-full bg-black overflow-hidden ${className}`,
-      style
-    },
-    /* @__PURE__ */ React10.createElement(
-      "video",
-      {
-        ref: videoRef,
-        autoPlay: true,
-        playsInline: true,
-        muted: true,
-        className: `absolute inset-0 w-full h-full object-cover transition-transform duration-500 ${shouldMirror ? "scale-x-[-1]" : ""}`,
-        style: { zIndex: 0 }
+    initialize();
+    return () => {
+      if (rendererRef.current) {
+        rendererRef.current.dispose();
       }
-    ),
-    isModelPlaced && /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        className: `absolute inset-0 w-full h-full transition-all duration-500 ${placementAnimation ? "scale-110 opacity-0" : "scale-100 opacity-100"}`,
-        style: {
-          zIndex: 1,
-          ...modelContainerStyle
-        }
-      },
-      /* @__PURE__ */ React10.createElement(
-        MMDPlayerBase,
-        {
-          key: `${selectedModelId}-${selectedMotionId}-${selectedAudioId}-${arMode}`,
-          ref: playerRef,
-          resources: currentResources,
-          stage: {
-            ...stage,
-            backgroundColor: "transparent",
-            cameraPosition: stage.cameraPosition || { x: 0, y: 15, z: 40 }
-          },
-          mobileOptimization,
-          autoPlay: true,
-          loop,
-          onLoad: () => {
-            setIsLoading(false);
-            onLoad?.();
-          },
-          onError
+      if (arToolkitSourceRef.current) {
+        if (arToolkitSourceRef.current.domElement?.srcObject) {
+          const stream = arToolkitSourceRef.current.domElement.srcObject;
+          stream.getTracks().forEach((track) => track.stop());
         }
-      )
-    ),
-    !isModelPlaced && isCameraStarted && /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        className: "absolute inset-0 z-5 flex items-center justify-center",
-        onClick: placeModel
-      },
-      /* @__PURE__ */ React10.createElement(
-        "button",
-        {
-          onClick: placeModel,
-          className: `
-              relative group cursor-pointer
-              transition-all duration-300 ease-out
-              hover:scale-110 active:scale-95
-              ${placementAnimation ? "scale-150 opacity-0" : "scale-100 opacity-100"}
-            `
-        },
-        /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 -m-4 rounded-2xl bg-cyan-400/20 animate-ping" }),
-        /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 -m-2 rounded-xl bg-cyan-400/30 animate-pulse" }),
-        /* @__PURE__ */ React10.createElement("div", { className: "relative bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl shadow-cyan-500/50" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-black/80 backdrop-blur-xl px-8 py-6 rounded-xl flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(Sparkles, { className: "w-10 h-10 text-cyan-400 animate-pulse" }), /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 w-10 h-10 bg-cyan-400/30 blur-xl" })), /* @__PURE__ */ React10.createElement("span", { className: "text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 tracking-widest" }, placementText), /* @__PURE__ */ React10.createElement("span", { className: "text-xs text-white/50 font-medium" }, arMode === "world-fixed" /* WorldFixed */ ? "\u70B9\u51FB\u653E\u7F6E\u5230\u4E16\u754C\u7A7A\u95F4 \u{1F30D}" : "\u70B9\u51FB\u53EC\u5524 Miku \u2728"))),
-        /* @__PURE__ */ React10.createElement("div", { className: "absolute -top-2 -right-2 w-4 h-4 bg-yellow-400 rounded-full animate-bounce shadow-lg shadow-yellow-400/50" }),
-        /* @__PURE__ */ React10.createElement("div", { className: "absolute -bottom-1 -left-1 w-3 h-3 bg-pink-400 rounded-full animate-bounce delay-100 shadow-lg shadow-pink-400/50" })
-      )
-    ),
-    /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none flex flex-col justify-between p-6" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-start pointer-events-auto" }, cameraError ? /* @__PURE__ */ React10.createElement("div", { className: "bg-red-500/80 backdrop-blur-md text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm" }, /* @__PURE__ */ React10.createElement(AlertCircle, { className: "w-4 h-4" }), cameraError, /* @__PURE__ */ React10.createElement("button", { onClick: () => startCamera(), className: "ml-2 underline" }, "\u91CD\u8BD5")) : /* @__PURE__ */ React10.createElement("div", { className: `backdrop-blur-md text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm ${arMode === "world-fixed" /* WorldFixed */ ? "bg-purple-500/40" : "bg-black/40"}` }, arMode === "world-fixed" /* WorldFixed */ ? /* @__PURE__ */ React10.createElement(Compass, { className: "w-4 h-4 text-purple-400" }) : /* @__PURE__ */ React10.createElement(Camera, { className: "w-4 h-4 text-green-400" }), isCameraStarted ? isModelPlaced ? arMode === "world-fixed" /* WorldFixed */ ? "\u4E16\u754C\u56FA\u5B9A AR" : "\u53E0\u52A0 AR \u6A21\u5F0F" : "\u70B9\u51FB\u653E\u7F6E\u6A21\u578B" : "\u7B49\u5F85\u6444\u50CF\u5934..."), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2" }, showSettings && /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: () => setIsSettingsOpen(!isSettingsOpen),
-        className: `p-3 backdrop-blur-md rounded-full text-white transition-all active:scale-95 ${isSettingsOpen ? "bg-cyan-500" : "bg-white/10 hover:bg-white/20"}`
-      },
-      /* @__PURE__ */ React10.createElement(Settings, { className: "w-5 h-5" })
-    ), /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: switchCamera,
-        className: "p-3 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full text-white transition-all active:scale-95"
-      },
-      /* @__PURE__ */ React10.createElement(RefreshCw, { className: "w-5 h-5" })
-    ), /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: isCameraStarted ? stopCamera : () => startCamera(),
-        className: `p-3 backdrop-blur-md rounded-full text-white transition-all active:scale-95 ${isCameraStarted ? "bg-red-500/20 hover:bg-red-500/40" : "bg-green-500/20 hover:bg-green-500/40"}`
-      },
-      isCameraStarted ? /* @__PURE__ */ React10.createElement(CameraOff, { className: "w-5 h-5" }) : /* @__PURE__ */ React10.createElement(Camera, { className: "w-5 h-5" })
-    ))), isSettingsOpen && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-20 right-6 w-72 max-h-[75vh] overflow-y-auto bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl p-5 pointer-events-auto shadow-2xl animate-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between mb-5" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-white font-bold flex items-center gap-2" }, /* @__PURE__ */ React10.createElement(Settings, { className: "w-4 h-4 text-cyan-400" }), "AR \u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: () => setIsSettingsOpen(false),
-        className: "p-1.5 hover:bg-white/10 rounded-full transition-colors text-white/60"
-      },
-      /* @__PURE__ */ React10.createElement(X, { className: "w-4 h-4" })
-    )), /* @__PURE__ */ React10.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10.createElement(
-      ARModeSwitch,
-      {
-        mode: arMode,
-        onChange: setARMode,
-        gyroSupported
+        arToolkitSourceRef.current.domElement?.remove();
       }
-    ), gyroPermissionDenied && /* @__PURE__ */ React10.createElement("div", { className: "bg-red-500/10 border border-red-500/20 rounded-xl p-3 text-xs text-red-400" }, "\u9640\u87BA\u4EEA\u6743\u9650\u88AB\u62D2\u7EDD\uFF0C\u65E0\u6CD5\u4F7F\u7528\u4E16\u754C\u56FA\u5B9A\u6A21\u5F0F"), /* @__PURE__ */ React10.createElement("div", { className: "border-t border-white/10 pt-4" }), /* @__PURE__ */ React10.createElement(
-      Select,
-      {
-        label: "\u9009\u62E9\u6A21\u578B",
-        options: modelPresets,
-        value: selectedModelId,
-        onChange: setSelectedModelId
+      if (window.__gyroCleanup) {
+        window.__gyroCleanup();
       }
-    ), /* @__PURE__ */ React10.createElement(
-      Select,
-      {
-        label: "\u9009\u62E9\u52A8\u4F5C",
-        options: motionPresets,
-        value: selectedMotionId,
-        onChange: setSelectedMotionId
+    };
+  }, [initializeThreeJS, initializeAR, render, onError]);
+  return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, className: "relative w-full h-full bg-gray-900 overflow-hidden" }, /* @__PURE__ */ React10.createElement(
+    Script,
+    {
+      src: "https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js",
+      strategy: "afterInteractive",
+      onLoad: () => {
+        console.log("AR.js script loaded, checking THREEx...");
+        const checkTHREEx = () => {
+          if (window.THREEx) {
+            console.log("THREEx found! Properties:", Object.keys(window.THREEx));
+            window.__arjs_ready = true;
+            console.log("AR.js and THREEx ready!");
+          } else {
+            console.log("THREEx not ready yet, checking window object:", Object.keys(window).filter((key) => key.includes("THREEx") || key.includes("AR")));
+            setTimeout(checkTHREEx, 100);
+          }
+        };
+        checkTHREEx();
+      },
+      onError: (error) => {
+        console.error("Failed to load AR.js:", error);
+        setState((prev) => ({
+          ...prev,
+          error: "AR.js \u52A0\u8F7D\u5931\u8D25",
+          isLoading: false
+        }));
       }
-    ), audioPresets.length > 0 && /* @__PURE__ */ React10.createElement(
-      Select,
-      {
-        label: "\u9009\u62E9\u97F3\u4E50",
-        options: audioPresets,
-        value: selectedAudioId,
-        onChange: setSelectedAudioId,
-        allowEmpty: true,
-        emptyLabel: "\u{1F507} \u4E0D\u64AD\u653E\u97F3\u4E50"
-      }
-    ), /* @__PURE__ */ React10.createElement("div", { className: "pt-3 space-y-2" }, isModelPlaced && /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: applySettings,
-        className: "w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 shadow-lg shadow-cyan-500/20"
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "absolute inset-0 w-full h-full",
+      style: { display: state.arReady ? "block" : "none" }
+    }
+  ), state.isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-900 text-white" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" }), /* @__PURE__ */ React10.createElement("p", null, "\u6B63\u5728\u521D\u59CB\u5316 AR \u73AF\u5883..."))), state.error && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900 text-white" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center max-w-md" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-xl font-bold mb-4" }, "\u521D\u59CB\u5316\u5931\u8D25"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-200 mb-4" }, state.error), /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: () => window.location.reload(),
+      className: "px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
+    },
+    "\u91CD\u65B0\u52A0\u8F7D"
+  ))), state.arReady && !state.error && /* @__PURE__ */ React10.createElement(React10.Fragment, null, !state.modelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-4 rounded-lg" }, /* @__PURE__ */ React10.createElement("h3", { className: "font-bold mb-2" }, "AR \u653E\u7F6E\u8BF4\u660E"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-300" }, "1. \u5141\u8BB8\u6444\u50CF\u5934\u8BBF\u95EE\u6743\u9650", /* @__PURE__ */ React10.createElement("br", null), "2. \u51C6\u5907\u4E00\u4E2A\u6761\u7801\u6807\u8BB0 (\u503C: 0) \u6216 Hiro \u6807\u8BB0\u56FE\u6848", /* @__PURE__ */ React10.createElement("br", null), "3. \u5C06\u6444\u50CF\u5934\u5BF9\u51C6\u6807\u8BB0\uFF0C\u7EFF\u8272\u7ACB\u65B9\u4F53\u5C06\u51FA\u73B0\u5728\u6807\u8BB0\u4F4D\u7F6E", /* @__PURE__ */ React10.createElement("br", null), state.markerDetected ? /* @__PURE__ */ React10.createElement("span", { className: "text-green-400 font-bold" }, "\u2713 \u6807\u8BB0\u5DF2\u68C0\u6D4B\u5230\uFF01") : /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400" }, "\u7B49\u5F85\u6807\u8BB0\u68C0\u6D4B..."), /* @__PURE__ */ React10.createElement("br", null), '4. \u70B9\u51FB"\u653E\u7F6E\u6A21\u578B"\u6309\u94AE\u56FA\u5B9A\u6A21\u578B\u4F4D\u7F6E')), state.showSettings && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 right-4 bg-black/90 text-white p-4 rounded-lg min-w-80 max-w-sm max-h-96 overflow-y-auto" }, /* @__PURE__ */ React10.createElement("h3", { className: "font-bold mb-4 text-lg" }, "\u2699\uFE0F \u8BBE\u7F6E\u9762\u677F"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-blue-300" }, "\u{1F4F7} \u6444\u50CF\u5934\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6444\u50CF\u5934\u671D\u5411"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.cameraFacing,
+      onChange: (e) => handleARSettingChange("cameraFacing", e.target.value),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "environment" }, "\u540E\u7F6E\u6444\u50CF\u5934"),
+    /* @__PURE__ */ React10.createElement("option", { value: "user" }, "\u524D\u7F6E\u6444\u50CF\u5934")
+  ))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-green-300" }, "\u{1F3AF} AR \u68C0\u6D4B\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6807\u8BB0\u7C7B\u578B"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.markerType,
+      onChange: (e) => handleARSettingChange("markerType", e.target.value),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "barcode" }, "\u6761\u7801 (Barcode)"),
+    /* @__PURE__ */ React10.createElement("option", { value: "pattern" }, "\u56FE\u6848 (Hiro)")
+  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u68C0\u6D4B\u8D28\u91CF"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.quality,
+      onChange: (e) => handleARSettingChange("quality", e.target.value),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "low" }, "\u4F4E\u8D28\u91CF (15fps)"),
+    /* @__PURE__ */ React10.createElement("option", { value: "medium" }, "\u4E2D\u7B49\u8D28\u91CF (30fps)"),
+    /* @__PURE__ */ React10.createElement("option", { value: "high" }, "\u9AD8\u8D28\u91CF (60fps)")
+  )))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-purple-300" }, "\u{1F441}\uFE0F \u89C6\u89C9\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: state.showWireframe,
+      onChange: (e) => setState((prev) => ({ ...prev, showWireframe: e.target.checked })),
+      className: "mr-2"
+    }
+  ), /* @__PURE__ */ React10.createElement("span", { className: "text-sm" }, "\u663E\u793A\u7EBF\u6846")), /* @__PURE__ */ React10.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: state.lightingEnabled,
+      onChange: (e) => setState((prev) => ({ ...prev, lightingEnabled: e.target.checked })),
+      className: "mr-2"
+    }
+  ), /* @__PURE__ */ React10.createElement("span", { className: "text-sm" }, "\u542F\u7528\u5149\u7167")))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-orange-300" }, "\u{1F3AD} \u6A21\u578B\u4E0E\u52A8\u753B"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6A21\u578B\u9009\u62E9"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.selectedModel,
+      onChange: (e) => setState((prev) => ({ ...prev, selectedModel: e.target.value })),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "sphere" }, "\u{1F310} \u7403\u4F53"),
+    /* @__PURE__ */ React10.createElement("option", { value: "cube" }, "\u2B1C \u7ACB\u65B9\u4F53"),
+    /* @__PURE__ */ React10.createElement("option", { value: "torus" }, "\u2B55 \u5706\u73AF")
+  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u52A8\u4F5C\u9009\u62E9"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.selectedMotion,
+      onChange: (e) => setState((prev) => ({ ...prev, selectedMotion: e.target.value })),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "idle" }, "\u{1F9D8} \u5F85\u673A"),
+    /* @__PURE__ */ React10.createElement("option", { value: "dance" }, "\u{1F483} \u821E\u8E48"),
+    /* @__PURE__ */ React10.createElement("option", { value: "wave" }, "\u{1F44B} \u6325\u624B")
+  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u97F3\u4E50\u9009\u62E9"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: state.selectedAudio,
+      onChange: (e) => setState((prev) => ({ ...prev, selectedAudio: e.target.value })),
+      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "none" }, "\u{1F507} \u65E0\u97F3\u4E50"),
+    /* @__PURE__ */ React10.createElement("option", { value: "bgm1" }, "\u{1F3B5} \u80CC\u666F\u97F3\u4E50 1"),
+    /* @__PURE__ */ React10.createElement("option", { value: "bgm2" }, "\u{1F3B6} \u80CC\u666F\u97F3\u4E50 2")
+  )))), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-red-300" }, "\u{1F3AE} \u63A7\u5236\u64CD\u4F5C"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: () => {
+        if (modelRootRef.current) {
+          modelRootRef.current.visible = false;
+        }
+        if (markerRootRef.current) {
+          markerRootRef.current.visible = true;
+        }
+        setState((prev) => ({ ...prev, modelPlaced: false, markerDetected: false }));
       },
-      /* @__PURE__ */ React10.createElement(Sparkles, { className: "w-4 h-4" }),
-      "\u5E94\u7528\u66F4\u6539"
-    ), /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: resetPosition,
-        className: `w-full ${isModelPlaced ? "bg-white/5 hover:bg-white/10 text-white/70" : "bg-cyan-500 hover:bg-cyan-600 text-white shadow-lg shadow-cyan-500/20"} font-medium py-3 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 border border-white/10`
+      className: "w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded transition-colors text-sm"
+    },
+    "\u{1F504} \u91CD\u65B0\u8BBE\u7F6E\u6807\u8BB0\u70B9"
+  ), /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: () => {
+        if (modelRootRef.current) {
+          modelRootRef.current.clear();
+          modelRootRef.current.visible = false;
+        }
+        if (markerRootRef.current) {
+          markerRootRef.current.visible = true;
+        }
+        setState((prev) => ({
+          ...prev,
+          modelPlaced: false,
+          markerDetected: false,
+          selectedModel: "sphere",
+          selectedMotion: "idle",
+          selectedAudio: "none"
+        }));
       },
-      /* @__PURE__ */ React10.createElement(RotateCcw, { className: "w-4 h-4" }),
-      isModelPlaced ? "\u91CD\u7F6E\u4F4D\u7F6E" : "\u5F00\u59CB\u653E\u7F6E"
-    )))), isLoading && isModelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "w-12 h-12 border-4 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" }), /* @__PURE__ */ React10.createElement("div", { className: "text-white text-sm font-medium bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm" }, arMode === "world-fixed" /* WorldFixed */ ? "\u6B63\u5728\u5B9A\u4F4D\u5230\u4E16\u754C\u7A7A\u95F4..." : "\u6B63\u5728\u53EC\u5524 Miku..."))))
-  );
+      className: "w-full px-3 py-2 bg-red-600 hover:bg-red-700 rounded transition-colors text-sm"
+    },
+    "\u{1F5D1}\uFE0F \u6E05\u9664\u6240\u6709"
+  ))))), /* @__PURE__ */ React10.createElement("div", { className: "absolute bottom-4 left-4 right-4 flex justify-center space-x-4" }, /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: () => setState((prev) => ({ ...prev, showSettings: !prev.showSettings })),
+      className: "px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
+    },
+    "\u2699\uFE0F \u8BBE\u7F6E"
+  ), !state.modelPlaced && /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: placeModel,
+      disabled: !state.markerDetected,
+      className: `px-6 py-2 rounded-lg transition-colors ${state.markerDetected ? "bg-green-600 hover:bg-green-700 text-white" : "bg-gray-500 text-gray-300 cursor-not-allowed"}`
+    },
+    "\u{1F4CD} \u653E\u7F6E\u6A21\u578B"
+  ), state.modelPlaced && /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: takePhoto,
+      className: "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+    },
+    "\u{1F4F8} \u62CD\u7167"
+  )), /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 right-4 flex space-x-2" }, /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.cameraReady ? "bg-green-400" : "bg-red-400"}`, title: "\u6444\u50CF\u5934" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.arReady ? "bg-green-400" : "bg-red-400"}`, title: "AR" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${window.DeviceOrientationEvent ? "bg-purple-400" : "bg-gray-400"}`, title: "\u9640\u87BA\u4EEA" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.markerDetected ? "bg-blue-400" : "bg-gray-400"}`, title: "\u6807\u8BB0\u68C0\u6D4B" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.modelPlaced && modelRootRef.current?.visible ? "bg-green-400" : "bg-yellow-400"}`, title: "\u6A21\u578B" }))));
 });
 MMDARPlayer.displayName = "MMDARPlayer";
 
+// src/mmd/ar/types.ts
+var ARMode = /* @__PURE__ */ ((ARMode2) => {
+  ARMode2["Overlay"] = "overlay";
+  ARMode2["WorldFixed"] = "world-fixed";
+  return ARMode2;
+})(ARMode || {});
+
 // src/mmd/fx/HLSLToGLSLConverter.ts
 var HLSLToGLSLConverter = class {
   constructor() {