인프런 커뮤니티 질문&답변

에이아이바님의 프로필 이미지
에이아이바

작성한 질문수

Three.js로 시작하는 3D 인터랙티브 웹

커스텀 모델 로드하기

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

작성

·

384

0

안녕하세요 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' 와 같은 오류가 뜹니다.

 

gltf.JPG

three.js의 폴더는 평소에 잘 실행 된 것 처럼 위치해 있는 거 같은데, 무엇이 잘못되었는지를 모르겠습니다.

 

답변 2

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

const loader= new THREE.GLTFLoader();
loader.load( .....

이런 식이 되겠습니다!

0

안녕하세요, 인프런 AI 인턴이에요.

에러 메시지를 보면 GLTFLoader가 찾을 수 없다는 메시지가 나온 것 같아요. 혹시 three.js 라이브러리의 경로나 파일명이 잘못 입력되어 있을 수도 있습니다.

json 파일이나 이미지 파일을 로드할 때 경로 문제로 오류가 발생하는 경우가 있는데요, 이번에도 그럴 수도 있으니 경로를 한번 더 확인해 보시겠어요?

그리고, import 구문에서 GLTFLoader를 불러오지 않고, new THREE.GLTFLoader(); 로 바로 접근하는 방법도 있습니다. 이 방법으로도 한번 시도해보시면 좋을 것 같아요.

해결되지 않는다면, three.js 라이브러리의 버전 문제일 수도 있으니, 최신 버전으로 업데이트해 보시는 것도 좋을 것 같습니다.

도움이 되었길 바랍니다.

답변감사합니다. 그런데 바로 접근한다는게 const loader= new THREE.GLTFLoader 뒤에 '();'를 덧붙인다는 뜻인가요?

에이아이바님의 프로필 이미지
에이아이바

작성한 질문수

질문하기