React 앱에서 three.js를 사용하여 3D 모델을 렌더링하는 방법

Unsplash의 Mehmet Turgut Kirkgoz의 사진

YouTube를 검색하는 동안 깔끔한 포트폴리오 페이지를 구축하는 방법에 대한 상당히 간결한 자습서인 다음을 발견했습니다. 그러나 사용된 기술 중 하나는 카메라 컨트롤이 있는 멋진 3D 모델을 렌더링하는 three.js였습니다!

기술이 어떻게 작동하는지 배우고 동일한 기술 스택으로 독립 실행형 샌드박스를 빠르게 만들고 싶었습니다. 코딩하는 과정과 작동 원리를 알려드릴게요!

설정

npm i three

먼저 필요한 패키지를 설치해 보겠습니다.

그리고 그것을 사용하고자 하는 파일로 임포트합시다:

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

로더 기능

three.js 라이브러리에는 glTF 2.0 리소스(GL 전송 형식)용 로더가 있습니다. 이것은 모델을 앱에 로드하는 데 사용할 주요 기능입니다! 이것은 비동기 프로세스이므로 약속으로 래핑되어야 합니다. 이것을 나누자:



이 함수는 장면을 받아들입니다. p를 설정하는 방법과 모델이 렌더링될 위치입니다. 이를 통해 내부 개체, 카메라 컨트롤 및 다양한 조명 효과를 배치하는 방법을 결정할 수 있습니다. 보조 매개변수는 모델의 리소스인 glbPath이며 나중에 자세히 설명하고 마지막으로 모든 보조 옵션입니다.

GLTFLoader의 새 인스턴스를 만들고 내부 load 함수로 모든 부하 상수를 설정합니다. 이 경우 Traverse는 castShadow와 receiveShadow의 값을 유지하기 위한 콜백 함수입니다.

반응 구성 요소

다음으로 컴포넌트를 생성해 보겠습니다. useRef 후크에 연결된 참조만 있으면 됩니다.



기본적인 상태 관리에 대해 알아보자. useState 후크를 사용할 수 있도록 앱에서 실시간으로 렌더러를 빌드해야 합니다. 이것은 실시간이므로 초기 마운트 후에 useEffect 후크를 사용하여 빌드합니다.



렌더러가 이미 존재하지 않는지 확인하고 구성 요소가 ref와 함께 올바르게 마운트되었는지 확인해야 합니다. 이제 렌더러 구축의 핵심 세부 사항에 들어갈 수 있습니다.

렌더러

우리가 사용할 렌더는 WebGLRenderer 입니다. 이것을 만들고 기본값을 설정합시다(모두 useEffect 내부 if 내부):



여기에서 언급할 정도로 미친 것은 없습니다. 설정한 모든 속성에 대한 자세한 정보는 문서를 확인하는 것이 좋습니다.

컨트롤 및 장면

다음은 매우 간단하며 미친 구성이 필요하지 않습니다.



임의의 크기 조정 및 카메라 위치 지정을 추가했습니다. 원한다면 이것으로 놀 수 있습니다! 그리고 모델 자체를 볼 수 있는 조명도 있습니다.

마지막으로 모델에 애니메이션을 적용하고 컨트롤과 올바르게 작동하는지 확인할 수 있습니다!



회전을 돕고 필요할 때 컨트롤을 업데이트하는 몇 가지 수학. 우리는 모든 속성과 함께 렌더러의 렌더 함수를 호출합니다.

렌더링 부분의 마지막 단계는 맨 처음에 만든 함수를 호출하는 것입니다!



setLoading 상태를 눈치채셨을 것입니다. 로드 기능이 비동기식이므로 모델이 렌더링되는 지연을 고려해야 합니다. 다른 주목할만한 언급은 모델을 올바르게 로드한 후 애니메이션 함수를 호출한다는 것입니다.

사이드 노트

다음 사이트에서 모델을 무료로 얻었습니다.

jeilocreativedesignworld의 "Dinosaur"(https://skfb.ly/6ZBXA )는 Creative Commons Attribution( http://creativecommons.org/licenses/by/4.0/ )에 따라 사용이 허가되었습니다.

결론

그리고 그게 다야! 다음은 모든 것이 연결된 전체 코드와 최종 결과입니다. 모든 모델을 사용할 수 있습니다. 나는 다른 사람들이 그것을 실험하고 가치를 가지고 놀기를 권장합니다!

https://codesandbox.io/embed/react-three-render3d-qobqy?fontsize=14&hidenavigation=1&theme=dark

Relatable Code에서 더 많은 콘텐츠

2022년 2월 6일 https://relatablecode.com에 원래 게시되었습니다.