개발자

three.js 3d웹 만들고 있습니다! 조언 구해요ㅠㅜ

2024년 01월 05일조회 218

안녕하세요! 3d로 공간 구현한 웹 사이트가 너모 만들어보고 싶어 맨땅에 헤딩 중인 코린이입니다ㅜㅠ three.js 써보겠다고 여기저기 검색하며 이것저것 해보고 있는데요! 모델링한 jltf파일을 쓰고 싶은데 라이브러리 import가 안되네요ㅠㅜ 여기저기서 검색해 방법을 찾아봐도 안돼서 조언 구합니다! 혹시 three.js 써보신 고수님 안계시나요ㅠㅜ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

영빈님의 프로필 사진

GLTF파일을 말하시는건가요? 코드가 어떤지는 모르지만 GLTF의 경우 GLTFLoader이 있습니다. https://threejs.org/docs/index.html?q=loader#examples/en/loaders/GLTFLoader 공식 문서이며 import { GLTFLoader } from '~' 이런식으로 시작하는 import를 상단에 입력하시고 아래의 코드로 해보세요 어떻게 에러가 나는지 몰라서 따로 더 답변을 못 할 것 같습니다.

1const loader = new GLTFLoader();
2
3loader.load(
4	// resource URL
5	'models/gltf/duck/duck.gltf',
6	// called when the resource is loaded
7	function ( gltf ) {
8
9		scene.add( gltf.scene );
10
11		gltf.animations; // Array<THREE.AnimationClip>
12		gltf.scene; // THREE.Group
13		gltf.scenes; // Array<THREE.Group>
14		gltf.cameras; // Array<THREE.Camera>
15		gltf.asset; // Object
16
17	},
18	// called while loading is progressing
19	function ( xhr ) {
20
21		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
22
23	},
24	// called when loading has errors
25	function ( error ) {
26
27		console.log( 'An error happened' );
28
29	}
30);
허형준님의 프로필 사진

ThreeJS 문서는 정리가 잘 되어있는 편입니다. 저도 가끔 메서드 까먹을때 문서 찾아보고요. 공부하실때 막히는 부분이 있다면 문서를 자주 찾아보시시는걸 추천합니다. npm으로 ThreeJS를 다루신다면 GLTFLoader는 아래와 같이 임포트해주셔야 합니다.

1import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!