React/React Three Fiber

[RTF] 6. 외부에서 Model 가져오기 Models and Textures

개발자 뭄뭄 2023. 3. 25. 18:31
반응형

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.

Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting started
Hey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The next parts will keep on coming one day after the other. 👨‍💻 Source code: https://github.com/captain-woof/threejs-tutorial-2022 ------------------------------------------- DOCUMENTATIONS 📖 Three.js: https://threejs.org/docs/ 📖 React-Three/Fiber: https://docs.pmnd.rs/react-three-fiber/getting-started/introduction ------------------------------------------- 👋 DROP ME A LINE Twitter: https://twitter.com/realCaptainWoof Github: https://github.com/captain-woof Linkedin: https://linkedin.com/in/sohail-saha
https://www.youtube.com/watch?v=y5CAuAZ7kKM&list=PLIRTsuB0iPJvxaYyg8MOrjffPPcYnccL0&index=1

1. Source 얻기

1. sketchfab

https://sketchfab.com/feed

sketchfab 같은 사이트를 이용해서 model을 다운로드 받습니다. 영상에서는 가급적이면 파일형식을 glTF 형식으로 다운받으라고 안내한다.

영상과 예제는 이 링크에서 다운받을 수 있는 자동차 모델을 사용한다.

2. extension

VS Code에서 glTF를 볼 수 있는 extension을 설치한다. 사진과 같은걸로 설치하면 된다.

3. textures를 모아둔 사이트

3dtextures.me에서 다양한 texture를 사용할 수 있다.

2. Texture 불러오기

Texture를 불러오는(Load) 방법은 많지만, 그 중 간단한 방법은 react three drei에 있는 useTexture를 이용하는 것이다.

3. Model 불러오기

먼저 파일 용량을 줄이기 위해서 glTF 파일을 glb파일로 변환해야 한다.

1. pipeline tool 설치하기

git bash에서 $ npm install -g gltf-pipeline 명령어를 이용해서 global에 gltf-pipeline을 설치한다.

2. gltf 파일을 glb파일로 변환하기

gltf 파일이 위치한 경로에서 git bash를 실행한다.

$ gltf-pipeline -i <기존 파일이름>.gltf -o <새로운 파일이름>.glb

영상의 예시대로 하려면 $ gltf-pipeline -i scene.gltf -o scene.glb --draco.compressionLevel 10 -d -b 라는 명령어를 입력하면 된다.

대략 70MB(license파일을 제외한 세파일의 크기)에서 58MB로 약 12MB가 줄어들었음을 확인할 수 있다.

3. glb 파일을 component로 변환하기

마찬가지로 $ npm install -g gltfjsx를 사용해서 package를 설치하는 것으로 시작한다.

$ gltfjsx model.glb -t

-t를 없애면 그냥 jsx 파일로 만들어준다. 꼭꼭 -t 붙여서 .tsx로 만들기

$ gltfjsx scene.glb -T

명령어는 web 용 파일을 만들어준다는데, glb 파일을 더 작게 압축(compress) 해준다.

.tsx 파일안의 useGLTF의 경로가 .glb 파일이 위치한 경로와 일치하는지 한번 더 확인해준다.

const { nodes, materials } = useGLTF(
    '/models/car/scene-transformed.glb'
  ) as GLTFResult

이제 컴포넌트 형태로 glb 파일을 사용할 수 있다.


Uploaded by N2T

반응형