Chapter 9의 커스텀 모델 로드하기에서 오류가 뜹니다.

Question

안녕하세요 1분코딩님 강의에서처럼 import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';   // gltf loader const loader= new THREE.GLTFLoader; GLTFLoader.load( '/models/ilbuni.gltf', gltf => { console.log(gltf) } );   이렇게 입력했는데, localhost:8080에서 export 'GLTFLoader' (imported as 'THREE') was not found in 'three' 와 같은 오류가 뜹니다.   three.js의 폴더는 평소에 잘 실행 된 것 처럼 위치해 있는 거 같은데, 무엇이 잘못되었는지를 모르겠습니다.

1분코딩 · Answer

답변이 늦었네요~~
작성하신 코드가
const loader= new THREE.GLTFLoader;
이렇게 되어있는데,
const loader= new THREE.GLTFLoader();
이렇게 뒤에 ()를 붙여서 GLTFLoader 생성자 함수를 호출해서 로더 객체를 생성해야 합니다.
그러면 로더 객체가 loader 상수에 들어올테니 loader 상수를 이용해서
loader.load( ....
이런 식으로 load 메서드를 호출하면 되는거지요.
다시 써보면

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. 에러 메시지를 보면 GLTFLoader가 찾을 수 없다는 메시지가 나온 것 같아요. 혹시 three.js 라이브러리의 경로나 파일명이 잘못 입력되어 있을 수도 있습니다. json 파일이나 이미지 파일을 로드할 때 경로 문제로 오류가 발생하는 경우가 있는데요, 이번에도 그럴 수도 있으니 경로를 한번 더 확인해 보시겠어요? 그리고, import 구문에서 GLTFLoader를 불러오지 않고, new THREE.GLTFLoader(); 로 바로 접근하는 방법도 있습니다. 이 방법으로도 한번 시도해보시면 좋을 것 같아요. 해결되지 않는다면, three.js 라이브러리의 버전 문제일 수도 있으니, 최신 버전으로 업데이트해 보시는 것도 좋을 것 같습니다. 도움이 되었길 바랍니다.