Three.js · 14 재질·로딩·선택

단계: 조명·재질·모델 선택 · 편집 가능한 예제 · 저장 ID: threejs-02

목표와 학습 후 역량

선수 개념: NDC 입력, 교차 결과. 13단위의 결과 파일과 관찰 기록을 준비하세요.

GLTFLoader의 비동기 결과는 요청 순서와 다르게 도착할 수 있습니다. 로딩·성공·오류 상태를 UI에서 구분해야 합니다.

공유 재질을 직접 바꾸면 여러 객체가 함께 강조될 수 있습니다. 별도 테두리나 재질 복제로 선택 대상을 분리합니다.

기존 내장 예제는 출발점만 제공합니다. 확장 요구사항 전체가 구현된 예제가 아니며 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. three와 addons를 같은 설치 버전으로 고정하고 기록하세요.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

외부 실습 프로젝트의 day-14.js와 index.html을 준비하세요. 기존 threejs-02를 읽고 로컬 glb 또는 기본 도형 fallback과 오류 UI를 구현하세요.
선택 레이어를 설정해 raycast하고 이전 대상의 강조를 복구한 뒤 새 대상만 표시하세요.
입력 조건 유효 로컬 glb에서 출력을 저장한 뒤 없는 경로 조건으로 다시 실행하세요. 예상: 오류가 표시되어도 기본 도형과 UI는 유지됩니다. 실제 화면·로그와 대조하고 day-14-notes.md에 실제 결과와 차이의 원인을 남기세요.

변수	기준 조건	바꿀 조건	예상할 변화·검증 가설
모델 URL	유효 로컬 glb	없는 경로	오류가 표시되어도 기본 도형과 UI는 유지됩니다

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.