blacktrigram 0.7.2

package/lib/components/shared/three/models/SkeletalPlayer3D.js

@@ -0,0 +1,358 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { createScaledHumanoidRig } from "../../../../systems/animation/builders/SkeletonRig.js";
+import { FacialExpression } from "../../../../types/facial.js";
+import { createDefaultFacialDamage, getExpressionFromCombatState } from "../../../../systems/animation/systems/FacialExpressions.js";
+import { getHeadAngleRadians, lockFacing, unlockFacing, updateFacingTowardOpponent } from "../../../../systems/animation/systems/BodyFacingSystem.js";
+import "../../../../systems/animation/index.js";
+import { getArchetypePhysicalAttributes } from "../../../../data/archetypePhysicalAttributes.js";
+import { toHexColor } from "../../../../utils/colorHelpers.js";
+import { getArchetypeSkinTone } from "../../../../utils/colorUtils.js";
+import { useBalanceAnimations } from "../../../../hooks/useBalanceAnimations.js";
+import { useHandPoseTransitions } from "../../../../hooks/useHandPoseTransitions.js";
+import { useMuscleActivation } from "../../../../hooks/useMuscleActivation.js";
+import { useSkeletalAnimation } from "../../../../hooks/useSkeletalAnimation.js";
+import BoneRenderer from "../anatomy/BoneRenderer.js";
+import PlayerStateIndicators from "../effects/PlayerStateIndicators.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/shared/three/models/SkeletalPlayer3D.tsx
+/**
+* SkeletalPlayer3D component with articulated body model
+*
+* Implements full skeletal rigging system for realistic fighter animations
+* with independent limb movement, elbow/knee joints, and attack animations.
+*
+* @module components/three/SkeletalPlayer3D
+* @category 3D Components
+* @korean 골격플레이어3D컴포넌트
+*/
+/**
+* Get stance-specific color from Korean theming
+*
+* @param stance - Current trigram stance
+* @returns Hex color number
+* @korean 자세색상가져오기
+*/
+var getStanceColor = (stance) => {
+	return {
+		geon: KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,
+		tae: KOREAN_COLORS.TRIGRAM_TAE_PRIMARY,
+		li: KOREAN_COLORS.TRIGRAM_LI_PRIMARY,
+		jin: KOREAN_COLORS.TRIGRAM_JIN_PRIMARY,
+		son: KOREAN_COLORS.TRIGRAM_SON_PRIMARY,
+		gam: KOREAN_COLORS.TRIGRAM_GAM_PRIMARY,
+		gan: KOREAN_COLORS.TRIGRAM_GAN_PRIMARY,
+		gon: KOREAN_COLORS.TRIGRAM_GON_PRIMARY
+	}[stance] ?? KOREAN_COLORS.PRIMARY_CYAN;
+};
+/**
+* Get trigram symbol for stance
+*
+* @param stance - Current trigram stance
+* @returns Unicode trigram symbol
+* @korean 팔괘기호가져오기
+*/
+var getTrigramSymbol = (stance) => {
+	return {
+		geon: "☰",
+		tae: "☱",
+		li: "☲",
+		jin: "☳",
+		son: "☴",
+		gam: "☵",
+		gan: "☶",
+		gon: "☷"
+	}[stance] ?? "☰";
+};
+/**
+* SkeletalPlayer3D Component
+*
+* Complete skeletal player with 28-bone rig and realistic animations.
+* Supports all Korean martial arts attack animations (jab, cross, kicks, block).
+*
+* @example
+* ```tsx
+* <SkeletalPlayer3D
+*   playerId="player1"
+*   archetype={PlayerArchetype.MUSA}
+*   stance={TrigramStance.GEON}
+*   position={[0, 0, 0]}
+*   rotation={0}
+*   health={85}
+*   maxHealth={100}
+*   stamina={60}
+*   ki={40}
+*   currentAnimation="attack"
+*   attackAnimation="jab"
+*   showDetails={true}
+* />
+* ```
+*
+* @korean 골격플레이어3D컴포넌트
+*/
+var SkeletalPlayer3D = ({ playerId, archetype, stance, position, rotation, health, maxHealth, stamina, ki, pain, balance, consciousness, bloodLoss, isBlocking, isStunned = false, isCountering = false, currentAnimation, isMobile, name, scale = 1, showDetails = true, facing = "right", showStanceIndicator = true, onAnimationComplete, attackAnimation, showSkeleton = false, facialExpression, facialDamage, enableFacialExpressions = false, enableEyeTracking = true, opponentPosition, bodyFacing, onBodyFacingUpdate, laterality }) => {
+	const effectiveLaterality = laterality ?? "right";
+	const physicalAttributes = useMemo(() => getArchetypePhysicalAttributes(archetype), [archetype]);
+	const rig = useMemo(() => createScaledHumanoidRig(physicalAttributes), [physicalAttributes]);
+	const { updateRigAnimation, diagonalRotationY } = useSkeletalAnimation({
+		currentAnimation,
+		attackAnimation,
+		isBlocking,
+		stance,
+		laterality: effectiveLaterality,
+		onAnimationComplete
+	});
+	const { leftHandState, rightHandState, updateHandAnimations } = useHandPoseTransitions({
+		currentAnimation,
+		attackAnimation,
+		isBlocking
+	});
+	const { swayPosition, helplessRotation, updateBalanceAnimations } = useBalanceAnimations({ balance });
+	const { muscleStates, updateMuscleActivations } = useMuscleActivation({
+		currentAnimation,
+		attackAnimation,
+		isBlocking,
+		stamina
+	});
+	const skinTone = useMemo(() => getArchetypeSkinTone(archetype), [archetype]);
+	const bodyColor = useMemo(() => {
+		if (isStunned) return KOREAN_COLORS.WARNING_YELLOW;
+		if (health / maxHealth < .3) return KOREAN_COLORS.ACCENT_RED;
+		if (ki / 100 > .8) return KOREAN_COLORS.PRIMARY_CYAN;
+		return skinTone;
+	}, [
+		isStunned,
+		health,
+		maxHealth,
+		ki,
+		skinTone
+	]);
+	const stanceColor = useMemo(() => getStanceColor(stance), [stance]);
+	const trigramSymbol = useMemo(() => getTrigramSymbol(stance), [stance]);
+	const [justHit, setJustHit] = useState(false);
+	const [justLanded, setJustLanded] = useState(false);
+	const lastHealthRef = useRef(health);
+	useEffect(() => {
+		let timeoutId;
+		if (health < lastHealthRef.current) {
+			setJustHit(true);
+			timeoutId = setTimeout(() => setJustHit(false), 1e3);
+		}
+		lastHealthRef.current = health;
+		return () => {
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+		};
+	}, [health]);
+	useEffect(() => {
+		let timeoutId;
+		if (currentAnimation === "attack") {
+			setJustLanded(true);
+			timeoutId = setTimeout(() => setJustLanded(false), 500);
+		}
+		return () => {
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+		};
+	}, [currentAnimation]);
+	const calculatedExpression = useMemo(() => {
+		if (!enableFacialExpressions) return FacialExpression.NEUTRAL;
+		if (facialExpression) return facialExpression;
+		return getExpressionFromCombatState(health, maxHealth, stamina, pain, consciousness, justHit, justLanded);
+	}, [
+		enableFacialExpressions,
+		facialExpression,
+		health,
+		maxHealth,
+		stamina,
+		pain,
+		consciousness,
+		justHit,
+		justLanded
+	]);
+	const calculatedFacialDamage = useMemo(() => {
+		return facialDamage ?? createDefaultFacialDamage();
+	}, [facialDamage]);
+	const opponentPos = useMemo(() => {
+		if (opponentPosition) return new THREE.Vector3(...opponentPosition);
+		return new THREE.Vector3(facing === "right" ? 5 : -5, 2, 0);
+	}, [opponentPosition, facing]);
+	const frameCounter = useRef(0);
+	useFrame((_state, delta) => {
+		const isWalkingAnimation = currentAnimation === "walk" || typeof currentAnimation === "string" && currentAnimation.startsWith("step_");
+		if (bodyFacing && opponentPosition && onBodyFacingUpdate && !isWalkingAnimation) {
+			const playerPos = {
+				x: position[0],
+				y: position[2]
+			};
+			const opponentPos = {
+				x: opponentPosition[0],
+				y: opponentPosition[2]
+			};
+			const isStepAnimation = typeof currentAnimation === "string" && currentAnimation.startsWith("step_");
+			const isTurnAnimation = typeof currentAnimation === "string" && currentAnimation.startsWith("turn_");
+			const shouldLock = currentAnimation === "attack" || currentAnimation === "defend" || isStepAnimation || isTurnAnimation;
+			let updatedFacing = bodyFacing;
+			if (shouldLock && !bodyFacing.isLocked) updatedFacing = lockFacing(bodyFacing);
+			else if (!shouldLock && bodyFacing.isLocked) updatedFacing = unlockFacing(bodyFacing);
+			if (!updatedFacing.isLocked) updatedFacing = updateFacingTowardOpponent(updatedFacing, playerPos, opponentPos, delta, Date.now());
+			if (updatedFacing !== bodyFacing) onBodyFacingUpdate(updatedFacing);
+		}
+		frameCounter.current = (frameCounter.current + 1) % 10;
+		updateRigAnimation(rig, delta);
+		updateHandAnimations(delta);
+		updateBalanceAnimations(delta, frameCounter.current);
+		updateMuscleActivations(delta, frameCounter.current);
+		if (bodyFacing) {
+			const head = rig.bones.get("head");
+			if (head) {
+				const headRotation = getHeadAngleRadians(bodyFacing);
+				head.rotation.y = headRotation;
+			}
+		}
+	});
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		rotation: [
+			0,
+			diagonalRotationY ?? rotation,
+			0
+		],
+		scale: [
+			facing === "left" ? -scale : scale,
+			scale,
+			scale
+		],
+		name: `skeletal-player3d-${playerId}`,
+		children: [/* @__PURE__ */ jsxs("group", {
+			position: swayPosition,
+			rotation: [
+				helplessRotation,
+				0,
+				0
+			],
+			children: [
+				/* @__PURE__ */ jsx(BoneRenderer, {
+					rig,
+					color: bodyColor,
+					showBones: true,
+					renderMode: showSkeleton ? "debug" : "solid",
+					leftHandState,
+					rightHandState,
+					cameraDistance: 10,
+					facialExpression: calculatedExpression,
+					facialDamage: calculatedFacialDamage,
+					opponentPosition: opponentPos,
+					enableFacialExpressions,
+					enableEyeTracking,
+					physicalAttributes: {
+						muscleMass: physicalAttributes.muscleMass,
+						fatMass: physicalAttributes.fatMass,
+						shoulderWidth: physicalAttributes.shoulderWidth,
+						torsoLength: physicalAttributes.torsoLength,
+						armLength: physicalAttributes.armLength,
+						legLength: physicalAttributes.legLength
+					},
+					muscleStates,
+					isExhausted: stamina < 20,
+					archetype
+				}),
+				isBlocking && /* @__PURE__ */ jsxs("mesh", {
+					position: [
+						0,
+						1.2,
+						.3
+					],
+					children: [/* @__PURE__ */ jsx("circleGeometry", { args: [.5, 32] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+						color: KOREAN_COLORS.PRIMARY_BLUE,
+						transparent: true,
+						opacity: .5,
+						side: 2
+					})]
+				}),
+				isCountering && /* @__PURE__ */ jsxs("mesh", {
+					position: [
+						0,
+						1.5,
+						0
+					],
+					children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+						.4,
+						.05,
+						8,
+						32
+					] }), /* @__PURE__ */ jsx("meshBasicMaterial", { color: KOREAN_COLORS.ACCENT_PURPLE })]
+				}),
+				showDetails && name && /* @__PURE__ */ jsx(Html, {
+					position: [
+						0,
+						2.8,
+						0
+					],
+					center: true,
+					distanceFactor: isMobile ? 15 : 10,
+					occlude: false,
+					style: {
+						pointerEvents: "none",
+						userSelect: "none"
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							fontFamily: FONT_FAMILY.KOREAN,
+							textAlign: "center",
+							color: "white",
+							textShadow: "0 0 4px rgba(0,0,0,0.8)"
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "12px" : "14px",
+									fontWeight: "bold",
+									marginBottom: "4px"
+								},
+								"data-testid": "player-name",
+								children: name.korean
+							}),
+							showStanceIndicator && /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "14px" : "16px",
+									color: toHexColor(stanceColor)
+								},
+								"data-testid": "trigram-symbol",
+								children: trigramSymbol
+							}),
+							(isBlocking || isStunned || isCountering) && /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "10px" : "12px",
+									fontWeight: "bold",
+									color: "#ffff00",
+									marginTop: "4px"
+								},
+								"data-testid": "combat-state",
+								children: isBlocking ? "방어" : isStunned ? "기절" : "반격"
+							})
+						]
+					})
+				}),
+				showDetails && /* @__PURE__ */ jsx(PlayerStateIndicators, {
+					health,
+					maxHealth,
+					stamina,
+					ki,
+					balance,
+					consciousness,
+					pain,
+					bloodLoss,
+					isMobile
+				})
+			]
+		}), " "]
+	});
+};
+//#endregion
+export { SkeletalPlayer3D as default };
+
+//# sourceMappingURL=SkeletalPlayer3D.js.map

package/lib/components/shared/three/models/SkeletalPlayer3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletalPlayer3D.js","names":[],"sources":["../../../../../src/components/shared/three/models/SkeletalPlayer3D.tsx"],"sourcesContent":["/**\n * SkeletalPlayer3D component with articulated body model\n *\n * Implements full skeletal rigging system for realistic fighter animations\n * with independent limb movement, elbow/knee joints, and attack animations.\n *\n * @module components/three/SkeletalPlayer3D\n * @category 3D Components\n * @korean 골격플레이어3D컴포넌트\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\nimport { getArchetypePhysicalAttributes } from \"../../../../data/archetypePhysicalAttributes\";\nimport { useBalanceAnimations } from \"../../../../hooks/useBalanceAnimations\";\nimport { useHandPoseTransitions } from \"../../../../hooks/useHandPoseTransitions\";\nimport { useMuscleActivation } from \"../../../../hooks/useMuscleActivation\";\nimport { useSkeletalAnimation } from \"../../../../hooks/useSkeletalAnimation\";\nimport {\n  createDefaultFacialDamage,\n  createScaledHumanoidRig,\n  getExpressionFromCombatState,\n  getHeadAngleRadians,\n  lockFacing,\n  unlockFacing,\n  updateFacingTowardOpponent,\n} from \"../../../../systems/animation\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { FacialExpression } from \"../../../../types/facial\";\nimport type { Player3DUnifiedProps } from \"../../../../types/player-visual\";\nimport type { SkeletalRig } from \"../../../../types/skeletal\";\nimport { toHexColor } from \"../../../../utils/colorHelpers\";\nimport { getArchetypeSkinTone } from \"../../../../utils/colorUtils\";\nimport BoneRenderer from \"../anatomy/BoneRenderer\";\nimport PlayerStateIndicators from \"../effects/PlayerStateIndicators\";\n\n/**\n * Get stance-specific color from Korean theming\n *\n * @param stance - Current trigram stance\n * @returns Hex color number\n * @korean 자세색상가져오기\n */\nconst getStanceColor = (stance: string): number => {\n  const stanceColors: Record<string, number> = {\n    geon: KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,\n    tae: KOREAN_COLORS.TRIGRAM_TAE_PRIMARY,\n    li: KOREAN_COLORS.TRIGRAM_LI_PRIMARY,\n    jin: KOREAN_COLORS.TRIGRAM_JIN_PRIMARY,\n    son: KOREAN_COLORS.TRIGRAM_SON_PRIMARY,\n    gam: KOREAN_COLORS.TRIGRAM_GAM_PRIMARY,\n    gan: KOREAN_COLORS.TRIGRAM_GAN_PRIMARY,\n    gon: KOREAN_COLORS.TRIGRAM_GON_PRIMARY,\n  };\n  return stanceColors[stance] ?? KOREAN_COLORS.PRIMARY_CYAN;\n};\n\n/**\n * Get trigram symbol for stance\n *\n * @param stance - Current trigram stance\n * @returns Unicode trigram symbol\n * @korean 팔괘기호가져오기\n */\nconst getTrigramSymbol = (stance: string): string => {\n  const symbols: Record<string, string> = {\n    geon: \"☰\",\n    tae: \"☱\",\n    li: \"☲\",\n    jin: \"☳\",\n    son: \"☴\",\n    gam: \"☵\",\n    gan: \"☶\",\n    gon: \"☷\",\n  };\n  return symbols[stance] ?? \"☰\";\n};\n\n/**\n * SkeletalPlayer3D Component\n *\n * Complete skeletal player with 28-bone rig and realistic animations.\n * Supports all Korean martial arts attack animations (jab, cross, kicks, block).\n *\n * @example\n * ```tsx\n * <SkeletalPlayer3D\n *   playerId=\"player1\"\n *   archetype={PlayerArchetype.MUSA}\n *   stance={TrigramStance.GEON}\n *   position={[0, 0, 0]}\n *   rotation={0}\n *   health={85}\n *   maxHealth={100}\n *   stamina={60}\n *   ki={40}\n *   currentAnimation=\"attack\"\n *   attackAnimation=\"jab\"\n *   showDetails={true}\n * />\n * ```\n *\n * @korean 골격플레이어3D컴포넌트\n */\nexport const SkeletalPlayer3D: React.FC<\n  Player3DUnifiedProps & {\n    readonly attackAnimation?: string;\n    readonly showSkeleton?: boolean;\n  }\n> = ({\n  playerId,\n  archetype,\n  stance,\n  position,\n  rotation,\n  health,\n  maxHealth,\n  stamina,\n  ki,\n  pain,\n  balance,\n  consciousness,\n  bloodLoss,\n  isBlocking,\n  isStunned = false,\n  isCountering = false,\n  currentAnimation,\n  isMobile,\n  name,\n  scale = 1,\n  showDetails = true,\n  facing = \"right\",\n  showStanceIndicator = true,\n  onAnimationComplete,\n  attackAnimation,\n  showSkeleton = false,\n  facialExpression,\n  facialDamage,\n  enableFacialExpressions = false,\n  enableEyeTracking = true,\n  opponentPosition,\n  bodyFacing,\n  onBodyFacingUpdate,\n  laterality, // Stance laterality (left/right foot forward)\n}) => {\n  // Use laterality with default to \"right\"\n  const effectiveLaterality = laterality ?? \"right\";\n  // Get physical attributes for the archetype\n  const physicalAttributes = useMemo(\n    () => getArchetypePhysicalAttributes(archetype),\n    [archetype],\n  );\n\n  // Create skeletal rig with scaled dimensions based on archetype\n  const rig = useMemo<SkeletalRig>(\n    () => createScaledHumanoidRig(physicalAttributes),\n    [physicalAttributes],\n  );\n\n  // ========================================\n  // ANIMATION HOOKS - Modular animation system\n  // ========================================\n\n  // Base skeletal animation (idle, walk, attack, etc.)\n  const { updateRigAnimation, diagonalRotationY } = useSkeletalAnimation({\n    currentAnimation,\n    attackAnimation,\n    isBlocking,\n    stance,\n    laterality: effectiveLaterality, // Pass laterality for animation mirroring\n    onAnimationComplete,\n  });\n\n  // Hand pose transitions for both hands\n  const { leftHandState, rightHandState, updateHandAnimations } =\n    useHandPoseTransitions({\n      currentAnimation,\n      attackAnimation,\n      isBlocking,\n    });\n\n  // NOTE: Guard pose overlay removed - stance animations built with MartialArtsAnimationBuilder\n  // already include proper guard positions via transitionToStanceGuard()\n  // 가드 포즈 오버레이 제거 - MartialArtsAnimationBuilder로 빌드된 자세 애니메이션에\n  // transitionToStanceGuard()를 통한 적절한 가드 위치가 이미 포함되어 있음\n\n  // Balance animations (sway, stumble, lean based on balance state)\n  const { swayPosition, helplessRotation, updateBalanceAnimations } =\n    useBalanceAnimations({\n      balance,\n    });\n\n  // Muscle activation system\n  const { muscleStates, updateMuscleActivations } = useMuscleActivation({\n    currentAnimation,\n    attackAnimation,\n    isBlocking,\n    stamina,\n  });\n\n  // Get archetype-specific skin tone\n  const skinTone = useMemo(() => getArchetypeSkinTone(archetype), [archetype]);\n\n  // Body color - use skin tone for normal, override for special states\n  const bodyColor = useMemo(() => {\n    if (isStunned) return KOREAN_COLORS.WARNING_YELLOW;\n    if (health / maxHealth < 0.3) return KOREAN_COLORS.ACCENT_RED;\n    if (ki / 100 > 0.8) return KOREAN_COLORS.PRIMARY_CYAN;\n    return skinTone; // Use archetype skin tone instead of primary color\n  }, [isStunned, health, maxHealth, ki, skinTone]);\n\n  // Stance color\n  const stanceColor = useMemo(() => getStanceColor(stance), [stance]);\n  const trigramSymbol = useMemo(() => getTrigramSymbol(stance), [stance]);\n\n  // Track recent combat events for expression calculation\n  const [justHit, setJustHit] = useState(false);\n  const [justLanded, setJustLanded] = useState(false);\n  const lastHealthRef = useRef(health);\n\n  // Detect hit events (health decreased)\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (health < lastHealthRef.current) {\n      setJustHit(true);\n      timeoutId = setTimeout(() => setJustHit(false), 1000); // Clear after 1 second\n    }\n\n    lastHealthRef.current = health;\n\n    return () => {\n      if (timeoutId !== undefined) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [health]);\n\n  // Detect successful attacks (currentAnimation changed to attack)\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (currentAnimation === \"attack\") {\n      setJustLanded(true);\n      timeoutId = setTimeout(() => setJustLanded(false), 500); // Clear after 0.5 seconds\n    }\n\n    return () => {\n      if (timeoutId !== undefined) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [currentAnimation]);\n\n  // Calculate facial expression from combat state (or use provided one)\n  const calculatedExpression = useMemo(() => {\n    if (!enableFacialExpressions) {\n      return FacialExpression.NEUTRAL;\n    }\n\n    if (facialExpression) {\n      return facialExpression;\n    }\n\n    return getExpressionFromCombatState(\n      health,\n      maxHealth,\n      stamina,\n      pain,\n      consciousness,\n      justHit,\n      justLanded,\n    );\n  }, [\n    enableFacialExpressions,\n    facialExpression,\n    health,\n    maxHealth,\n    stamina,\n    pain,\n    consciousness,\n    justHit,\n    justLanded,\n  ]);\n\n  // Facial damage state\n  const calculatedFacialDamage = useMemo(() => {\n    return facialDamage ?? createDefaultFacialDamage();\n  }, [facialDamage]);\n\n  // Opponent position for eye tracking\n  const opponentPos = useMemo(() => {\n    if (opponentPosition) {\n      return new THREE.Vector3(...opponentPosition);\n    }\n    // Default: opponent in front\n    return new THREE.Vector3(facing === \"right\" ? 5 : -5, 2, 0);\n  }, [opponentPosition, facing]);\n\n  // ========================================\n  // ANIMATION FRAME LOOP - Modular hook-based system\n  // ========================================\n\n  // Frame counter for periodic updates\n  const frameCounter = useRef(0);\n\n  // Animation loop using useFrame (60fps)\n  useFrame((_state, delta) => {\n    // Update body facing to track opponent (if enabled)\n    // ONLY track opponent when NOT moving (walk animations handle their own direction)\n    const isWalkingAnimation =\n      currentAnimation === \"walk\" ||\n      (typeof currentAnimation === \"string\" &&\n        currentAnimation.startsWith(\"step_\"));\n\n    if (\n      bodyFacing &&\n      opponentPosition &&\n      onBodyFacingUpdate &&\n      !isWalkingAnimation\n    ) {\n      const playerPos = { x: position[0], y: position[2] }; // X and Z for 2D top-down\n      const opponentPos = { x: opponentPosition[0], y: opponentPosition[2] };\n\n      // Check if facing should be locked during committed animations\n      const isStepAnimation =\n        typeof currentAnimation === \"string\" &&\n        currentAnimation.startsWith(\"step_\");\n      const isTurnAnimation =\n        typeof currentAnimation === \"string\" &&\n        currentAnimation.startsWith(\"turn_\");\n\n      const shouldLock =\n        currentAnimation === \"attack\" ||\n        currentAnimation === \"defend\" ||\n        isStepAnimation ||\n        isTurnAnimation;\n\n      let updatedFacing = bodyFacing;\n\n      if (shouldLock && !bodyFacing.isLocked) {\n        // Lock facing at start of committed action (attack/defend/step/turn)\n        updatedFacing = lockFacing(bodyFacing);\n      } else if (!shouldLock && bodyFacing.isLocked) {\n        // Unlock facing after committed action completes\n        updatedFacing = unlockFacing(bodyFacing);\n      }\n\n      // Update facing direction (handles rotation speed, head tracking, turns)\n      if (!updatedFacing.isLocked) {\n        updatedFacing = updateFacingTowardOpponent(\n          updatedFacing,\n          playerPos,\n          opponentPos,\n          delta,\n          Date.now(),\n        );\n      }\n\n      // Notify parent if facing changed\n      if (updatedFacing !== bodyFacing) {\n        onBodyFacingUpdate(updatedFacing);\n      }\n    }\n\n    // ========================================\n    // HOOK-BASED ANIMATION UPDATES (60fps)\n    // ========================================\n\n    // Update frame counter for periodic state sync\n    frameCounter.current = (frameCounter.current + 1) % 10;\n\n    // 1. Base skeletal animation (idle, walk, attack, etc.)\n    // Stance-specific guard positions are built into the MartialArtsAnimationBuilder animations\n    // 자세별 가드 위치가 MartialArtsAnimationBuilder 애니메이션에 포함됨\n    updateRigAnimation(rig, delta);\n\n    // 2. Hand pose transitions\n    updateHandAnimations(delta);\n\n    // 3. Balance animations (sway, stumble, lean)\n    updateBalanceAnimations(delta, frameCounter.current);\n\n    // 5. Muscle activation states\n    updateMuscleActivations(delta, frameCounter.current);\n\n    // Apply head rotation toward opponent (if body facing tracking is enabled)\n    // Note: Torso rotation is now handled by guard pose overlay for proper stance positioning\n    // Only the head tracks the opponent independently for natural looking\n    if (bodyFacing) {\n      // Apply head rotation to head bone (includes independent offset)\n      // Head can track ±45° independently from torso for natural looking\n      const head = rig.bones.get(\"head\");\n      if (head) {\n        const headRotation = getHeadAngleRadians(bodyFacing);\n        head.rotation.y = headRotation;\n      }\n    }\n  });\n\n  // Use diagonal rotation override if set, otherwise use prop rotation\n  const effectiveRotation = diagonalRotationY ?? rotation;\n\n  return (\n    <group\n      position={position}\n      rotation={[0, effectiveRotation, 0]}\n      scale={[facing === \"left\" ? -scale : scale, scale, scale]}\n      name={`skeletal-player3d-${playerId}`}\n    >\n      {/* Inner group for sway animation and helpless lean */}\n      <group position={swayPosition} rotation={[helplessRotation, 0, 0]}>\n        {/* Skeletal rig rendering with bone-attached muscles */}\n        <BoneRenderer\n          rig={rig}\n          color={bodyColor}\n          showBones={true}\n          renderMode={showSkeleton ? \"debug\" : \"solid\"}\n          leftHandState={leftHandState}\n          rightHandState={rightHandState}\n          cameraDistance={10}\n          facialExpression={calculatedExpression}\n          facialDamage={calculatedFacialDamage}\n          opponentPosition={opponentPos}\n          enableFacialExpressions={enableFacialExpressions}\n          enableEyeTracking={enableEyeTracking}\n          physicalAttributes={{\n            muscleMass: physicalAttributes.muscleMass,\n            fatMass: physicalAttributes.fatMass,\n            shoulderWidth: physicalAttributes.shoulderWidth,\n            torsoLength: physicalAttributes.torsoLength,\n            armLength: physicalAttributes.armLength,\n            legLength: physicalAttributes.legLength,\n          }}\n          muscleStates={muscleStates}\n          isExhausted={stamina < 20}\n          archetype={archetype}\n        />\n\n        {/* Clothing is now rendered via BoneClothing inside BoneRenderer */}\n        {/* This ensures clothing inherits bone transforms automatically */}\n\n        {/* Blocking shield effect */}\n        {isBlocking && (\n          <mesh position={[0, 1.2, 0.3]}>\n            <circleGeometry args={[0.5, 32]} />\n            <meshBasicMaterial\n              color={KOREAN_COLORS.PRIMARY_BLUE}\n              transparent\n              opacity={0.5}\n              side={2}\n            />\n          </mesh>\n        )}\n\n        {/* Counter indicator */}\n        {isCountering && (\n          <mesh position={[0, 1.5, 0]}>\n            <torusGeometry args={[0.4, 0.05, 8, 32]} />\n            <meshBasicMaterial color={KOREAN_COLORS.ACCENT_PURPLE} />\n          </mesh>\n        )}\n\n        {/* Player name overlay */}\n        {showDetails && name && (\n          <Html\n            position={[0, 2.8, 0]}\n            center\n            distanceFactor={isMobile ? 15 : 10}\n            occlude={false}\n            style={{ pointerEvents: \"none\", userSelect: \"none\" }}\n          >\n            <div\n              style={{\n                fontFamily: FONT_FAMILY.KOREAN,\n                textAlign: \"center\",\n                color: \"white\",\n                textShadow: \"0 0 4px rgba(0,0,0,0.8)\",\n              }}\n            >\n              {/* Player name */}\n              <div\n                style={{\n                  fontSize: isMobile ? \"12px\" : \"14px\",\n                  fontWeight: \"bold\",\n                  marginBottom: \"4px\",\n                }}\n                data-testid=\"player-name\"\n              >\n                {name.korean}\n              </div>\n\n              {/* Trigram symbol */}\n              {showStanceIndicator && (\n                <div\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    color: toHexColor(stanceColor),\n                  }}\n                  data-testid=\"trigram-symbol\"\n                >\n                  {trigramSymbol}\n                </div>\n              )}\n\n              {/* Combat state text */}\n              {(isBlocking || isStunned || isCountering) && (\n                <div\n                  style={{\n                    fontSize: isMobile ? \"10px\" : \"12px\",\n                    fontWeight: \"bold\",\n                    color: \"#ffff00\",\n                    marginTop: \"4px\",\n                  }}\n                  data-testid=\"combat-state\"\n                >\n                  {isBlocking ? \"방어\" : isStunned ? \"기절\" : \"반격\"}\n                </div>\n              )}\n            </div>\n          </Html>\n        )}\n\n        {/* State indicators (health, stamina, Ki, balance) */}\n        {showDetails && (\n          <PlayerStateIndicators\n            health={health}\n            maxHealth={maxHealth}\n            stamina={stamina}\n            ki={ki}\n            balance={balance}\n            consciousness={consciousness}\n            pain={pain}\n            bloodLoss={bloodLoss}\n            isMobile={isMobile}\n          />\n        )}\n      </group>{\" \"}\n      {/* Close inner sway group */}\n    </group>\n  );\n};\n\nexport default SkeletalPlayer3D;\n"],"mappings":"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"}

package/lib/components/shared/three/optimization/AdaptiveQuality.d.ts

@@ -0,0 +1,107 @@
+/**
+ * AdaptiveQuality - Dynamic quality adjustment system for mobile performance
+ *
+ * Monitors real-time FPS and automatically adjusts rendering quality to maintain
+ * 55fps target on mobile devices. Provides quality presets and smooth transitions.
+ *
+ * Features:
+ * - Real-time FPS monitoring
+ * - Automatic quality adjustment (high/medium/low)
+ * - Debounced quality changes to prevent thrashing
+ * - Mobile-optimized thresholds
+ * - React hook integration
+ *
+ * @module components/shared/three/optimization/AdaptiveQuality
+ * @category Performance Optimization
+ * @korean 적응형품질시스템
+ */
+/**
+ * Quality levels for adaptive rendering
+ */
+export type QualityLevel = "high" | "medium" | "low";
+/**
+ * Quality settings for each level
+ */
+export interface QualitySettings {
+    readonly level: QualityLevel;
+    readonly shadowMapSize: number;
+    readonly maxParticles: number;
+    readonly postProcessing: boolean;
+    readonly effectsQuality: number;
+}
+/**
+ * FPS thresholds for quality adjustment
+ */
+export interface AdaptiveQualityThresholds {
+    /** FPS threshold to downgrade quality */
+    readonly downgradeThreshold: number;
+    /** FPS threshold to upgrade quality */
+    readonly upgradeThreshold: number;
+    /** Minimum time between quality changes (ms) */
+    readonly debounceTime: number;
+    /** Number of frames to average for stability */
+    readonly sampleSize: number;
+}
+/**
+ * Quality presets optimized for mobile performance
+ */
+export declare const QUALITY_PRESETS: Record<QualityLevel, QualitySettings>;
+/**
+ * Adaptive quality system class
+ */
+export declare class AdaptiveQualitySystem {
+    private currentQuality;
+    private fpsHistory;
+    private lastQualityChange;
+    private readonly thresholds;
+    constructor(thresholds?: Partial<AdaptiveQualityThresholds>);
+    /**
+     * Update system with current FPS
+     * Returns new quality level if changed, null otherwise
+     */
+    update(currentFps: number): QualityLevel | null;
+    /**
+     * Get current quality level
+     */
+    getCurrentQuality(): QualityLevel;
+    /**
+     * Get settings for current quality level
+     */
+    getCurrentSettings(): QualitySettings;
+    /**
+     * Manually set quality level
+     */
+    setQuality(quality: QualityLevel): void;
+    /**
+     * Reset the system
+     */
+    reset(): void;
+}
+/**
+ * React hook for adaptive quality management
+ *
+ * Automatically monitors FPS and adjusts quality settings.
+ * Returns current quality level and settings.
+ *
+ * @param enabled - Whether adaptive quality is enabled
+ * @param isMobile - Whether device is mobile (stricter thresholds)
+ * @param onQualityChange - Callback when quality level changes
+ * @returns Current quality settings
+ *
+ * @example
+ * ```tsx
+ * function CombatScene({ isMobile }) {
+ *   const quality = useAdaptiveQuality(true, isMobile, (level) => {
+ *     console.log(`Quality changed to ${level}`);
+ *   });
+ *
+ *   return (
+ *     <Canvas shadowMap={{ size: quality.shadowMapSize }}>
+ *       <ParticleSystem maxParticles={quality.maxParticles} />
+ *     </Canvas>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAdaptiveQuality(enabled?: boolean, isMobile?: boolean, onQualityChange?: (quality: QualityLevel) => void): QualitySettings;
+//# sourceMappingURL=AdaptiveQuality.d.ts.map

package/lib/components/shared/three/optimization/AdaptiveQuality.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveQuality.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/optimization/AdaptiveQuality.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAKH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,yCAAyC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,uCAAuC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,gDAAgD;IAChD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAYD;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAsBxD,CAAC;AAEX;;GAEG;AACH,qBAAa,qBAAqB;IAChC,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4B;gBAE3C,UAAU,GAAE,OAAO,CAAC,yBAAyB,CAAM;IAI/D;;;OAGG;IACH,MAAM,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI;IAiE/C;;OAEG;IACH,iBAAiB,IAAI,YAAY;IAIjC;;OAEG;IACH,kBAAkB,IAAI,eAAe;IAIrC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;IAMvC;;OAEG;IACH,KAAK,IAAI,IAAI;CAId;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,OAAc,EACvB,QAAQ,GAAE,OAAe,EACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,GAChD,eAAe,CAmEjB"}