Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 4x 136x 58x 136x 58x 136x 58x 136x 136x 136x 136x 136x 136x 136x 58x 58x 58x 58x 136x | /**
* KoreanSignage3D - Three.js 3D Korean text signage with emissive glow
*
* Renders Korean text signs with neon emissive effects positioned around the arena
* Creates an immersive cyberpunk Korean martial arts atmosphere
*
* Note: Uses drei's Text component with default Inter font which supports Korean
* The `font` prop requires a font FILE URL (.ttf/.woff), not a CSS font-family string
*/
import { Text } from "@react-three/drei";
import React, { Suspense, useEffect, useMemo } from "react";
import * as THREE from "three";
import { KOREAN_COLORS } from "../../../../types/constants";
/**
* Props for the KoreanSignage3D component.
*/
export interface KoreanSignage3DProps {
/** Scale factor for signage size (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */
readonly scale?: number;
}
/**
* KoreanSignage3D Component
* Creates Korean text signs with neon emissive glow around the combat arena
*
* Signs:
* - "전투" (Combat) - Left wall, gold accent
* - "흑괘" (Black Trigram) - Right wall, cyan accent
* - "급소격" (Vital Point Strike) - Back wall, red accent
*/
export const KoreanSignage3D: React.FC<KoreanSignage3DProps> = ({
scale = 1.0,
}) => {
// Emissive material for glowing neon text
// Using MeshBasicMaterial with toneMapped: false for bloom compatibility
const goldNeonMaterial = useMemo(
() =>
new THREE.MeshBasicMaterial({
color: KOREAN_COLORS.ACCENT_GOLD,
toneMapped: false, // Prevent tone mapping for bloom effect
}),
[],
);
const cyanNeonMaterial = useMemo(
() =>
new THREE.MeshBasicMaterial({
color: KOREAN_COLORS.PRIMARY_CYAN,
toneMapped: false,
}),
[],
);
const redNeonMaterial = useMemo(
() =>
new THREE.MeshBasicMaterial({
color: KOREAN_COLORS.KOREAN_RED,
toneMapped: false,
}),
[],
);
// Scale-aware positioning and sizing
const leftWallX = -12 * scale;
const rightWallX = 12 * scale;
const backWallZ = -14 * scale;
const signHeight = 5 * scale;
const fontSize = 1.5 * scale;
const outlineWidth = 0.05 * scale;
// Cleanup materials on unmount
useEffect(() => {
return () => {
goldNeonMaterial.dispose();
cyanNeonMaterial.dispose();
redNeonMaterial.dispose();
};
}, [goldNeonMaterial, cyanNeonMaterial, redNeonMaterial]);
return (
<Suspense fallback={null}>
<group>
{/* "전투" (Combat) sign - left wall */}
{/* Note: material prop takes precedence over color prop in Text component */}
{/* Note: Omitting font prop uses default Inter font which supports Korean */}
<Text
position={[leftWallX, signHeight, 0]}
rotation={[0, Math.PI / 2, 0]}
fontSize={fontSize}
outlineColor={KOREAN_COLORS.PRIMARY_CYAN}
outlineWidth={outlineWidth}
material={goldNeonMaterial}
anchorX="center"
anchorY="middle"
>
전투
</Text>
{/* "흑괘" (Black Trigram) sign - right wall */}
<Text
position={[rightWallX, signHeight, 0]}
rotation={[0, -Math.PI / 2, 0]}
fontSize={fontSize}
outlineColor={KOREAN_COLORS.ACCENT_GOLD}
outlineWidth={outlineWidth}
material={cyanNeonMaterial}
anchorX="center"
anchorY="middle"
>
흑괘
</Text>
{/* "급소격" (Vital Point Strike) sign - back wall */}
<Text
position={[0, signHeight, backWallZ]}
rotation={[0, 0, 0]}
fontSize={fontSize * 0.8} // Slightly smaller for back wall
outlineColor={KOREAN_COLORS.ACCENT_GOLD}
outlineWidth={outlineWidth}
material={redNeonMaterial}
anchorX="center"
anchorY="middle"
>
급소격
</Text>
</group>
</Suspense>
);
};
export default KoreanSignage3D;
|