--- id: frontend-three-r3f title: Three.js / React Three Fiber — 3D 웹 category: Coding status: draft source_trust_level: B verification_status: conceptual created_at: 2026-05-09 updated_at: 2026-05-09 tags: [frontend, 3d, threejs, r3f, vibe-coding] tech_stack: { language: "TS / React", applicable_to: ["Frontend"] } applied_in: [] aliases: [Three.js, React Three Fiber, drei, Rapier, Spline, WebGL] --- # Three.js / R3F (React Three Fiber) > Web 3D 표준. **Three.js (vanilla) / React Three Fiber (React)** + **drei (helpers)** + **Rapier (physics)**. WebGL → WebGPU 미래. ## 📖 핵심 개념 - Scene: 3D 공간. - Mesh: geometry + material. - Camera: 시점. - Light: 조명. - Renderer: WebGL / WebGPU. ## 💻 코드 패턴 ### 기본 R3F ```tsx import { Canvas, useFrame } from '@react-three/fiber'; import { OrbitControls, Box } from '@react-three/drei'; import { useRef } from 'react'; function RotatingBox() { const ref = useRef(null); useFrame((_, delta) => { ref.current!.rotation.y += delta; }); return ( ); } export function Scene() { return (

); } ``` ### drei (helpers) ```tsx import { OrbitControls, Environment, ContactShadows, Float, Text, Html, useGLTF, useTexture, PerspectiveCamera, Stage, } from '@react-three/drei';

``` ### GLTF 모델 로드 ```tsx function Model() { const { scene, animations } = useGLTF('/model.glb'); return ; } // Optimization — useGLTF preload useGLTF.preload('/model.glb'); ``` → DRACO compression 자동 (drei 가). ### Animation (모델) ```tsx import { useAnimations } from '@react-three/drei'; function AnimatedModel() { const ref = useRef(null); const { scene, animations } = useGLTF('/dancer.glb'); const { actions } = useAnimations(animations, ref); useEffect(() => { actions.idle?.play(); }, []); return ; } ``` ### Physics (Rapier) ```tsx import { Physics, RigidBody } from '@react-three/rapier';

``` ### Material ```tsx // MeshPhysicalMaterial — 더 사실적 ``` ### Shader (custom GLSL) ```glsl // vertex.glsl varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } // fragment.glsl varying vec2 vUv; uniform float uTime; void main() { vec3 color = vec3(sin(vUv.x + uTime), sin(vUv.y + uTime), 1.0); gl_FragColor = vec4(color, 1.0); } ``` ```tsx ``` ### Post-processing ```tsx import { EffectComposer, Bloom, ChromaticAberration } from '@react-three/postprocessing';

``` ### Performance ```tsx // Instances (수천 mesh) import { Instances, Instance } from '@react-three/drei'; {data.map((d, i) => ( ))} ``` ```tsx // LOD (Level of Detail) import { Detailed } from '@react-three/drei'; ``` ```tsx // Frustum culling 자동 // Manual: ref.current.frustumCulled = true (default) // Shadows — 비싸. 작은 set 만 ``` ### Mobile / WebGL fallback ```tsx // 작은 화면 / GPU = quality down const isMobile = useMediaQuery('(max-width: 768px)');