blacktrigram 0.7.2

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

@@ -0,0 +1,266 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { DEFAULT_FACIAL_DAMAGE } from "../../../../types/facial.js";
+import { BASE_BONE_RADIUS_RATIO, calculateBoneThickness } from "../../../../constants/bodyRenderingConstants.js";
+import BoneMuscles from "./BoneAttachedMuscles.js";
+import BoneClothing from "./BoneClothing.js";
+import BodySurface from "./BodySurface.js";
+import Face3D from "./Face3D.js";
+import Foot3D from "./Foot3D.js";
+import Hand3D from "./Hand3D.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/shared/three/anatomy/BoneRenderer.tsx
+/**
+* BoneRenderer component for visualizing skeletal hierarchy
+*
+* Renders bone hierarchy as connected capsule meshes with proper transformations.
+* Recursively renders parent-child bone relationships for complete skeleton visualization.
+*
+* @module components/three/BoneRenderer
+* @category 3D Components
+* @korean 뼈렌더러컴포넌트
+*/
+/**
+* Single bone renderer with transformation
+*
+* Renders a single bone as a capsule connecting to its parent.
+*
+* @param bone - Bone to render
+* @param color - Bone color
+* @param renderMode - Render mode
+* @param leftHandState - Left hand animation state
+* @param rightHandState - Right hand animation state
+* @param cameraDistance - Distance from camera
+* @param boneThicknessMultiplier - Thickness multiplier for bone radius
+* @korean 단일뼈렌더러
+*/
+var SingleBone = ({ bone, color, renderMode, leftHandState, rightHandState, cameraDistance = 10, facialExpression, facialDamage, opponentPosition, enableFacialExpressions = false, enableEyeTracking = true, boneThicknessMultiplier = 1, muscleStates, isExhausted = false, physicalAttributes, archetype }) => {
+	const groupRef = useRef(null);
+	useFrame(() => {
+		if (groupRef.current) {
+			groupRef.current.rotation.set(bone.rotation.x, bone.rotation.y, bone.rotation.z);
+			groupRef.current.position.set(bone.position.x, bone.position.y, bone.position.z);
+		}
+	});
+	const boneTransform = useMemo(() => {
+		const length = bone.length;
+		const capsuleDefaultDirection = new THREE.Vector3(0, 1, 0);
+		let rotation = new THREE.Euler(0, 0, 0);
+		let offset = new THREE.Vector3(0, -length / 2, 0);
+		if (bone.parent) {
+			const x = bone.position.x ?? 0;
+			const y = bone.position.y ?? 0;
+			const z = bone.position.z ?? 0;
+			const positionLength = Math.sqrt(x * x + y * y + z * z);
+			if (positionLength > .001) {
+				const targetX = x / positionLength;
+				const targetY = y / positionLength;
+				const targetZ = z / positionLength;
+				const target = new THREE.Vector3(targetX, targetY, targetZ);
+				const quaternion = new THREE.Quaternion().setFromUnitVectors(capsuleDefaultDirection, target);
+				rotation = new THREE.Euler().setFromQuaternion(quaternion);
+				offset = new THREE.Vector3(-targetX * length / 2, -targetY * length / 2, -targetZ * length / 2);
+			}
+		}
+		return {
+			length,
+			rotation,
+			offset
+		};
+	}, [bone]);
+	const hasMuscles = muscleStates !== void 0 && muscleStates.size > 0;
+	return /* @__PURE__ */ jsxs("group", {
+		ref: groupRef,
+		scale: bone.scale.toArray(),
+		name: `bone-${bone.name}`,
+		children: [
+			renderMode === "solid" && !hasMuscles ? /* @__PURE__ */ jsxs("mesh", {
+				position: boneTransform.offset.toArray(),
+				rotation: [
+					boneTransform.rotation.x,
+					boneTransform.rotation.y,
+					boneTransform.rotation.z
+				],
+				castShadow: true,
+				receiveShadow: true,
+				children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+					boneTransform.length * BASE_BONE_RADIUS_RATIO * boneThicknessMultiplier,
+					boneTransform.length,
+					4,
+					8
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color,
+					metalness: .5,
+					roughness: .4,
+					clearcoat: 1,
+					clearcoatRoughness: .1,
+					envMapIntensity: 1
+				})]
+			}) : renderMode === "debug" ? /* @__PURE__ */ jsxs("mesh", {
+				position: boneTransform.offset.toArray(),
+				rotation: [
+					boneTransform.rotation.x,
+					boneTransform.rotation.y,
+					boneTransform.rotation.z
+				],
+				children: [/* @__PURE__ */ jsx("capsuleGeometry", { args: [
+					boneTransform.length * BASE_BONE_RADIUS_RATIO * boneThicknessMultiplier,
+					boneTransform.length,
+					4,
+					8
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color,
+					wireframe: true,
+					transparent: true,
+					opacity: .5
+				})]
+			}) : null,
+			renderMode === "debug" && /* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				boneTransform.length * .1 * 1.2 * boneThicknessMultiplier,
+				8,
+				8
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", { color: KOREAN_COLORS.PRIMARY_CYAN })] }),
+			renderMode === "solid" && muscleStates && /* @__PURE__ */ jsx(BoneMuscles, {
+				boneName: bone.name,
+				muscleStates,
+				isExhausted,
+				physicalAttributes
+			}),
+			renderMode === "solid" && archetype && physicalAttributes && /* @__PURE__ */ jsx(BodySurface, {
+				boneName: bone.name,
+				archetype,
+				cameraDistance,
+				physicalAttributes: {
+					muscleMass: physicalAttributes.muscleMass,
+					fatMass: physicalAttributes.fatMass,
+					shoulderWidth: physicalAttributes.shoulderWidth ?? 45,
+					torsoLength: physicalAttributes.torsoLength ?? 59,
+					armLength: physicalAttributes.armLength ?? 77,
+					legLength: physicalAttributes.legLength ?? 96
+				}
+			}),
+			renderMode === "solid" && archetype && physicalAttributes && /* @__PURE__ */ jsx(BoneClothing, {
+				boneName: bone.name,
+				archetype,
+				physicalAttributes: {
+					muscleMass: physicalAttributes.muscleMass,
+					fatMass: physicalAttributes.fatMass,
+					shoulderWidth: physicalAttributes.shoulderWidth ?? 45,
+					torsoLength: physicalAttributes.torsoLength ?? 59,
+					armLength: physicalAttributes.armLength ?? 77,
+					legLength: physicalAttributes.legLength ?? 96
+				}
+			}),
+			bone.children.map((childBone) => /* @__PURE__ */ jsx(SingleBone, {
+				bone: childBone,
+				color,
+				renderMode,
+				leftHandState,
+				rightHandState,
+				cameraDistance,
+				facialExpression,
+				facialDamage,
+				opponentPosition,
+				enableFacialExpressions,
+				enableEyeTracking,
+				boneThicknessMultiplier,
+				muscleStates,
+				isExhausted,
+				physicalAttributes,
+				archetype
+			}, childBone.name)),
+			bone.name === "hand_L" && leftHandState && /* @__PURE__ */ jsx(Hand3D, {
+				side: "left",
+				pose: leftHandState.currentPose,
+				fingerCurl: leftHandState.currentFingerCurl,
+				distanceFromCamera: cameraDistance,
+				wristRotation: leftHandState.currentWristRotation,
+				isHighlighted: leftHandState.isHighlighted,
+				highlightMode: leftHandState.highlightMode,
+				skinColor: color,
+				scale: 1
+			}),
+			bone.name === "hand_R" && rightHandState && /* @__PURE__ */ jsx(Hand3D, {
+				side: "right",
+				pose: rightHandState.currentPose,
+				fingerCurl: rightHandState.currentFingerCurl,
+				distanceFromCamera: cameraDistance,
+				wristRotation: rightHandState.currentWristRotation,
+				isHighlighted: rightHandState.isHighlighted,
+				highlightMode: rightHandState.highlightMode,
+				skinColor: color,
+				scale: 1
+			}),
+			bone.name === "foot_L" && /* @__PURE__ */ jsx(Foot3D, {
+				side: "left",
+				skinColor: color,
+				scale: boneThicknessMultiplier,
+				isHighlighted: false
+			}),
+			bone.name === "foot_R" && /* @__PURE__ */ jsx(Foot3D, {
+				side: "right",
+				skinColor: color,
+				scale: boneThicknessMultiplier,
+				isHighlighted: false
+			}),
+			bone.name === "head" && enableFacialExpressions && facialExpression && /* @__PURE__ */ jsx(Face3D, {
+				expression: facialExpression,
+				damage: facialDamage ?? DEFAULT_FACIAL_DAMAGE,
+				opponentPosition: opponentPosition ?? new THREE.Vector3(5, 2, 0),
+				headRotation: bone.rotation.clone(),
+				enableEyeTracking,
+				enableDamageVisuals: true,
+				isMobile: cameraDistance > 15,
+				skinColor: color
+			})
+		]
+	});
+};
+/**
+* BoneRenderer component
+*
+* Renders complete skeletal rig with recursive bone hierarchy.
+*
+* @example
+* ```tsx
+* const rig = createHumanoidRig();
+* <BoneRenderer rig={rig} color={0xFF6B6B} renderMode="solid" />
+* ```
+*
+* @korean 뼈렌더러컴포넌트
+*/
+var BoneRenderer = ({ rig, color = KOREAN_COLORS.ACCENT_RED, showBones = true, renderMode = "solid", leftHandState, rightHandState, cameraDistance = 10, facialExpression, facialDamage, opponentPosition, enableFacialExpressions = false, enableEyeTracking = true, physicalAttributes, muscleStates, isExhausted = false, archetype }) => {
+	const boneThicknessMultiplier = useMemo(() => {
+		if (!physicalAttributes) return 1;
+		return calculateBoneThickness(physicalAttributes.muscleMass, physicalAttributes.fatMass);
+	}, [physicalAttributes]);
+	if (!showBones) return null;
+	return /* @__PURE__ */ jsx("group", {
+		name: "bone-renderer",
+		children: /* @__PURE__ */ jsx(SingleBone, {
+			bone: rig.root,
+			color,
+			renderMode,
+			leftHandState,
+			rightHandState,
+			cameraDistance,
+			facialExpression,
+			facialDamage,
+			opponentPosition,
+			enableFacialExpressions,
+			enableEyeTracking,
+			boneThicknessMultiplier,
+			muscleStates,
+			isExhausted,
+			physicalAttributes,
+			archetype
+		})
+	});
+};
+//#endregion
+export { BoneRenderer as default };
+
+//# sourceMappingURL=BoneRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoneRenderer.js","names":[],"sources":["../../../../../src/components/shared/three/anatomy/BoneRenderer.tsx"],"sourcesContent":["/**\n * BoneRenderer component for visualizing skeletal hierarchy\n *\n * Renders bone hierarchy as connected capsule meshes with proper transformations.\n * Recursively renders parent-child bone relationships for complete skeleton visualization.\n *\n * @module components/three/BoneRenderer\n * @category 3D Components\n * @korean 뼈렌더러컴포넌트\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport {\n  BASE_BONE_RADIUS_RATIO,\n  calculateBoneThickness,\n} from \"../../../../constants/bodyRenderingConstants\";\nimport type { PlayerArchetype } from \"../../../../types/common\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport type {\n  FacialDamageState,\n  FacialExpression,\n} from \"../../../../types/facial\";\nimport { DEFAULT_FACIAL_DAMAGE } from \"../../../../types/facial\";\nimport type { HandAnimationState } from \"../../../../types/hand-animation\";\nimport type { Bone, SkeletalRig } from \"../../../../types/skeletal\";\nimport { BoneMuscles } from \"./BoneAttachedMuscles\";\nimport { BoneClothing } from \"./BoneClothing\";\nimport { BodySurface } from \"./BodySurface\";\nimport Face3D from \"./Face3D\";\nimport Foot3D from \"./Foot3D\";\nimport Hand3D from \"./Hand3D\";\n\n/**\n * Props for BoneRenderer component\n *\n * @public\n * @category Component Props\n * @korean 뼈렌더러속성\n */\nexport interface BoneRendererProps {\n  /**\n   * Skeletal rig to render\n   * @korean 골격\n   */\n  readonly rig: SkeletalRig;\n\n  /**\n   * Bone color\n   * @korean 뼈색상\n   */\n  readonly color?: number;\n\n  /**\n   * Whether to show bones (for debugging)\n   * @korean 뼈표시여부\n   */\n  readonly showBones?: boolean;\n\n  /**\n   * Render mode: 'solid' for solid meshes, 'debug' for wireframe\n   * @korean 렌더모드\n   */\n  readonly renderMode?: \"solid\" | \"debug\";\n\n  /**\n   * Left hand animation state\n   * @korean 왼손애니메이션상태\n   */\n  readonly leftHandState?: HandAnimationState;\n\n  /**\n   * Right hand animation state\n   * @korean 오른손애니메이션상태\n   */\n  readonly rightHandState?: HandAnimationState;\n\n  /**\n   * Distance from camera for LOD\n   * @korean 카메라거리\n   */\n  readonly cameraDistance?: number;\n\n  /**\n   * Current facial expression\n   * @korean 얼굴표정\n   */\n  readonly facialExpression?: FacialExpression;\n\n  /**\n   * Facial damage state\n   * @korean 얼굴손상\n   */\n  readonly facialDamage?: FacialDamageState;\n\n  /**\n   * Opponent position for eye tracking\n   * @korean 상대위치\n   */\n  readonly opponentPosition?: THREE.Vector3;\n\n  /**\n   * Enable facial expressions rendering\n   * @korean 얼굴표정렌더링\n   */\n  readonly enableFacialExpressions?: boolean;\n\n  /**\n   * Enable eye tracking\n   * @korean 눈추적활성화\n   */\n  readonly enableEyeTracking?: boolean;\n\n  /**\n   * Physical attributes for bone thickness scaling\n   * @korean 신체속성\n   */\n  readonly physicalAttributes?: {\n    readonly muscleMass: number;\n    readonly fatMass: number;\n    readonly shoulderWidth?: number;\n    readonly torsoLength?: number;\n    readonly armLength?: number;\n    readonly legLength?: number;\n  };\n\n  /**\n   * Player archetype for clothing style\n   * @korean 플레이어원형\n   */\n  readonly archetype?: PlayerArchetype;\n\n  /**\n   * Muscle tension states for bone-attached muscles\n   * Map of muscle group name to tension level (0-1)\n   * @korean 근육상태들\n   */\n  readonly muscleStates?: Map<string, number>;\n\n  /**\n   * Whether player is exhausted (triggers muscle shaking)\n   * @korean 피로여부\n   */\n  readonly isExhausted?: boolean;\n}\n\n/**\n * Single bone renderer with transformation\n *\n * Renders a single bone as a capsule connecting to its parent.\n *\n * @param bone - Bone to render\n * @param color - Bone color\n * @param renderMode - Render mode\n * @param leftHandState - Left hand animation state\n * @param rightHandState - Right hand animation state\n * @param cameraDistance - Distance from camera\n * @param boneThicknessMultiplier - Thickness multiplier for bone radius\n * @korean 단일뼈렌더러\n */\nconst SingleBone: React.FC<{\n  readonly bone: Bone;\n  readonly color: number;\n  readonly renderMode: \"solid\" | \"debug\";\n  readonly leftHandState?: HandAnimationState;\n  readonly rightHandState?: HandAnimationState;\n  readonly cameraDistance?: number;\n  readonly facialExpression?: FacialExpression;\n  readonly facialDamage?: FacialDamageState;\n  readonly opponentPosition?: THREE.Vector3;\n  readonly enableFacialExpressions?: boolean;\n  readonly enableEyeTracking?: boolean;\n  readonly boneThicknessMultiplier?: number;\n  readonly muscleStates?: Map<string, number>;\n  readonly isExhausted?: boolean;\n  readonly physicalAttributes?: {\n    readonly muscleMass: number;\n    readonly fatMass: number;\n    readonly shoulderWidth?: number;\n    readonly torsoLength?: number;\n    readonly armLength?: number;\n    readonly legLength?: number;\n  };\n  readonly archetype?: PlayerArchetype;\n}> = ({\n  bone,\n  color,\n  renderMode,\n  leftHandState,\n  rightHandState,\n  cameraDistance = 10,\n  facialExpression,\n  facialDamage,\n  opponentPosition,\n  enableFacialExpressions = false,\n  enableEyeTracking = true,\n  boneThicknessMultiplier = 1.0,\n  muscleStates,\n  isExhausted = false,\n  physicalAttributes,\n  archetype,\n}) => {\n  // Ref for the bone group to update rotation imperatively\n  const groupRef = useRef<THREE.Group>(null);\n\n  // Sync bone rotation from animation system each frame\n  // This is necessary because bone.rotation is mutated in place by batchUpdateBones\n  // and React doesn't detect the mutation (no state/prop change)\n  useFrame(() => {\n    if (groupRef.current) {\n      // Apply current bone rotation and position from animation system\n      groupRef.current.rotation.set(\n        bone.rotation.x,\n        bone.rotation.y,\n        bone.rotation.z,\n      );\n      groupRef.current.position.set(\n        bone.position.x,\n        bone.position.y,\n        bone.position.z,\n      );\n    }\n  });\n\n  // Calculate bone direction and length\n  const boneTransform = useMemo(() => {\n    const length = bone.length;\n    // CapsuleGeometry in Three.js is aligned along the Y-axis by default (0, 1, 0)\n    const capsuleDefaultDirection = new THREE.Vector3(0, 1, 0);\n\n    // Calculate rotation to align with bone direction if parent exists\n    let rotation = new THREE.Euler(0, 0, 0);\n    // Offset to position capsule between parent and this bone's position\n    // Capsules extend equally in both directions, so we offset by half length toward parent\n    let offset = new THREE.Vector3(0, -length / 2, 0);\n\n    if (bone.parent) {\n      // Use this bone's local position (parent → child vector) and normalize to get the direction\n      // Extract coordinates and manually normalize to avoid issues with Vector3 method availability\n      const x = bone.position.x ?? 0;\n      const y = bone.position.y ?? 0;\n      const z = bone.position.z ?? 0;\n\n      const positionLength = Math.sqrt(x * x + y * y + z * z);\n      if (positionLength > 0.001) {\n        // Manually normalize to get a stable direction vector\n        const targetX = x / positionLength;\n        const targetY = y / positionLength;\n        const targetZ = z / positionLength;\n        const target = new THREE.Vector3(targetX, targetY, targetZ);\n\n        // Calculate quaternion rotation from capsule's default Y-axis to target direction\n        const quaternion = new THREE.Quaternion().setFromUnitVectors(\n          capsuleDefaultDirection,\n          target,\n        );\n        rotation = new THREE.Euler().setFromQuaternion(quaternion);\n\n        // Calculate offset in the direction toward parent (negative of bone direction)\n        // This positions the capsule to connect parent → this bone\n        offset = new THREE.Vector3(\n          (-targetX * length) / 2,\n          (-targetY * length) / 2,\n          (-targetZ * length) / 2,\n        );\n      }\n    }\n\n    return { length, rotation, offset };\n  }, [bone]);\n\n  // Determine if muscles are being rendered - if so, hide bone geometry\n  // to prevent layer stacking that causes \"bubble man\" appearance\n  const hasMuscles = muscleStates !== undefined && muscleStates.size > 0;\n\n  return (\n    <group\n      ref={groupRef}\n      scale={bone.scale.toArray()}\n      name={`bone-${bone.name}`}\n    >\n      {/* Bone capsule connecting to parent - ONLY render if no muscles (muscles provide body shape) */}\n      {renderMode === \"solid\" && !hasMuscles ? (\n        <mesh\n          position={boneTransform.offset.toArray()}\n          rotation={[\n            boneTransform.rotation.x,\n            boneTransform.rotation.y,\n            boneTransform.rotation.z,\n          ]}\n          castShadow\n          receiveShadow\n        >\n          <capsuleGeometry\n            args={[\n              boneTransform.length *\n                BASE_BONE_RADIUS_RATIO *\n                boneThicknessMultiplier, // Radius scaled by thickness\n              boneTransform.length, // Length unchanged\n              4,\n              8,\n            ]}\n          />\n          <meshPhysicalMaterial\n            color={color}\n            metalness={0.5}\n            roughness={0.4}\n            clearcoat={1.0}\n            clearcoatRoughness={0.1}\n            envMapIntensity={1.0}\n          />\n        </mesh>\n      ) : renderMode === \"debug\" ? (\n        <mesh\n          position={boneTransform.offset.toArray()}\n          rotation={[\n            boneTransform.rotation.x,\n            boneTransform.rotation.y,\n            boneTransform.rotation.z,\n          ]}\n        >\n          <capsuleGeometry\n            args={[\n              boneTransform.length *\n                BASE_BONE_RADIUS_RATIO *\n                boneThicknessMultiplier, // Radius scaled by thickness\n              boneTransform.length, // Length unchanged\n              4,\n              8,\n            ]}\n          />\n          <meshBasicMaterial\n            color={color}\n            wireframe={true}\n            transparent={true}\n            opacity={0.5}\n          />\n        </mesh>\n      ) : null}\n\n      {/* Joint sphere at bone position */}\n      {renderMode === \"debug\" && (\n        <mesh>\n          <sphereGeometry\n            args={[\n              boneTransform.length *\n                BASE_BONE_RADIUS_RATIO *\n                1.2 *\n                boneThicknessMultiplier,\n              8,\n              8,\n            ]}\n          />\n          <meshBasicMaterial color={KOREAN_COLORS.PRIMARY_CYAN} />\n        </mesh>\n      )}\n\n      {/* Render bone-attached muscles */}\n      {renderMode === \"solid\" && muscleStates && (\n        <BoneMuscles\n          boneName={bone.name}\n          muscleStates={muscleStates}\n          isExhausted={isExhausted}\n          physicalAttributes={physicalAttributes}\n        />\n      )}\n\n      {/* Render body surface (skin/flesh layer) - provides continuous humanoid appearance */}\n      {renderMode === \"solid\" && archetype && physicalAttributes && (\n        <BodySurface\n          boneName={bone.name}\n          archetype={archetype}\n          cameraDistance={cameraDistance}\n          physicalAttributes={{\n            muscleMass: physicalAttributes.muscleMass,\n            fatMass: physicalAttributes.fatMass,\n            shoulderWidth: physicalAttributes.shoulderWidth ?? 45,\n            torsoLength: physicalAttributes.torsoLength ?? 59,\n            armLength: physicalAttributes.armLength ?? 77,\n            legLength: physicalAttributes.legLength ?? 96,\n          }}\n        />\n      )}\n\n      {/* Render bone-attached clothing */}\n      {renderMode === \"solid\" && archetype && physicalAttributes && (\n        <BoneClothing\n          boneName={bone.name}\n          archetype={archetype}\n          physicalAttributes={{\n            muscleMass: physicalAttributes.muscleMass,\n            fatMass: physicalAttributes.fatMass,\n            shoulderWidth: physicalAttributes.shoulderWidth ?? 45,\n            torsoLength: physicalAttributes.torsoLength ?? 59,\n            armLength: physicalAttributes.armLength ?? 77,\n            legLength: physicalAttributes.legLength ?? 96,\n          }}\n        />\n      )}\n\n      {/* Render children recursively */}\n      {bone.children.map((childBone) => (\n        <SingleBone\n          key={childBone.name}\n          bone={childBone}\n          color={color}\n          renderMode={renderMode}\n          leftHandState={leftHandState}\n          rightHandState={rightHandState}\n          cameraDistance={cameraDistance}\n          facialExpression={facialExpression}\n          facialDamage={facialDamage}\n          opponentPosition={opponentPosition}\n          enableFacialExpressions={enableFacialExpressions}\n          enableEyeTracking={enableEyeTracking}\n          boneThicknessMultiplier={boneThicknessMultiplier}\n          muscleStates={muscleStates}\n          isExhausted={isExhausted}\n          physicalAttributes={physicalAttributes}\n          archetype={archetype}\n        />\n      ))}\n\n      {/* Add hands at hand bones with animation state */}\n      {bone.name === \"hand_L\" && leftHandState && (\n        <Hand3D\n          side=\"left\"\n          pose={leftHandState.currentPose}\n          fingerCurl={leftHandState.currentFingerCurl}\n          distanceFromCamera={cameraDistance}\n          wristRotation={leftHandState.currentWristRotation}\n          isHighlighted={leftHandState.isHighlighted}\n          highlightMode={leftHandState.highlightMode}\n          skinColor={color}\n          scale={1.0}\n        />\n      )}\n      {bone.name === \"hand_R\" && rightHandState && (\n        <Hand3D\n          side=\"right\"\n          pose={rightHandState.currentPose}\n          fingerCurl={rightHandState.currentFingerCurl}\n          distanceFromCamera={cameraDistance}\n          wristRotation={rightHandState.currentWristRotation}\n          isHighlighted={rightHandState.isHighlighted}\n          highlightMode={rightHandState.highlightMode}\n          skinColor={color}\n          scale={1.0}\n        />\n      )}\n\n      {/* Add feet at foot bones with archetype scaling */}\n      {bone.name === \"foot_L\" && (\n        <Foot3D\n          side=\"left\"\n          skinColor={color}\n          scale={boneThicknessMultiplier}\n          isHighlighted={false}\n        />\n      )}\n      {bone.name === \"foot_R\" && (\n        <Foot3D\n          side=\"right\"\n          skinColor={color}\n          scale={boneThicknessMultiplier}\n          isHighlighted={false}\n        />\n      )}\n\n      {/* Add facial features at head bone */}\n      {bone.name === \"head\" && enableFacialExpressions && facialExpression && (\n        <Face3D\n          expression={facialExpression}\n          damage={facialDamage ?? DEFAULT_FACIAL_DAMAGE}\n          opponentPosition={opponentPosition ?? new THREE.Vector3(5, 2, 0)}\n          headRotation={bone.rotation.clone()}\n          enableEyeTracking={enableEyeTracking}\n          enableDamageVisuals={true}\n          isMobile={cameraDistance > 15}\n          skinColor={color}\n        />\n      )}\n    </group>\n  );\n};\n\n/**\n * BoneRenderer component\n *\n * Renders complete skeletal rig with recursive bone hierarchy.\n *\n * @example\n * ```tsx\n * const rig = createHumanoidRig();\n * <BoneRenderer rig={rig} color={0xFF6B6B} renderMode=\"solid\" />\n * ```\n *\n * @korean 뼈렌더러컴포넌트\n */\nexport const BoneRenderer: React.FC<BoneRendererProps> = ({\n  rig,\n  color = KOREAN_COLORS.ACCENT_RED,\n  showBones = true,\n  renderMode = \"solid\",\n  leftHandState,\n  rightHandState,\n  cameraDistance = 10,\n  facialExpression,\n  facialDamage,\n  opponentPosition,\n  enableFacialExpressions = false, // Default false to avoid breaking existing tests\n  enableEyeTracking = true,\n  physicalAttributes,\n  muscleStates,\n  isExhausted = false,\n  archetype,\n}) => {\n  // Calculate bone thickness multiplier from physical attributes\n  const boneThicknessMultiplier = useMemo(() => {\n    if (!physicalAttributes) return 1.0;\n    return calculateBoneThickness(\n      physicalAttributes.muscleMass,\n      physicalAttributes.fatMass,\n    );\n  }, [physicalAttributes]);\n\n  if (!showBones) {\n    return null;\n  }\n\n  return (\n    <group name=\"bone-renderer\">\n      <SingleBone\n        bone={rig.root}\n        color={color}\n        renderMode={renderMode}\n        leftHandState={leftHandState}\n        rightHandState={rightHandState}\n        cameraDistance={cameraDistance}\n        facialExpression={facialExpression}\n        facialDamage={facialDamage}\n        opponentPosition={opponentPosition}\n        enableFacialExpressions={enableFacialExpressions}\n        enableEyeTracking={enableEyeTracking}\n        boneThicknessMultiplier={boneThicknessMultiplier}\n        muscleStates={muscleStates}\n        isExhausted={isExhausted}\n        physicalAttributes={physicalAttributes}\n        archetype={archetype}\n      />\n    </group>\n  );\n};\n\nexport default BoneRenderer;\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+/**
+ * Face3D component with realistic facial features
+ *
+ * Renders facial features with expressions, eye tracking, and damage visualization:
+ * - Eyes with pupils that track opponent
+ * - Mouth that opens/closes based on expression
+ * - Nose geometry
+ * - Damage effects (bruises, swelling, bleeding)
+ *
+ * @module components/three/Face3D
+ * @category 3D Components
+ * @korean 얼굴3D컴포넌트
+ */
+import React from "react";
+import { type Face3DProps } from "../../../../types/facial";
+/**
+ * Face3D component
+ *
+ * Main facial features component with head sphere, eyes, mouth, nose,
+ * and damage visualization.
+ *
+ * @param props - Face3D props
+ * @returns Face 3D mesh group
+ *
+ * @example
+ * ```tsx
+ * <Face3D
+ *   expression={FacialExpression.PAINED}
+ *   damage={damageState}
+ *   opponentPosition={new THREE.Vector3(5, 2, 0)}
+ *   headRotation={new THREE.Euler(0, 0, 0)}
+ *   enableEyeTracking={true}
+ * />
+ * ```
+ *
+ * @korean 얼굴3D
+ */
+export declare const Face3D: React.FC<Face3DProps>;
+export default Face3D;
+//# sourceMappingURL=Face3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Face3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/Face3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAIL,KAAK,WAAW,EAEjB,MAAM,0BAA0B,CAAC;AA8NlC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4LxC,CAAC;AAEF,eAAe,MAAM,CAAC"}