blacktrigram 0.7.2

package/lib/components/shared/three/anatomy/Foot3D.js

@@ -0,0 +1,178 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as THREE from "three";
+//#region src/components/shared/three/anatomy/Foot3D.tsx
+/**
+* Foot3D component with anatomically accurate foot geometry
+*
+* Renders detailed 3D foot with proper dimensions for martial arts stances
+* and kicks. Supports left/right feet with Korean skin tone coloring.
+*
+* Implements anatomically correct foot proportions:
+* - Length: ~26-29cm (varies by archetype)
+* - Width: ~10cm at widest point
+* - Height: ~8cm at ankle
+*
+* @module components/three/Foot3D
+* @category 3D Components
+* @korean 발3D컴포넌트
+*/
+/**
+* Foot3D Component
+*
+* Complete foot geometry with anatomically correct dimensions suitable
+* for Korean martial arts stance visualization and kick animations.
+*
+* Design notes:
+* - Main foot body is box-shaped with rounded edges
+* - Toe area is slightly elevated and separated
+* - Heel is wider than toe area for stability
+* - Dimensions scale with archetype (Amsalja: smaller, Jojik: larger)
+*
+* @example
+* ```tsx
+* <Foot3D
+*   side="right"
+*   skinColor={0xffdbac}
+*   scale={1.0}
+*   isHighlighted={false}
+* />
+* ```
+*
+* @korean 발3D컴포넌트
+*/
+var Foot3D = ({ side, skinColor = 16767916, scale = 1, isHighlighted = false }) => {
+	const footDimensions = useMemo(() => {
+		const footLength = .26 * scale;
+		const footWidth = .1 * scale;
+		const footHeight = .08 * scale;
+		return {
+			footLength,
+			footWidth,
+			footHeight,
+			toeLength: footLength * .3,
+			toeWidth: footWidth * .9,
+			toeHeight: footHeight * .6,
+			heelLength: footLength * .7
+		};
+	}, [scale]);
+	const footColor = useMemo(() => {
+		if (isHighlighted) return KOREAN_COLORS.ACCENT_GOLD;
+		return skinColor;
+	}, [isHighlighted, skinColor]);
+	const skinMaterial = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color: footColor,
+		metalness: 0,
+		roughness: .8,
+		clearcoat: .3,
+		clearcoatRoughness: .5,
+		transmission: 0,
+		thickness: .1,
+		ior: 1.4,
+		sheen: .1,
+		sheenRoughness: .8,
+		emissive: new THREE.Color(footColor),
+		emissiveIntensity: isHighlighted ? .3 : .02
+	}), [footColor, isHighlighted]);
+	useEffect(() => {
+		return () => {
+			skinMaterial.dispose();
+		};
+	}, [skinMaterial]);
+	return /* @__PURE__ */ jsxs("group", {
+		name: `foot-3d-${side}`,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					0,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `foot-ankle-bridge-${side}`,
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					footDimensions.footHeight * .6,
+					10,
+					10
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: skinMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					-footDimensions.footHeight * .2,
+					footDimensions.heelLength * .1
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `foot-ankle-transition-${side}`,
+				children: [/* @__PURE__ */ jsx("cylinderGeometry", { args: [
+					footDimensions.footHeight * .5,
+					footDimensions.footWidth * .45,
+					footDimensions.footHeight * .4,
+					8
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: skinMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					-footDimensions.footHeight * .4,
+					footDimensions.heelLength * .2
+				],
+				rotation: [
+					Math.PI / 2,
+					0,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `foot-heel-${side}`,
+				children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+					footDimensions.footWidth * .45,
+					footDimensions.heelLength * .5,
+					4,
+					8
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: skinMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					-footDimensions.footHeight * .35 + footDimensions.toeHeight * .2,
+					footDimensions.heelLength * .7 + footDimensions.toeLength / 2
+				],
+				rotation: [
+					Math.PI / 2,
+					0,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `foot-toes-${side}`,
+				children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+					footDimensions.toeWidth * .35,
+					footDimensions.toeLength * .4,
+					4,
+					8
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: skinMaterial,
+					attach: "material"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Foot3D as default };
+
+//# sourceMappingURL=Foot3D.js.map

package/lib/components/shared/three/anatomy/Foot3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Foot3D.js","names":[],"sources":["../../../../../src/components/shared/three/anatomy/Foot3D.tsx"],"sourcesContent":["/**\n * Foot3D component with anatomically accurate foot geometry\n *\n * Renders detailed 3D foot with proper dimensions for martial arts stances\n * and kicks. Supports left/right feet with Korean skin tone coloring.\n *\n * Implements anatomically correct foot proportions:\n * - Length: ~26-29cm (varies by archetype)\n * - Width: ~10cm at widest point\n * - Height: ~8cm at ankle\n *\n * @module components/three/Foot3D\n * @category 3D Components\n * @korean 발3D컴포넌트\n */\n\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\n\n/**\n * Props for Foot3D component\n *\n * @public\n * @korean 발3D속성\n */\nexport interface Foot3DProps {\n  /**\n   * Foot side (left or right)\n   * @korean 발쪽\n   */\n  readonly side: \"left\" | \"right\";\n\n  /**\n   * Base skin color\n   * @korean 피부색\n   */\n  readonly skinColor?: number;\n\n  /**\n   * Scale multiplier (based on archetype physical attributes)\n   * @korean 크기배율\n   */\n  readonly scale?: number;\n\n  /**\n   * Whether foot is highlighted (e.g., during kicks)\n   * @korean 표시여부\n   */\n  readonly isHighlighted?: boolean;\n}\n\n/**\n * Foot3D Component\n *\n * Complete foot geometry with anatomically correct dimensions suitable\n * for Korean martial arts stance visualization and kick animations.\n *\n * Design notes:\n * - Main foot body is box-shaped with rounded edges\n * - Toe area is slightly elevated and separated\n * - Heel is wider than toe area for stability\n * - Dimensions scale with archetype (Amsalja: smaller, Jojik: larger)\n *\n * @example\n * ```tsx\n * <Foot3D\n *   side=\"right\"\n *   skinColor={0xffdbac}\n *   scale={1.0}\n *   isHighlighted={false}\n * />\n * ```\n *\n * @korean 발3D컴포넌트\n */\nexport const Foot3D: React.FC<Foot3DProps> = ({\n  side,\n  skinColor = 0xffdbac,\n  scale = 1.0,\n  isHighlighted = false,\n}) => {\n  // Anatomically correct foot dimensions for average male (180cm height)\n  // These scale with archetype physical attributes\n  const footDimensions = useMemo(() => {\n    // Average male foot: 26-29cm length, ~10cm width, ~8cm height\n    const footLength = 0.26 * scale; // 26cm base length\n    const footWidth = 0.1 * scale; // 10cm width\n    const footHeight = 0.08 * scale; // 8cm height at ankle\n\n    // Toe area dimensions (front 30% of foot)\n    const toeLength = footLength * 0.3;\n    const toeWidth = footWidth * 0.9; // Slightly narrower than heel\n    const toeHeight = footHeight * 0.6; // Lower profile\n\n    // Heel area dimensions (back 70% of foot)\n    const heelLength = footLength * 0.7;\n\n    return {\n      footLength,\n      footWidth,\n      footHeight,\n      toeLength,\n      toeWidth,\n      toeHeight,\n      heelLength,\n    };\n  }, [scale]);\n\n  // Foot color (highlight during kicks with brighter color)\n  const footColor = useMemo(() => {\n    if (isHighlighted) {\n      return KOREAN_COLORS.ACCENT_GOLD;\n    }\n    return skinColor;\n  }, [isHighlighted, skinColor]);\n\n  // Memoize shared skin material for all foot parts\n  const skinMaterial = useMemo(\n    () =>\n      new THREE.MeshPhysicalMaterial({\n        color: footColor,\n        metalness: 0,\n        roughness: 0.8,\n        clearcoat: 0.3,\n        clearcoatRoughness: 0.5,\n        // PBR skin properties\n        transmission: 0,\n        thickness: 0.1,\n        ior: 1.4, // Index of refraction for skin\n        sheen: 0.1, // Subtle skin sheen\n        sheenRoughness: 0.8,\n        // Subtle emissive for alive appearance\n        emissive: new THREE.Color(footColor),\n        emissiveIntensity: isHighlighted ? 0.3 : 0.02,\n      }),\n    [footColor, isHighlighted],\n  );\n\n  // Dispose skin material on unmount to prevent memory leaks\n  useEffect(() => {\n    return () => {\n      skinMaterial.dispose();\n    };\n  }, [skinMaterial]);\n\n  return (\n    <group name={`foot-3d-${side}`}>\n      {/* Ankle connector - larger sphere that bridges shin body surface to foot */}\n      <mesh\n        position={[0, 0, 0]}\n        castShadow\n        receiveShadow\n        name={`foot-ankle-bridge-${side}`}\n      >\n        <sphereGeometry args={[footDimensions.footHeight * 0.6, 10, 10]} />\n        <primitive object={skinMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Ankle-to-heel transition cylinder */}\n      <mesh\n        position={[\n          0,\n          -footDimensions.footHeight * 0.2,\n          footDimensions.heelLength * 0.1,\n        ]}\n        castShadow\n        receiveShadow\n        name={`foot-ankle-transition-${side}`}\n      >\n        <cylinderGeometry\n          args={[\n            footDimensions.footHeight * 0.5, // Top radius matches ankle sphere\n            footDimensions.footWidth * 0.45, // Bottom matches heel width\n            footDimensions.footHeight * 0.4,\n            8,\n          ]}\n        />\n        <primitive object={skinMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Main heel/midfoot body - capsule for smooth organic shape */}\n      <mesh\n        position={[\n          0,\n          -footDimensions.footHeight * 0.4,\n          footDimensions.heelLength * 0.2,\n        ]}\n        rotation={[Math.PI / 2, 0, 0]}\n        castShadow\n        receiveShadow\n        name={`foot-heel-${side}`}\n      >\n        <capsuleGeometry\n          args={[\n            footDimensions.footWidth * 0.45, // Radius\n            footDimensions.heelLength * 0.5, // Length (shorter than full heel - caps add length)\n            4,\n            8,\n          ]}\n        />\n        <primitive object={skinMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Toe area - capsule for rounded toe shape */}\n      <mesh\n        position={[\n          0,\n          -footDimensions.footHeight * 0.35 + footDimensions.toeHeight * 0.2,\n          footDimensions.heelLength * 0.7 + footDimensions.toeLength / 2,\n        ]}\n        rotation={[Math.PI / 2, 0, 0]}\n        castShadow\n        receiveShadow\n        name={`foot-toes-${side}`}\n      >\n        <capsuleGeometry\n          args={[\n            footDimensions.toeWidth * 0.35, // Narrower radius for tapered toes\n            footDimensions.toeLength * 0.4, // Shorter length\n            4,\n            8,\n          ]}\n        />\n        <primitive object={skinMaterial} attach=\"material\" />\n      </mesh>\n    </group>\n  );\n};\n\nexport default Foot3D;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,IAAa,UAAiC,EAC5C,MACA,YAAY,UACZ,QAAQ,GACR,gBAAgB,YACZ;CAGJ,MAAM,iBAAiB,cAAc;EAEnC,MAAM,aAAa,MAAO;EAC1B,MAAM,YAAY,KAAM;EACxB,MAAM,aAAa,MAAO;AAU1B,SAAO;GACL;GACA;GACA;GACA,WAXgB,aAAa;GAY7B,UAXe,YAAY;GAY3B,WAXgB,aAAa;GAY7B,YATiB,aAAa;GAU/B;IACA,CAAC,MAAM,CAAC;CAGX,MAAM,YAAY,cAAc;AAC9B,MAAI,cACF,QAAO,cAAc;AAEvB,SAAO;IACN,CAAC,eAAe,UAAU,CAAC;CAG9B,MAAM,eAAe,cAEjB,IAAI,MAAM,qBAAqB;EAC7B,OAAO;EACP,WAAW;EACX,WAAW;EACX,WAAW;EACX,oBAAoB;EAEpB,cAAc;EACd,WAAW;EACX,KAAK;EACL,OAAO;EACP,gBAAgB;EAEhB,UAAU,IAAI,MAAM,MAAM,UAAU;EACpC,mBAAmB,gBAAgB,KAAM;EAC1C,CAAC,EACJ,CAAC,WAAW,cAAc,CAC3B;AAGD,iBAAgB;AACd,eAAa;AACX,gBAAa,SAAS;;IAEvB,CAAC,aAAa,CAAC;AAElB,QACE,qBAAC,SAAD;EAAO,MAAM,WAAW;YAAxB;GAEE,qBAAC,QAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,YAAA;IACA,eAAA;IACA,MAAM,qBAAqB;cAJ7B,CAME,oBAAC,kBAAD,EAAgB,MAAM;KAAC,eAAe,aAAa;KAAK;KAAI;KAAG,EAAI,CAAA,EACnE,oBAAC,aAAD;KAAW,QAAQ;KAAc,QAAO;KAAa,CAAA,CAChD;;GAGP,qBAAC,QAAD;IACE,UAAU;KACR;KACA,CAAC,eAAe,aAAa;KAC7B,eAAe,aAAa;KAC7B;IACD,YAAA;IACA,eAAA;IACA,MAAM,yBAAyB;cARjC,CAUE,oBAAC,oBAAD,EACE,MAAM;KACJ,eAAe,aAAa;KAC5B,eAAe,YAAY;KAC3B,eAAe,aAAa;KAC5B;KACD,EACD,CAAA,EACF,oBAAC,aAAD;KAAW,QAAQ;KAAc,QAAO;KAAa,CAAA,CAChD;;GAGP,qBAAC,QAAD;IACE,UAAU;KACR;KACA,CAAC,eAAe,aAAa;KAC7B,eAAe,aAAa;KAC7B;IACD,UAAU;KAAC,KAAK,KAAK;KAAG;KAAG;KAAE;IAC7B,YAAA;IACA,eAAA;IACA,MAAM,aAAa;cATrB,CAWE,oBAAC,mBAAD,EACE,MAAM;KACJ,eAAe,YAAY;KAC3B,eAAe,aAAa;KAC5B;KACA;KACD,EACD,CAAA,EACF,oBAAC,aAAD;KAAW,QAAQ;KAAc,QAAO;KAAa,CAAA,CAChD;;GAGP,qBAAC,QAAD;IACE,UAAU;KACR;KACA,CAAC,eAAe,aAAa,MAAO,eAAe,YAAY;KAC/D,eAAe,aAAa,KAAM,eAAe,YAAY;KAC9D;IACD,UAAU;KAAC,KAAK,KAAK;KAAG;KAAG;KAAE;IAC7B,YAAA;IACA,eAAA;IACA,MAAM,aAAa;cATrB,CAWE,oBAAC,mBAAD,EACE,MAAM;KACJ,eAAe,WAAW;KAC1B,eAAe,YAAY;KAC3B;KACA;KACD,EACD,CAAA,EACF,oBAAC,aAAD;KAAW,QAAQ;KAAc,QAAO;KAAa,CAAA,CAChD;;GACD"}

package/lib/components/shared/three/anatomy/Hand3D.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Hand3D component with finger geometry for martial arts techniques
+ *
+ * Renders detailed hand with palm and 5 fingers, supporting multiple
+ * Korean martial arts hand poses (Fist, Knife-hand, Spear-hand, etc.).
+ *
+ * Implements LOD (Level of Detail) for performance optimization:
+ * - High detail (<5 units): Full finger bones (4 segments per finger)
+ * - Medium detail (5-15 units): Simplified fingers (3 segments)
+ * - Low detail (>15 units): No finger detail (hand as single unit)
+ *
+ * @module components/three/Hand3D
+ * @category 3D Components
+ * @korean 손3D컴포넌트
+ */
+import React from "react";
+import * as THREE from "three";
+import type { FingerCurl, HandPoseType, HandSide } from "../../../../types/hand-animation";
+/**
+ * Props for Hand3D component
+ *
+ * @public
+ * @korean 손3D속성
+ */
+export interface Hand3DProps {
+    /**
+     * Hand side (left or right)
+     * @korean 손쪽
+     */
+    readonly side: HandSide;
+    /**
+     * Current hand pose
+     * @korean 현재손자세
+     */
+    readonly pose: HandPoseType;
+    /**
+     * Finger curl amounts (0-1 per finger)
+     * @korean 손가락구부림
+     */
+    readonly fingerCurl: FingerCurl;
+    /**
+     * Distance from camera for LOD
+     * @korean 카메라거리
+     */
+    readonly distanceFromCamera: number;
+    /**
+     * Wrist rotation
+     * @korean 손목회전
+     */
+    readonly wristRotation: THREE.Euler;
+    /**
+     * Whether hand is highlighted for vital point targeting
+     * @korean 표시여부
+     */
+    readonly isHighlighted?: boolean;
+    /**
+     * Highlight mode for striking surfaces
+     * @korean 표시모드
+     */
+    readonly highlightMode?: "none" | "knuckles" | "palm" | "knife_edge" | "fingertips" | null;
+    /**
+     * Base skin color
+     * @korean 피부색
+     */
+    readonly skinColor?: number;
+    /**
+     * Scale multiplier
+     * @korean 크기배율
+     */
+    readonly scale?: number;
+}
+/**
+ * Hand3D Component
+ *
+ * Complete hand with palm and 5 fingers, supporting Korean martial arts
+ * hand poses with LOD optimization for performance.
+ *
+ * @example
+ * ```tsx
+ * <Hand3D
+ *   side="right"
+ *   pose={HandPoseType.FIST}
+ *   fingerCurl={{
+ *     thumb: 0.8,
+ *     index: 1.0,
+ *     middle: 1.0,
+ *     ring: 1.0,
+ *     pinky: 1.0,
+ *   }}
+ *   distanceFromCamera={3}
+ *   wristRotation={new THREE.Euler(0, 0, 0)}
+ *   isHighlighted={false}
+ *   highlightMode="knuckles"
+ * />
+ * ```
+ *
+ * @korean 손3D컴포넌트
+ */
+export declare const Hand3D: React.FC<Hand3DProps>;
+export default Hand3D;
+//# sourceMappingURL=Hand3D.d.ts.map

package/lib/components/shared/three/anatomy/Hand3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hand3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/Hand3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,UAAU,EAEV,YAAY,EACZ,QAAQ,EACT,MAAM,kCAAkC,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EACnB,MAAM,GACN,UAAU,GACV,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,IAAI,CAAC;IAET;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AA6MD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqMxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/shared/three/anatomy/Hand3D.js

@@ -0,0 +1,376 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { useEffect, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as THREE from "three";
+//#region src/components/shared/three/anatomy/Hand3D.tsx
+/**
+* Hand3D component with finger geometry for martial arts techniques
+*
+* Renders detailed hand with palm and 5 fingers, supporting multiple
+* Korean martial arts hand poses (Fist, Knife-hand, Spear-hand, etc.).
+*
+* Implements LOD (Level of Detail) for performance optimization:
+* - High detail (<5 units): Full finger bones (4 segments per finger)
+* - Medium detail (5-15 units): Simplified fingers (3 segments)
+* - Low detail (>15 units): No finger detail (hand as single unit)
+*
+* @module components/three/Hand3D
+* @category 3D Components
+* @korean 손3D컴포넌트
+*/
+/**
+* Determine LOD config based on camera distance
+*
+* @param distance - Distance from camera
+* @returns LOD configuration
+* @korean LOD설정결정
+*/
+var getLODConfig = (distance) => {
+	if (distance < 5) return {
+		detailLevel: "high",
+		distanceThresholds: {
+			high: 5,
+			medium: 15,
+			low: 100
+		},
+		renderFingers: true,
+		fingerSegments: 4
+	};
+	else if (distance < 15) return {
+		detailLevel: "medium",
+		distanceThresholds: {
+			high: 5,
+			medium: 15,
+			low: 100
+		},
+		renderFingers: true,
+		fingerSegments: 3
+	};
+	else return {
+		detailLevel: "low",
+		distanceThresholds: {
+			high: 5,
+			medium: 15,
+			low: 100
+		},
+		renderFingers: false,
+		fingerSegments: 0
+	};
+};
+var FingerSegment = ({ position, rotation, length, radius, color }) => {
+	const material = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color,
+		metalness: 0,
+		roughness: .6,
+		clearcoat: .3,
+		clearcoatRoughness: .5,
+		transmission: 0,
+		thickness: .1,
+		ior: 1.4,
+		sheen: .1,
+		sheenRoughness: .8,
+		emissive: new THREE.Color(color),
+		emissiveIntensity: .02
+	}), [color]);
+	useEffect(() => {
+		return () => {
+			material.dispose();
+		};
+	}, [material]);
+	return /* @__PURE__ */ jsxs("mesh", {
+		position,
+		rotation,
+		castShadow: true,
+		receiveShadow: true,
+		children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+			radius,
+			length,
+			4,
+			8
+		] }), /* @__PURE__ */ jsx("primitive", {
+			object: material,
+			attach: "material"
+		})]
+	});
+};
+var Finger = ({ fingerName, basePosition, curl, segments, isHighlighted, skinColor }) => {
+	const dimensions = useMemo(() => {
+		const baseLength = fingerName === "thumb" ? .025 : fingerName === "pinky" ? .022 : .03;
+		const baseRadius = fingerName === "pinky" ? .006 : fingerName === "thumb" ? .009 : .007;
+		return {
+			proximalLength: baseLength,
+			intermediateLength: baseLength * .75,
+			distalLength: baseLength * .55,
+			radius: baseRadius
+		};
+	}, [fingerName]);
+	const PROXIMAL_CURL_FACTOR = .5;
+	const INTERMEDIATE_CURL_FACTOR = .7;
+	const DISTAL_CURL_FACTOR = 1;
+	const proximalCurl = curl * PROXIMAL_CURL_FACTOR * Math.PI;
+	const intermediateCurl = curl * INTERMEDIATE_CURL_FACTOR * Math.PI;
+	const distalCurl = curl * DISTAL_CURL_FACTOR * Math.PI;
+	const highlightColor = isHighlighted ? KOREAN_COLORS.ACCENT_RED : skinColor;
+	return /* @__PURE__ */ jsxs("group", {
+		position: basePosition,
+		children: [
+			/* @__PURE__ */ jsx(FingerSegment, {
+				position: [
+					0,
+					dimensions.proximalLength / 2,
+					0
+				],
+				rotation: [
+					0,
+					0,
+					proximalCurl
+				],
+				length: dimensions.proximalLength,
+				radius: dimensions.radius,
+				color: highlightColor
+			}),
+			segments >= 4 && fingerName !== "thumb" && /* @__PURE__ */ jsx(FingerSegment, {
+				position: [
+					0,
+					dimensions.proximalLength + dimensions.intermediateLength / 2,
+					0
+				],
+				rotation: [
+					0,
+					0,
+					intermediateCurl
+				],
+				length: dimensions.intermediateLength,
+				radius: dimensions.radius * .9,
+				color: highlightColor
+			}),
+			/* @__PURE__ */ jsx(FingerSegment, {
+				position: [
+					0,
+					dimensions.proximalLength + (fingerName !== "thumb" && segments >= 4 ? dimensions.intermediateLength : 0) + dimensions.distalLength / 2,
+					0
+				],
+				rotation: [
+					0,
+					0,
+					distalCurl
+				],
+				length: dimensions.distalLength,
+				radius: dimensions.radius * .7,
+				color: highlightColor
+			})
+		]
+	});
+};
+/**
+* Hand3D Component
+*
+* Complete hand with palm and 5 fingers, supporting Korean martial arts
+* hand poses with LOD optimization for performance.
+*
+* @example
+* ```tsx
+* <Hand3D
+*   side="right"
+*   pose={HandPoseType.FIST}
+*   fingerCurl={{
+*     thumb: 0.8,
+*     index: 1.0,
+*     middle: 1.0,
+*     ring: 1.0,
+*     pinky: 1.0,
+*   }}
+*   distanceFromCamera={3}
+*   wristRotation={new THREE.Euler(0, 0, 0)}
+*   isHighlighted={false}
+*   highlightMode="knuckles"
+* />
+* ```
+*
+* @korean 손3D컴포넌트
+*/
+var Hand3D = ({ side, fingerCurl, distanceFromCamera, wristRotation, isHighlighted = false, highlightMode = null, skinColor = 16767916, scale = 1 }) => {
+	const lodConfig = useMemo(() => getLODConfig(distanceFromCamera), [distanceFromCamera]);
+	const sideMultiplier = side === "left" ? -1 : 1;
+	const palmWidth = .085 * scale;
+	const palmLength = .095 * scale;
+	const palmThickness = .025 * scale;
+	const highlightKnuckles = highlightMode === "knuckles";
+	const highlightPalm = highlightMode === "palm";
+	const highlightKnifeEdge = highlightMode === "knife_edge";
+	const highlightFingertips = highlightMode === "fingertips";
+	const palmColor = isHighlighted && highlightPalm ? KOREAN_COLORS.ACCENT_GOLD : skinColor;
+	return /* @__PURE__ */ jsxs("group", {
+		rotation: [
+			wristRotation.x,
+			wristRotation.y,
+			wristRotation.z
+		],
+		name: `hand-3d-${side}`,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					-palmLength * .45,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `hand-wrist-bridge-${side}`,
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					palmWidth * .35,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color: skinColor,
+					metalness: 0,
+					roughness: .6,
+					clearcoat: .3,
+					clearcoatRoughness: .5,
+					transmission: 0,
+					thickness: .1,
+					ior: 1.4,
+					sheen: .1,
+					sheenRoughness: .8,
+					emissive: new THREE.Color(16736320),
+					emissiveIntensity: .02
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				castShadow: true,
+				receiveShadow: true,
+				name: `hand-palm-${side}`,
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					palmWidth,
+					palmLength,
+					palmThickness
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color: palmColor,
+					metalness: 0,
+					roughness: .6,
+					clearcoat: .3,
+					clearcoatRoughness: .5,
+					transmission: 0,
+					thickness: .1,
+					ior: 1.4,
+					sheen: .1,
+					sheenRoughness: .8,
+					emissive: new THREE.Color(16736320),
+					emissiveIntensity: .02
+				})]
+			}),
+			isHighlighted && highlightKnifeEdge && /* @__PURE__ */ jsxs("mesh", {
+				position: [
+					-palmWidth / 2 * sideMultiplier,
+					0,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `hand-knife-edge-${side}`,
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					.005,
+					palmLength,
+					palmThickness
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color: KOREAN_COLORS.ACCENT_GOLD,
+					metalness: .8,
+					roughness: .2,
+					clearcoat: .8,
+					clearcoatRoughness: .1,
+					emissive: KOREAN_COLORS.ACCENT_GOLD,
+					emissiveIntensity: 2,
+					transmission: 0,
+					thickness: .05
+				})]
+			}),
+			lodConfig.renderFingers && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Finger, {
+					fingerName: "thumb",
+					basePosition: [
+						.015 * sideMultiplier * scale,
+						palmLength / 2,
+						palmThickness / 2
+					],
+					curl: fingerCurl.thumb,
+					segments: 3,
+					isHighlighted: isHighlighted && highlightFingertips,
+					skinColor
+				}),
+				/* @__PURE__ */ jsx(Finger, {
+					fingerName: "index",
+					basePosition: [
+						.015 * sideMultiplier * scale,
+						palmLength / 2,
+						0
+					],
+					curl: fingerCurl.index,
+					segments: lodConfig.fingerSegments,
+					isHighlighted: isHighlighted && (highlightFingertips || highlightKnuckles),
+					skinColor
+				}),
+				/* @__PURE__ */ jsx(Finger, {
+					fingerName: "middle",
+					basePosition: [
+						.005 * sideMultiplier * scale,
+						palmLength / 2,
+						0
+					],
+					curl: fingerCurl.middle,
+					segments: lodConfig.fingerSegments,
+					isHighlighted: isHighlighted && (highlightFingertips || highlightKnuckles),
+					skinColor
+				}),
+				/* @__PURE__ */ jsx(Finger, {
+					fingerName: "ring",
+					basePosition: [
+						-.005 * sideMultiplier * scale,
+						palmLength / 2,
+						0
+					],
+					curl: fingerCurl.ring,
+					segments: lodConfig.fingerSegments,
+					isHighlighted: isHighlighted && (highlightFingertips || highlightKnuckles),
+					skinColor
+				}),
+				/* @__PURE__ */ jsx(Finger, {
+					fingerName: "pinky",
+					basePosition: [
+						-.015 * sideMultiplier * scale,
+						palmLength / 2,
+						0
+					],
+					curl: fingerCurl.pinky,
+					segments: lodConfig.fingerSegments,
+					isHighlighted: isHighlighted && (highlightFingertips || highlightKnuckles),
+					skinColor
+				})
+			] }),
+			!lodConfig.renderFingers && /* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					palmLength / 2,
+					0
+				],
+				castShadow: true,
+				receiveShadow: true,
+				name: `hand-simple-${side}`,
+				children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+					palmWidth / 2,
+					palmLength * .3,
+					4,
+					8
+				] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+					color: skinColor,
+					metalness: .1,
+					roughness: .8
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Hand3D as default };
+
+//# sourceMappingURL=Hand3D.js.map