add: skin viewer, refatoring to api

src/renderer/components/SkinViewer.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+
+interface SkinViewerProps {
+  width?: number;
+  height?: number;
+  skinUrl?: string;
+  capeUrl?: string;
+  walkingSpeed?: number;
+  autoRotate?: boolean;
+}
+
+export default function SkinViewer({
+  width = 300,
+  height = 400,
+  skinUrl,
+  capeUrl,
+  walkingSpeed = 0.5,
+  autoRotate = true,
+}: SkinViewerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const viewerRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+
+    // Используем динамический импорт для обхода проблемы ESM/CommonJS
+    const initSkinViewer = async () => {
+      try {
+        const skinview3d = await import('skinview3d');
+
+        // Создаем просмотрщик скина по документации
+        const viewer = new skinview3d.SkinViewer({
+          canvas: canvasRef.current,
+          width,
+          height,
+          skin: skinUrl || undefined,
+          cape: capeUrl || undefined,
+        });
+
+        // Настраиваем вращение
+        viewer.autoRotate = autoRotate;
+
+        // Настраиваем анимацию ходьбы
+        viewer.animation = new skinview3d.WalkingAnimation();
+        viewer.animation.speed = walkingSpeed;
+
+        // Сохраняем экземпляр для очистки
+        viewerRef.current = viewer;
+      } catch (error) {
+        console.error('Ошибка при инициализации skinview3d:', error);
+      }
+    };
+
+    initSkinViewer();
+
+    // Очистка при размонтировании
+    return () => {
+      if (viewerRef.current) {
+        viewerRef.current.dispose();
+      }
+    };
+  }, [width, height, skinUrl, capeUrl, walkingSpeed, autoRotate]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={width}
+      height={height}
+      style={{ display: 'block' }}
+    />
+  );
+}