Initial commit: CarrotSkin project setup

src/components/SkinViewer.tsx

@@ -15,6 +15,7 @@ interface SkinViewerProps {
   running?: boolean; // 新增：跑步动画
   jumping?: boolean; // 新增：跳跃动画
   rotation?: boolean; // 新增：旋转控制
+  isExternalPreview?: boolean; // 新增：是否为外部预览
 }
 
 export default function SkinViewer({
@@ -29,6 +30,7 @@ export default function SkinViewer({
   running = false,
   jumping = false,
   rotation = true,
+  isExternalPreview = false, // 新增：默认为false
 }: SkinViewerProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const viewerRef = useRef<SkinViewer3D | null>(null);
@@ -92,11 +94,19 @@ export default function SkinViewer({
 
       // 设置背景和控制选项 - 参考blessingskin
       viewer.background = null; // 透明背景
-      viewer.autoRotate = autoRotate && !walking && !running && !jumping; // 只在无动画时自动旋转
+      viewer.autoRotate = false; // 完全禁用自动旋转
+      
+      // 外部预览时禁用所有动画和旋转
+      if (isExternalPreview) {
+        viewer.autoRotate = false;
+        viewer.controls.enableRotate = false; // 禁用旋转控制
+        viewer.controls.enableZoom = false;   // 禁用缩放
+      } else {
+        viewer.autoRotate = autoRotate && !walking && !running && !jumping;
+        viewer.controls.enableRotate = rotation; // 根据参数控制旋转
+        viewer.controls.enableZoom = true;   // 启用缩放
+      }
       
-      // 设置交互控制
-      viewer.controls.enableRotate = rotation; // 根据参数控制旋转
-      viewer.controls.enableZoom = true;   // 启用缩放
       viewer.controls.enablePan = false;    // 禁用平移
 
       console.log('3D皮肤查看器初始化成功');
@@ -118,7 +128,7 @@ export default function SkinViewer({
         }
       }
     };
-  }, [skinUrl, capeUrl, isSlim, width, height, autoRotate, walking, running, jumping, rotation, imageLoaded, hasError]);
+  }, [skinUrl, capeUrl, isSlim, width, height, autoRotate, walking, running, jumping, rotation, imageLoaded, hasError, isExternalPreview]);
 
   // 控制动画效果 - 参考 Blessing Skin 的实现
   useEffect(() => {
@@ -126,29 +136,36 @@ export default function SkinViewer({
 
     const viewer = viewerRef.current;
     
-    // 根据优先级设置动画 - 参考 Blessing Skin 的 animationFactories
-    if (running) {
-      // 跑步动画
-      viewer.animation = new RunningAnimation();
-      console.log('启用跑步动画');
-    } else if (walking) {
-      // 普通步行动画
-      viewer.animation = new WalkingAnimation();
-      console.log('启用步行动画');
-    } else if (jumping) {
-      // 飞行动画作为跳跃
-      viewer.animation = new FlyingAnimation();
-      console.log('启用跳跃动画');
-    } else {
-      // 静止动画
+    // 外部预览时只使用静止动画，禁用所有其他动画
+    if (isExternalPreview) {
       viewer.animation = new IdleAnimation();
-      console.log('启用静止动画');
+      viewer.autoRotate = false;
+      console.log('外部预览模式：启用静止动画，禁用旋转');
+    } else {
+      // 根据优先级设置动画 - 参考 Blessing Skin 的 animationFactories
+      if (running) {
+        // 跑步动画
+        viewer.animation = new RunningAnimation();
+        console.log('启用跑步动画');
+      } else if (walking) {
+        // 普通步行动画
+        viewer.animation = new WalkingAnimation();
+        console.log('启用步行动画');
+      } else if (jumping) {
+        // 飞行动画作为跳跃
+        viewer.animation = new FlyingAnimation();
+        console.log('启用跳跃动画');
+      } else {
+        // 静止动画
+        viewer.animation = new IdleAnimation();
+        console.log('启用静止动画');
+      }
+      
+      // 更新自动旋转状态
+      viewer.autoRotate = autoRotate && !walking && !running && !jumping;
     }
     
-    // 更新自动旋转状态
-    viewer.autoRotate = autoRotate && !walking && !running && !jumping;
-    
-  }, [walking, running, jumping, autoRotate]);
+  }, [walking, running, jumping, autoRotate, isExternalPreview]);
 
   // 当皮肤URL改变时更新
   useEffect(() => {