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 | 1x 1x 1x | /**
* HelloThreeJS - Test component for Three.js infrastructure
*
* This component verifies that Three.js, @react-three/fiber, and @react-three/drei
* are properly installed and configured. It renders a simple 3D scene with:
* - A pink rotating cube (Korean accent color)
* - Orbit controls for interaction
* - Ambient and directional lighting
*
* @module components/test
*/
import { OrbitControls } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";
import React, { useRef } from "react";
import type { Mesh } from "three";
import { KOREAN_COLORS } from "../../types/constants";
/**
* Props for the RotatingBox component
*/
interface RotatingBoxProps {
readonly color: number;
}
/**
* A rotating 3D box component that demonstrates Three.js animation
*/
const RotatingBox: React.FC<RotatingBoxProps> = ({ color }) => {
const meshRef = useRef<Mesh>(null);
// Use @react-three/fiber's useFrame hook for animation
// This properly manages the animation loop lifecycle
useFrame(() => {
if (meshRef.current) {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
}
});
return (
<mesh ref={meshRef} data-testid="rotating-cube">
<boxGeometry args={[2, 2, 2]} />
<meshStandardMaterial color={color} />
</mesh>
);
};
/**
* Props for the HelloThreeJS component
*/
export interface HelloThreeJSProps {
readonly width?: number;
readonly height?: number;
readonly color?: number;
}
/**
* HelloThreeJS - Minimal test component for Three.js infrastructure
*
* Renders a simple 3D scene to verify:
* - @react-three/fiber Canvas integration
* - @react-three/drei OrbitControls functionality
* - Three.js core rendering
* - Korean theming with KOREAN_COLORS
*
* @example
* ```tsx
* <HelloThreeJS width={800} height={600} color={KOREAN_COLORS.ACCENT_GOLD} />
* ```
*/
export const HelloThreeJS: React.FC<HelloThreeJSProps> = ({
width = 800,
height = 600,
color = KOREAN_COLORS.PRIMARY_CYAN,
}) => {
return (
<div
style={{
width: `${width}px`,
height: `${height}px`,
backgroundColor: "#1a1a1a",
}}
data-testid="hello-threejs-container"
>
<Canvas
camera={{ position: [0, 0, 5], fov: 75 }}
data-testid="threejs-canvas"
>
{/* Ambient light for overall scene illumination */}
<ambientLight intensity={0.5} />
{/* Directional light for depth and shadows */}
<directionalLight position={[10, 10, 5]} intensity={1} />
{/* Rotating cube with Korean theming */}
<RotatingBox color={color} />
{/* Interactive orbit controls */}
<OrbitControls enableDamping dampingFactor={0.05} />
</Canvas>
</div>
);
};
HelloThreeJS.displayName = "HelloThreeJS";
|