sa2kit 1.6.78 → 1.6.80

package/dist/mmd/index.mjs

@@ -7105,6 +7105,42 @@ var DEFAULT_AR_ASSETS = {
 
 // src/ar/load-arjs.ts
 var loadPromise = null;
+function isTHREExNamespace(value) {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value;
+  return typeof candidate.ArToolkitSource === "function" && typeof candidate.ArToolkitContext === "function" && typeof candidate.ArMarkerControls === "function";
+}
+function resolveTHREExNamespace(moduleExports) {
+  const arWindow = window;
+  const globalTHREEx = arWindow.THREEx;
+  if (isTHREExNamespace(globalTHREEx)) {
+    return globalTHREEx;
+  }
+  if (isTHREExNamespace(moduleExports)) {
+    return moduleExports;
+  }
+  const record = moduleExports;
+  const defaultExport = record?.default;
+  if (isTHREExNamespace(defaultExport)) {
+    return defaultExport;
+  }
+  if (isTHREExNamespace(record?.THREEx)) {
+    return record?.THREEx;
+  }
+  const arjsCandidate = record?.ARjs ?? defaultExport ?? record ?? arWindow.ARjs;
+  const arjsRecord = arjsCandidate;
+  const source = arjsRecord?.Source;
+  const context = arjsRecord?.Context;
+  const markerControls = arjsRecord?.MarkerControls;
+  if (typeof source === "function" && typeof context === "function" && typeof markerControls === "function") {
+    return {
+      ArToolkitSource: source,
+      ArToolkitContext: context,
+      ArMarkerControls: markerControls
+    };
+  }
+  return void 0;
+}
 async function loadARJS(options = {}) {
   if (typeof window === "undefined") {
     throw new Error("AR.js can only be loaded in a browser environment.");
@@ -7114,15 +7150,18 @@ async function loadARJS(options = {}) {
   }
   const existing = window.THREEx;
   if (existing && !options.forceReload) {
-    return existing;
+    if (isTHREExNamespace(existing)) {
+      return existing;
+    }
   }
   if (!loadPromise || options.forceReload) {
     const importPromise = options.locationOnly ? import('@ar-js-org/ar.js/three.js/build/ar-threex-location-only.js') : import('@ar-js-org/ar.js/three.js/build/ar-threex.js');
-    loadPromise = importPromise.then(() => {
-      const THREEx = window.THREEx;
+    loadPromise = importPromise.then((loadedModule) => {
+      const THREEx = resolveTHREExNamespace(loadedModule);
       if (!THREEx) {
-        throw new Error("AR.js loaded, but THREEx namespace was not found.");
+        throw new Error("AR.js loaded, but THREEx namespace was not found in module exports or window.");
       }
+      window.THREEx = THREEx;
       return THREEx;
     });
   }
@@ -7165,6 +7204,7 @@ var MMDARApp = forwardRef((props, ref) => {
     cameraConfig,
     cameraParametersUrl,
     markerConfig,
+    markerPlacementMode = "manual",
     mirrored = false,
     showSettings,
     modelPresets,
@@ -7206,6 +7246,7 @@ var MMDARApp = forwardRef((props, ref) => {
   const mmdMeshRef = useRef(null);
   const animationFrameRef = useRef(null);
   const markerDetectedRef = useRef(false);
+  const markerPlacedOnceRef = useRef(false);
   const audioRef = useRef(null);
   const autoPlayRef = useRef(autoPlay);
   const [isLoading, setIsLoading] = useState(true);
@@ -7236,6 +7277,7 @@ var MMDARApp = forwardRef((props, ref) => {
     return {
       type: markerConfig?.type ?? "pattern",
       patternUrl: markerConfig?.patternUrl ?? DEFAULT_AR_ASSETS.patternUrl,
+      descriptorsUrl: markerConfig?.descriptorsUrl,
       barcodeValue: markerConfig?.barcodeValue ?? 0,
       changeMatrixMode: markerConfig?.changeMatrixMode ?? "modelViewMatrix"
     };
@@ -7308,14 +7350,24 @@ var MMDARApp = forwardRef((props, ref) => {
         modelRootRef.current.quaternion.identity();
         updateModelPlacement(true);
       } else {
-        if (modelRootRef.current.parent !== sceneRef.current) {
-          modelRootRef.current.parent?.remove(modelRootRef.current);
-          sceneRef.current.add(modelRootRef.current);
+        if (markerPlacementMode === "follow-marker" && markerRootRef.current) {
+          if (modelRootRef.current.parent !== markerRootRef.current) {
+            modelRootRef.current.parent?.remove(modelRootRef.current);
+            markerRootRef.current.add(modelRootRef.current);
+          }
+          modelRootRef.current.position.set(0, 0, 0);
+          modelRootRef.current.quaternion.identity();
+          updateModelPlacement(markerDetectedRef.current);
+        } else {
+          if (modelRootRef.current.parent !== sceneRef.current) {
+            modelRootRef.current.parent?.remove(modelRootRef.current);
+            sceneRef.current.add(modelRootRef.current);
+          }
+          updateModelPlacement(initialModelVisible);
         }
-        updateModelPlacement(initialModelVisible);
       }
     },
-    [initialModelVisible, updateModelPlacement]
+    [initialModelVisible, markerPlacementMode, updateModelPlacement]
   );
   const stopCameraStream = useCallback(() => {
     const source = arToolkitSourceRef.current;
@@ -7342,6 +7394,7 @@ var MMDARApp = forwardRef((props, ref) => {
     arToolkitSourceRef.current = null;
     arToolkitContextRef.current = null;
     markerDetectedRef.current = false;
+    markerPlacedOnceRef.current = false;
     setMarkerDetected(false);
     setCameraReady(false);
     setArReady(false);
@@ -7417,6 +7470,13 @@ var MMDARApp = forwardRef((props, ref) => {
           if (isVisible !== markerDetectedRef.current) {
             markerDetectedRef.current = isVisible;
             setMarkerDetected(isVisible);
+            if (resolvedARMode !== "overlay" /* Overlay */ && markerPlacementMode === "follow-marker") {
+              updateModelPlacement(isVisible);
+              if (isVisible && !markerPlacedOnceRef.current) {
+                markerPlacedOnceRef.current = true;
+                onModelPlaced?.();
+              }
+            }
           }
         }
       }
@@ -7427,10 +7487,15 @@ var MMDARApp = forwardRef((props, ref) => {
       renderer.render(scene, camera);
     };
     render();
-  }, []);
+  }, [markerPlacementMode, onModelPlaced, resolvedARMode, updateModelPlacement]);
   const setupAR = useCallback(async (facingOverride) => {
     if (!sceneRef.current || !cameraRef.current) return;
     const THREEx = await loadARJS({ three: THREE2 });
+    if (resolvedMarkerConfig.type === "nft" && !resolvedMarkerConfig.descriptorsUrl) {
+      throw new Error(
+        'markerConfig.descriptorsUrl is required when markerConfig.type is "nft".'
+      );
+    }
     const facingMode = facingOverride ?? cameraFacing;
     const sourceWidth = typeof cameraConfig?.width === "number" ? cameraConfig.width : cameraConfig?.width?.ideal;
     const sourceHeight = typeof cameraConfig?.height === "number" ? cameraConfig.height : cameraConfig?.height?.ideal;
@@ -7450,6 +7515,7 @@ var MMDARApp = forwardRef((props, ref) => {
     const markerRoot = new THREE2.Group();
     markerRootRef.current = markerRoot;
     sceneRef.current.add(markerRoot);
+    attachModelRoot(resolvedARMode);
     markerControlsRef.current = new THREEx.ArMarkerControls(
       arToolkitContext,
       markerRoot,
@@ -7490,6 +7556,8 @@ var MMDARApp = forwardRef((props, ref) => {
     mirrored,
     onCameraReady,
     resize,
+    attachModelRoot,
+    resolvedARMode,
     resolvedMarkerConfig
   ]);
   const loadMMDResources = useCallback(async () => {
@@ -7583,12 +7651,19 @@ var MMDARApp = forwardRef((props, ref) => {
       onModelPlaced?.();
       return;
     }
+    if (markerPlacementMode === "follow-marker") {
+      updateModelPlacement(markerDetectedRef.current);
+      if (markerDetectedRef.current) {
+        onModelPlaced?.();
+      }
+      return;
+    }
     if (!markerRootRef.current) return;
     modelRootRef.current.position.copy(markerRootRef.current.position);
     modelRootRef.current.quaternion.copy(markerRootRef.current.quaternion);
     updateModelPlacement(true);
     onModelPlaced?.();
-  }, [onModelPlaced, resolvedARMode, updateModelPlacement]);
+  }, [markerPlacementMode, onModelPlaced, resolvedARMode, updateModelPlacement]);
   const removeModel = useCallback(() => {
     updateModelPlacement(false);
   }, [updateModelPlacement]);
@@ -7741,7 +7816,7 @@ var MMDARApp = forwardRef((props, ref) => {
     /* @__PURE__ */ React10.createElement("canvas", { ref: canvasRef, className: "absolute inset-0 w-full h-full", style: mirroredStyle }),
     isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/70 text-white z-20" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-b-2 border-white mx-auto mb-3" }), /* @__PURE__ */ React10.createElement("div", null, "Initializing AR..."))),
     error && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-950/80 text-white z-20" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center max-w-sm px-4" }, /* @__PURE__ */ React10.createElement("div", { className: "text-lg font-semibold mb-2" }, "AR Error"), /* @__PURE__ */ React10.createElement("div", { className: "text-sm text-red-200" }, error))),
-    arReady && !error && /* @__PURE__ */ React10.createElement(React10.Fragment, null, resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-3 rounded-lg text-sm z-10" }, /* @__PURE__ */ React10.createElement("div", { className: "font-semibold mb-1" }, "Marker Placement"), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-200" }, 'Align the marker in view, then tap "', placementText, '" to place the model.'), /* @__PURE__ */ React10.createElement("div", { className: "mt-2" }, markerDetected ? /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, "Marker detected") : /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400" }, "Waiting for marker..."))), /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 right-4 flex items-center space-x-2 z-10" }, /* @__PURE__ */ React10.createElement(
+    arReady && !error && /* @__PURE__ */ React10.createElement(React10.Fragment, null, resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-3 rounded-lg text-sm z-10" }, /* @__PURE__ */ React10.createElement("div", { className: "font-semibold mb-1" }, "Marker Placement"), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-200" }, markerPlacementMode === "follow-marker" ? "Align the marker in view, model will be placed automatically." : `Align the marker in view, then tap "${placementText}" to place the model.`), /* @__PURE__ */ React10.createElement("div", { className: "mt-2" }, markerDetected ? /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, "Marker detected") : /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400" }, "Waiting for marker..."))), /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 right-4 flex items-center space-x-2 z-10" }, /* @__PURE__ */ React10.createElement(
       "span",
       {
         className: clsx("h-2.5 w-2.5 rounded-full", cameraReady ? "bg-green-400" : "bg-red-400"),
@@ -7766,7 +7841,7 @@ var MMDARApp = forwardRef((props, ref) => {
         className: "px-4 py-2 rounded-lg bg-gray-700 text-white hover:bg-gray-600"
       },
       "Settings"
-    ), resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10.createElement(
+    ), resolvedARMode !== "overlay" /* Overlay */ && markerPlacementMode === "manual" && !modelPlaced && /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: placeModel,
@@ -7833,6 +7908,13 @@ var MMDARApp = forwardRef((props, ref) => {
       },
       /* @__PURE__ */ React10.createElement("option", { value: "overlay" /* Overlay */ }, "Overlay"),
       /* @__PURE__ */ React10.createElement("option", { value: "world-fixed" /* WorldFixed */ }, "World Fixed")
+    )), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Marker Placement", /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        value: markerPlacementMode === "follow-marker" ? "Auto Follow" : "Manual Place",
+        readOnly: true,
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1 opacity-70"
+      }
     )), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Camera", /* @__PURE__ */ React10.createElement(
       "select",
       {