Frontory

React Three Fiber

Frontory 기술 지도

그래픽스 · 4단계 · 28개 학습 단위

시리즈 목표

Three.js 장면을 React 컴포넌트로 구성하고 프레임 값·선택 상태·공유 자원의 수명을 나누어 관리한다.

선수 지식

React effect·ref, Three.js

실습 방식과 제공 범위

학습 단위는 날짜가 아닙니다. 설명과 과제를 읽고, 완료 조건을 확인한 뒤 다음 단위로 이동하세요. 각 단위의 예제를 출발점으로 삼아 변수를 바꾸고 결과를 관찰합니다. 내장 실행 예제와 별도 환경이 필요한 과제를 구분해서 표시합니다. 예제를 여는 것만으로 학습을 완료한 것으로 처리하지 않습니다.

기존 단위 ID와 필기는 유지됩니다. 기존 01·02·03 예제는 확장된 학습 순서의 1·14·28번째에 연결되므로 주소의 숫자와 화면의 학습 순서가 다를 수 있습니다.

학습 경로

1단계 · 선언적 장면과 프레임 좌표

2단계 · 3D 입력과 UI 상태

3단계 · 모델·공유 자원·인스턴싱

4단계 · demand 정책과 성능 검증

통합 프로젝트와 제출물

선택과 필기가 있는 3D 학습 장면, 개별 mesh와 instancing 비교, demand 동작 검증 및 자원 소유권 보고서.

구현 코드와 실행 방법, 기준 조건과 변경 조건의 기록, 실패 사례와 복구 방법을 함께 남기세요. 측정하지 않은 성능과 수행하지 않은 테스트는 결과로 기재하지 않습니다.

공식 참고