WebGL 썸네일형 리스트형 React에서 WebGL 직접 구현하여 인터랙티브 그래픽 만들기 React에서 WebGL을 직접 다루면 의존성 없이 가볍고 빠른 인터랙티브 그래픽을 만들 수 있습니다. 핵심은 React 렌더 트리를 최대한 건드리지 않고, WebGL 상태와 애니메이션 루프를 useRef와 useEffect로 제어하는 것입니다.1. 아키텍처 개요React는 캔버스 DOM만 관리하고, 실제 렌더링은 WebGL이 담당합니다. React state는 최소화하고, WebGL 컨텍스트, 셰이더, 버퍼, requestAnimationFrame 루프는 ref에 보관합니다. 리사이즈, 마우스 이벤트는 캔버스에 직접 바인딩합니다.2. 최소 예제: 풀스크린 트라이앵글 + 마우스 인터랙션import { useEffect, useRef } from 'react';function InteractiveGL() .. 더보기 React와 Three.js를 이용한 3D 객체 렌더링 React와 Three.js를 결합하면 웹에서 상호작용 가능한 3D 경험을 효율적으로 구현할 수 있습니다. 실무에서는 @react-three/fiber(이하 R3F)를 사용해 React 컴포넌트처럼 3D 씬을 선언적으로 구성하는 방식이 유지보수에 유리합니다. 아래는 빠르게 3D 박스와 GLTF 모델을 렌더링하고, 상호작용과 성능 최적화를 적용하는 실전 가이드입니다.1. 개요목표는 다음과 같습니다: Canvas로 씬 생성, 박스 메쉬 렌더링 및 회전 애니메이션, OrbitControls로 카메라 조작, GLTF 모델 로딩, 기본적인 이벤트 처리와 성능 최적화입니다.2. 설치R3F와 유틸을 설치합니다. three는 필수이며, drei는 컨트롤과 로더 등 편의 컴포넌트를 제공합니다.// Vite 또는 CRA .. 더보기 이전 1 다음