blacktrigram 0.7.2

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

@@ -0,0 +1,426 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { EYE_OPENNESS, MOUTH_OPENNESS } from "../../../../types/facial.js";
+import { mixColors } from "../../../../utils/colorHelpers.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/Face3D.tsx
+/**
+* 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컴포넌트
+*/
+/**
+* Head position offset from bone center
+* Since Face3D is rendered inside the head bone group,
+* this is a small offset to position the face correctly
+* @korean 머리위치오프셋
+*/
+var HEAD_POSITION_OFFSET = .1;
+/**
+* Eye component with pupil tracking and swelling
+*
+* Renders eye with adjustable openness, pupil tracking, and swelling effects.
+*
+* @param props - Eye component props
+* @returns Eye 3D mesh group
+*
+* @korean 눈컴포넌트
+*/
+var Eye = ({ position, expression, lookDirection, swelling, side }) => {
+	const eyeOpenness = useMemo(() => {
+		return EYE_OPENNESS[expression];
+	}, [expression]);
+	const pupilOffset = useMemo(() => {
+		const normalized = lookDirection.clone().normalize();
+		const maxOffset = .015;
+		const x = normalized.x * maxOffset;
+		const y = -normalized.y * maxOffset * .5;
+		return new THREE.Vector3(x, y, .03);
+	}, [lookDirection]);
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		name: `eye-${side}`,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				scale: [
+					1,
+					eyeOpenness,
+					1
+				],
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.04,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color: 16777215,
+					roughness: .1,
+					clearcoat: 1,
+					clearcoatRoughness: .1
+				})]
+			}),
+			eyeOpenness > .1 && /* @__PURE__ */ jsxs("mesh", {
+				position: pupilOffset,
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.015,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+					color: 0,
+					roughness: .2,
+					clearcoat: .8
+				})]
+			}),
+			swelling > 0 && /* @__PURE__ */ jsxs("mesh", {
+				scale: [
+					1 + swelling * .5,
+					1 + swelling * .5,
+					1
+				],
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.05,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+					color: 6697830,
+					transparent: true,
+					opacity: swelling * .6
+				})]
+			})
+		]
+	});
+};
+/**
+* Mouth component with expression-based openness and bleeding
+*
+* Renders mouth that opens/closes based on expression.
+*
+* @param props - Mouth component props
+* @returns Mouth 3D mesh group
+*
+* @korean 입컴포넌트
+*/
+var Mouth = ({ position, expression, bleeding }) => {
+	const mouthOpenness = useMemo(() => {
+		return MOUTH_OPENNESS[expression];
+	}, [expression]);
+	const bloodColor = KOREAN_COLORS.ACCENT_RED;
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		name: "mouth",
+		children: [/* @__PURE__ */ jsxs("mesh", {
+			scale: [
+				.08,
+				mouthOpenness * .04 + .005,
+				.01
+			],
+			children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+				1,
+				1,
+				1
+			] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+				color: 3342336,
+				roughness: .5
+			})]
+		}), bleeding > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("mesh", {
+			position: [
+				0,
+				-.01,
+				0
+			],
+			children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.015,
+				8,
+				8
+			] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+				color: bloodColor,
+				roughness: .2,
+				clearcoat: 1,
+				transparent: true,
+				opacity: bleeding * .9
+			})]
+		}), bleeding > .5 && /* @__PURE__ */ jsxs("mesh", {
+			position: [
+				0,
+				-.03,
+				0
+			],
+			scale: [
+				.5,
+				1,
+				.5
+			],
+			children: [/* @__PURE__ */ jsx("cylinderGeometry", { args: [
+				.005,
+				.008,
+				.04,
+				8
+			] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+				color: bloodColor,
+				roughness: .2,
+				clearcoat: 1,
+				transparent: true,
+				opacity: bleeding * .7
+			})]
+		})] })]
+	});
+};
+/**
+* Nose component
+*
+* Simple geometric nose.
+*
+* @param position - Nose position
+* @param skinColor - Skin tone color
+* @param bleeding - Bleeding intensity (0-1)
+* @returns Nose 3D mesh
+*
+* @korean 코컴포넌트
+*/
+var Nose = ({ position, skinColor, bleeding }) => {
+	const bloodColor = KOREAN_COLORS.ACCENT_RED;
+	const noseMaterial = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color: skinColor,
+		roughness: .6,
+		metalness: 0,
+		clearcoat: .3,
+		clearcoatRoughness: .6,
+		transmission: 0,
+		thickness: .05,
+		ior: 1.4,
+		sheen: .1,
+		sheenRoughness: .8,
+		emissive: new THREE.Color(16736320),
+		emissiveIntensity: .02
+	}), [skinColor]);
+	useEffect(() => {
+		return () => {
+			noseMaterial.dispose();
+		};
+	}, [noseMaterial]);
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		name: "nose",
+		children: [/* @__PURE__ */ jsxs("mesh", {
+			rotation: [
+				Math.PI,
+				0,
+				0
+			],
+			children: [/* @__PURE__ */ jsx("coneGeometry", { args: [
+				.03,
+				.06,
+				8
+			] }), /* @__PURE__ */ jsx("primitive", {
+				object: noseMaterial,
+				attach: "material"
+			})]
+		}), bleeding > 0 && /* @__PURE__ */ jsxs("mesh", {
+			position: [
+				0,
+				-.03,
+				.01
+			],
+			children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.01,
+				6,
+				6
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: bloodColor,
+				transparent: true,
+				opacity: bleeding * .8
+			})]
+		})]
+	});
+};
+/**
+* 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
+*/
+var Face3D = ({ expression, damage, opponentPosition, headRotation, enableEyeTracking = true, enableDamageVisuals = true, isMobile = false, skinColor = 16767916 }) => {
+	const eyeDirection = useMemo(() => {
+		if (!enableEyeTracking) return new THREE.Vector3(0, 0, 1);
+		if (!opponentPosition || typeof opponentPosition.x !== "number" || typeof opponentPosition.y !== "number" || typeof opponentPosition.z !== "number") {
+			if (process.env.NODE_ENV !== "production") console.warn("Face3D: opponentPosition is not a valid THREE.Vector3; defaulting eye direction forward.");
+			return new THREE.Vector3(0, 0, 1);
+		}
+		const headPos = new THREE.Vector3(0, HEAD_POSITION_OFFSET, 0);
+		const dir = new THREE.Vector3(opponentPosition.x - headPos.x, opponentPosition.y - headPos.y, opponentPosition.z - headPos.z);
+		dir.normalize();
+		return dir;
+	}, [opponentPosition, enableEyeTracking]);
+	const bruiseIntensity = useMemo(() => {
+		if (!enableDamageVisuals) return 0;
+		return (damage.leftCheekBruise + damage.rightCheekBruise + damage.foreheadBruise + damage.jawBruise) / 4;
+	}, [damage, enableDamageVisuals]);
+	const headColor = useMemo(() => {
+		if (bruiseIntensity === 0) return skinColor;
+		return mixColors(skinColor, 6697830, bruiseIntensity * .3);
+	}, [skinColor, bruiseIntensity]);
+	const damageTexture = null;
+	const headMaterial = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color: headColor,
+		map: damageTexture,
+		roughness: .6,
+		metalness: 0,
+		clearcoat: .3,
+		clearcoatRoughness: .6,
+		envMapIntensity: .5,
+		transmission: 0,
+		thickness: .1,
+		ior: 1.4,
+		sheen: .15,
+		sheenRoughness: .7,
+		emissive: new THREE.Color(16736320),
+		emissiveIntensity: .02
+	}), [headColor, damageTexture]);
+	const earMaterial = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color: headColor,
+		roughness: .6,
+		metalness: 0,
+		clearcoat: .3,
+		clearcoatRoughness: .6,
+		transmission: 0,
+		thickness: .05,
+		ior: 1.4,
+		sheen: .1,
+		sheenRoughness: .8,
+		emissive: new THREE.Color(16736320),
+		emissiveIntensity: .02
+	}), [headColor]);
+	useEffect(() => {
+		return () => {
+			headMaterial.dispose();
+			earMaterial.dispose();
+		};
+	}, [headMaterial, earMaterial]);
+	return /* @__PURE__ */ jsxs("group", {
+		position: [
+			0,
+			HEAD_POSITION_OFFSET,
+			0
+		],
+		rotation: headRotation,
+		name: "face3d",
+		children: [
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.2,
+				isMobile ? 12 : 16,
+				isMobile ? 12 : 16
+			] }), /* @__PURE__ */ jsx("primitive", {
+				object: headMaterial,
+				attach: "material"
+			})] }),
+			/* @__PURE__ */ jsx(Eye, {
+				position: [
+					-.08,
+					.05,
+					.15
+				],
+				expression,
+				lookDirection: eyeDirection,
+				swelling: enableDamageVisuals ? damage.leftEyeSwelling : 0,
+				side: "left"
+			}),
+			/* @__PURE__ */ jsx(Eye, {
+				position: [
+					.08,
+					.05,
+					.15
+				],
+				expression,
+				lookDirection: eyeDirection,
+				swelling: enableDamageVisuals ? damage.rightEyeSwelling : 0,
+				side: "right"
+			}),
+			/* @__PURE__ */ jsx(Mouth, {
+				position: [
+					0,
+					-.05,
+					.15
+				],
+				expression,
+				bleeding: enableDamageVisuals ? damage.mouthBleeding : 0
+			}),
+			/* @__PURE__ */ jsx(Nose, {
+				position: [
+					0,
+					.02,
+					.18
+				],
+				skinColor,
+				bleeding: enableDamageVisuals ? damage.noseBleeding : 0
+			}),
+			!isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					-.2,
+					0,
+					0
+				],
+				rotation: [
+					0,
+					0,
+					Math.PI / 6
+				],
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.04,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: earMaterial,
+					attach: "material"
+				})]
+			}), /* @__PURE__ */ jsxs("mesh", {
+				position: [
+					.2,
+					0,
+					0
+				],
+				rotation: [
+					0,
+					0,
+					-Math.PI / 6
+				],
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.04,
+					8,
+					8
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: earMaterial,
+					attach: "material"
+				})]
+			})] })
+		]
+	});
+};
+//#endregion
+export { Face3D as default };
+
+//# sourceMappingURL=Face3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Face3D.js","names":[],"sources":["../../../../../src/components/shared/three/anatomy/Face3D.tsx"],"sourcesContent":["/**\n * Face3D component with realistic facial features\n *\n * Renders facial features with expressions, eye tracking, and damage visualization:\n * - Eyes with pupils that track opponent\n * - Mouth that opens/closes based on expression\n * - Nose geometry\n * - Damage effects (bruises, swelling, bleeding)\n *\n * @module components/three/Face3D\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\";\nimport {\n  EYE_OPENNESS,\n  MOUTH_OPENNESS,\n  type EyeProps,\n  type Face3DProps,\n  type MouthProps,\n} from \"../../../../types/facial\";\nimport { mixColors } from \"../../../../utils/colorHelpers\";\n\n/**\n * Head position offset from bone center\n * Since Face3D is rendered inside the head bone group,\n * this is a small offset to position the face correctly\n * @korean 머리위치오프셋\n */\nconst HEAD_POSITION_OFFSET = 0.1;\n\n/**\n * Eye component with pupil tracking and swelling\n *\n * Renders eye with adjustable openness, pupil tracking, and swelling effects.\n *\n * @param props - Eye component props\n * @returns Eye 3D mesh group\n *\n * @korean 눈컴포넌트\n */\nconst Eye: React.FC<EyeProps> = ({\n  position,\n  expression,\n  lookDirection,\n  swelling,\n  side,\n}) => {\n  // Calculate eye openness based on expression\n  const eyeOpenness = useMemo(() => {\n    return EYE_OPENNESS[expression];\n  }, [expression]);\n\n  // Calculate pupil offset based on look direction\n  const pupilOffset = useMemo(() => {\n    // Normalize look direction\n    const normalized = lookDirection.clone().normalize();\n\n    // Convert to 2D offset (x, y in eye space)\n    // Limit pupil movement to realistic range\n    const maxOffset = 0.015;\n    const x = normalized.x * maxOffset;\n    const y = -normalized.y * maxOffset * 0.5; // Less vertical movement\n\n    return new THREE.Vector3(x, y, 0.03);\n  }, [lookDirection]);\n\n  // Swelling color (purple bruise)\n  const swellingColor = 0x663366;\n\n  return (\n    <group position={position} name={`eye-${side}`}>\n      {/* Eye white (sclera) */}\n      <mesh scale={[1, eyeOpenness, 1]}>\n        <sphereGeometry args={[0.04, 8, 8]} />\n        <meshPhysicalMaterial\n          color={0xffffff}\n          roughness={0.1}\n          clearcoat={1.0}\n          clearcoatRoughness={0.1}\n        />\n      </mesh>\n\n      {/* Pupil (tracks opponent) */}\n      {eyeOpenness > 0.1 && (\n        <mesh position={pupilOffset}>\n          <sphereGeometry args={[0.015, 8, 8]} />\n          <meshPhysicalMaterial\n            color={0x000000}\n            roughness={0.2}\n            clearcoat={0.8}\n          />\n        </mesh>\n      )}\n\n      {/* Swelling indicator */}\n      {swelling > 0 && (\n        <mesh scale={[1 + swelling * 0.5, 1 + swelling * 0.5, 1]}>\n          <sphereGeometry args={[0.05, 8, 8]} />\n          <meshStandardMaterial\n            color={swellingColor}\n            transparent\n            opacity={swelling * 0.6}\n          />\n        </mesh>\n      )}\n    </group>\n  );\n};\n\n/**\n * Mouth component with expression-based openness and bleeding\n *\n * Renders mouth that opens/closes based on expression.\n *\n * @param props - Mouth component props\n * @returns Mouth 3D mesh group\n *\n * @korean 입컴포넌트\n */\nconst Mouth: React.FC<MouthProps> = ({ position, expression, bleeding }) => {\n  // Calculate mouth openness based on expression\n  const mouthOpenness = useMemo(() => {\n    return MOUTH_OPENNESS[expression];\n  }, [expression]);\n\n  // Blood color\n  const bloodColor = KOREAN_COLORS.ACCENT_RED;\n\n  return (\n    <group position={position} name=\"mouth\">\n      {/* Mouth line */}\n      <mesh scale={[0.08, mouthOpenness * 0.04 + 0.005, 0.01]}>\n        <boxGeometry args={[1, 1, 1]} />\n        <meshPhysicalMaterial color={0x330000} roughness={0.5} />\n      </mesh>\n\n      {/* Blood effect */}\n      {bleeding > 0 && (\n        <>\n          {/* Blood on lip */}\n          <mesh position={[0, -0.01, 0]}>\n            <sphereGeometry args={[0.015, 8, 8]} />\n            <meshPhysicalMaterial\n              color={bloodColor}\n              roughness={0.2}\n              clearcoat={1.0}\n              transparent\n              opacity={bleeding * 0.9}\n            />\n          </mesh>\n\n          {/* Blood drip */}\n          {bleeding > 0.5 && (\n            <mesh position={[0, -0.03, 0]} scale={[0.5, 1, 0.5]}>\n              <cylinderGeometry args={[0.005, 0.008, 0.04, 8]} />\n              <meshPhysicalMaterial\n                color={bloodColor}\n                roughness={0.2}\n                clearcoat={1.0}\n                transparent\n                opacity={bleeding * 0.7}\n              />\n            </mesh>\n          )}\n        </>\n      )}\n    </group>\n  );\n};\n\n/**\n * Nose component\n *\n * Simple geometric nose.\n *\n * @param position - Nose position\n * @param skinColor - Skin tone color\n * @param bleeding - Bleeding intensity (0-1)\n * @returns Nose 3D mesh\n *\n * @korean 코컴포넌트\n */\nconst Nose: React.FC<{\n  position: [number, number, number];\n  skinColor: number;\n  bleeding: number;\n}> = ({ position, skinColor, bleeding }) => {\n  const bloodColor = KOREAN_COLORS.ACCENT_RED;\n\n  // Memoize skin material for nose\n  const noseMaterial = useMemo(\n    () =>\n      new THREE.MeshPhysicalMaterial({\n        color: skinColor,\n        roughness: 0.6,\n        metalness: 0,\n        clearcoat: 0.3,\n        clearcoatRoughness: 0.6,\n        // PBR skin properties\n        transmission: 0,\n        thickness: 0.05,\n        ior: 1.4,\n        sheen: 0.1,\n        sheenRoughness: 0.8,\n        // Subtle emissive\n        emissive: new THREE.Color(0xff6040),\n        emissiveIntensity: 0.02,\n      }),\n    [skinColor]\n  );\n\n  // Dispose nose material on unmount to prevent memory leaks\n  useEffect(() => {\n    return () => {\n      noseMaterial.dispose();\n    };\n  }, [noseMaterial]);\n\n  return (\n    <group position={position} name=\"nose\">\n      {/* Nose */}\n      <mesh rotation={[Math.PI, 0, 0]}>\n        <coneGeometry args={[0.03, 0.06, 8]} />\n        <primitive object={noseMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Blood from nose */}\n      {bleeding > 0 && (\n        <mesh position={[0, -0.03, 0.01]}>\n          <sphereGeometry args={[0.01, 6, 6]} />\n          <meshBasicMaterial\n            color={bloodColor}\n            transparent\n            opacity={bleeding * 0.8}\n          />\n        </mesh>\n      )}\n    </group>\n  );\n};\n\n/**\n * Face3D component\n *\n * Main facial features component with head sphere, eyes, mouth, nose,\n * and damage visualization.\n *\n * @param props - Face3D props\n * @returns Face 3D mesh group\n *\n * @example\n * ```tsx\n * <Face3D\n *   expression={FacialExpression.PAINED}\n *   damage={damageState}\n *   opponentPosition={new THREE.Vector3(5, 2, 0)}\n *   headRotation={new THREE.Euler(0, 0, 0)}\n *   enableEyeTracking={true}\n * />\n * ```\n *\n * @korean 얼굴3D\n */\nexport const Face3D: React.FC<Face3DProps> = ({\n  expression,\n  damage,\n  opponentPosition,\n  headRotation,\n  enableEyeTracking = true,\n  enableDamageVisuals = true,\n  isMobile = false,\n  skinColor = 0xffdbac, // Default skin tone\n}) => {\n  // Calculate eye direction toward opponent\n  const eyeDirection = useMemo(() => {\n    if (!enableEyeTracking) {\n      return new THREE.Vector3(0, 0, 1); // Look forward\n    }\n\n    // Validate opponent position - check for required THREE.Vector3 methods\n    // This is more robust than instanceof check in test environments\n    if (\n      !opponentPosition ||\n      typeof opponentPosition.x !== \"number\" ||\n      typeof opponentPosition.y !== \"number\" ||\n      typeof opponentPosition.z !== \"number\"\n    ) {\n      if (process.env.NODE_ENV !== \"production\") {\n        console.warn(\n          \"Face3D: opponentPosition is not a valid THREE.Vector3; defaulting eye direction forward.\"\n        );\n      }\n      return new THREE.Vector3(0, 0, 1);\n    }\n\n    // Calculate direction from head to opponent using component subtraction\n    // to avoid prototype chain issues in test environments\n    // Use the same offset as the face position\n    const headPos = new THREE.Vector3(0, HEAD_POSITION_OFFSET, 0);\n    const dir = new THREE.Vector3(\n      opponentPosition.x - headPos.x,\n      opponentPosition.y - headPos.y,\n      opponentPosition.z - headPos.z\n    );\n    dir.normalize();\n\n    return dir;\n  }, [opponentPosition, enableEyeTracking]);\n\n  // Calculate overall bruise color intensity\n  const bruiseIntensity = useMemo(() => {\n    if (!enableDamageVisuals) return 0;\n\n    const avgBruise =\n      (damage.leftCheekBruise +\n        damage.rightCheekBruise +\n        damage.foreheadBruise +\n        damage.jawBruise) /\n      4;\n    return avgBruise;\n  }, [damage, enableDamageVisuals]);\n\n  // Adjust head color for bruising using helper function\n  const headColor = useMemo(() => {\n    if (bruiseIntensity === 0) return skinColor;\n\n    // Mix skin color with purple bruise color\n    const bruiseColor = 0x663366;\n    return mixColors(skinColor, bruiseColor, bruiseIntensity * 0.3);\n  }, [skinColor, bruiseIntensity]);\n\n  // NOTE: Damage visuals are currently handled via headColor bruise interpolation.\n  // In a future implementation, this could be replaced with a canvas-based texture.\n  const damageTexture = null;\n\n  // Memoize head material to avoid recreating on every render\n  const headMaterial = useMemo(\n    () =>\n      new THREE.MeshPhysicalMaterial({\n        color: headColor,\n        map: damageTexture,\n        roughness: 0.6,\n        metalness: 0,\n        clearcoat: 0.3,\n        clearcoatRoughness: 0.6,\n        envMapIntensity: 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.15, // Facial skin has more sheen\n        sheenRoughness: 0.7,\n        // Subtle emissive for alive appearance\n        emissive: new THREE.Color(0xff6040),\n        emissiveIntensity: 0.02,\n      }),\n    [headColor, damageTexture]\n  );\n\n  // Memoize ear material to avoid recreating on every render\n  const earMaterial = useMemo(\n    () =>\n      new THREE.MeshPhysicalMaterial({\n        color: headColor,\n        roughness: 0.6,\n        metalness: 0,\n        clearcoat: 0.3,\n        clearcoatRoughness: 0.6,\n        // PBR skin properties\n        transmission: 0,\n        thickness: 0.05,\n        ior: 1.4,\n        sheen: 0.1,\n        sheenRoughness: 0.8,\n        // Subtle emissive\n        emissive: new THREE.Color(0xff6040),\n        emissiveIntensity: 0.02,\n      }),\n    [headColor]\n  );\n\n  // Dispose materials on unmount to prevent memory leaks\n  useEffect(() => {\n    return () => {\n      headMaterial.dispose();\n      earMaterial.dispose();\n    };\n  }, [headMaterial, earMaterial]);\n\n  return (\n    <group\n      position={[0, HEAD_POSITION_OFFSET, 0]}\n      rotation={headRotation}\n      name=\"face3d\"\n    >\n      {/* Head sphere */}\n      <mesh>\n        <sphereGeometry args={[0.2, isMobile ? 12 : 16, isMobile ? 12 : 16]} />\n        <primitive object={headMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Left eye */}\n      <Eye\n        position={[-0.08, 0.05, 0.15]}\n        expression={expression}\n        lookDirection={eyeDirection}\n        swelling={enableDamageVisuals ? damage.leftEyeSwelling : 0}\n        side=\"left\"\n      />\n\n      {/* Right eye */}\n      <Eye\n        position={[0.08, 0.05, 0.15]}\n        expression={expression}\n        lookDirection={eyeDirection}\n        swelling={enableDamageVisuals ? damage.rightEyeSwelling : 0}\n        side=\"right\"\n      />\n\n      {/* Mouth */}\n      <Mouth\n        position={[0, -0.05, 0.15]}\n        expression={expression}\n        bleeding={enableDamageVisuals ? damage.mouthBleeding : 0}\n      />\n\n      {/* Nose */}\n      <Nose\n        position={[0, 0.02, 0.18]}\n        skinColor={skinColor}\n        bleeding={enableDamageVisuals ? damage.noseBleeding : 0}\n      />\n\n      {/* Ears (simple geometric shapes) */}\n      {!isMobile && (\n        <>\n          {/* Left ear */}\n          <mesh position={[-0.2, 0, 0]} rotation={[0, 0, Math.PI / 6]}>\n            <sphereGeometry args={[0.04, 8, 8]} />\n            <primitive object={earMaterial} attach=\"material\" />\n          </mesh>\n\n          {/* Right ear */}\n          <mesh position={[0.2, 0, 0]} rotation={[0, 0, -Math.PI / 6]}>\n            <sphereGeometry args={[0.04, 8, 8]} />\n            <primitive object={earMaterial} attach=\"material\" />\n          </mesh>\n        </>\n      )}\n    </group>\n  );\n};\n\nexport default Face3D;\n"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+/**
+ * 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컴포넌트
+ */
+import React from "react";
+/**
+ * Props for Foot3D component
+ *
+ * @public
+ * @korean 발3D속성
+ */
+export interface Foot3DProps {
+    /**
+     * Foot side (left or right)
+     * @korean 발쪽
+     */
+    readonly side: "left" | "right";
+    /**
+     * Base skin color
+     * @korean 피부색
+     */
+    readonly skinColor?: number;
+    /**
+     * Scale multiplier (based on archetype physical attributes)
+     * @korean 크기배율
+     */
+    readonly scale?: number;
+    /**
+     * Whether foot is highlighted (e.g., during kicks)
+     * @korean 표시여부
+     */
+    readonly isHighlighted?: boolean;
+}
+/**
+ * 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컴포넌트
+ */
+export declare const Foot3D: React.FC<Foot3DProps>;
+export default Foot3D;
+//# sourceMappingURL=Foot3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Foot3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/Foot3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwJxC,CAAC;AAEF,eAAe,MAAM,CAAC"}