몇 분 안에 모든 사이트에 AR 및 3D 모델 추가

3D 모델을 추가하는 것은 매우 간단하며 단 몇 분 만에 모든 프로젝트에 추가할 수 있습니다. 이것은 3D 모델이 있는 경우에 제공됩니다. 또한 몇 가지 추가 단계만 거치면 모바일 장치에서 AR을 활용할 수도 있습니다. 아래에서 바로 실행하는 방법을 설명하겠습니다.

Google에서 만든 멋진 요소 중 하나는 https://modelviewer.dev 에서 찾을 수 있는 모델 뷰어입니다. Three.js를 기반으로 하며 모든 페이지에 3D WebGL 모델을 쉽게 추가할 수 있습니다. 지침이 사이트에 있지만.

나는 그것에 대한 나의 경험에 대한 간략한 개요를 제공하고 내가 한 곳에 갇히지 않도록 몇 가지 지침을 제공하기를 바랍니다.

다음을 사용하여 헤더의 CDN과 함께 가져올 수 있습니다.

<script
  type="module"
  src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

또는 다음과 같이 NPM 패키지를 사용하여 수행할 수 있습니다.

npm i @google/model-viewer

그런 다음 다음을 통해 가져올 수 있습니다.

import '@google/model-viewer';

프로젝트가 아직 진행 중이고 새로운 기능이 꽤 자주 추가되고 있으므로 Google은 CDN을 사용할 것을 권장합니다. 항상 최신 버전이 실행되도록 합니다.

가져오기와 관련된 한 가지 문제는 Next.js와 같은 SSR 프레임워크를 사용할 때 모델 뷰어 구성 요소에 대해 동적 가져오기를 사용해야 할 수도 있다는 것입니다. 이러한 유형의 프레임워크에 대해 SSR false로 설정해야 합니다.

이 모든 것을 가져오면 model-viewer 태그를 추가하고 계속 진행할 수 있습니다.

  <model-viewer
    src={../Link/To/Model.gltf}
    ios-src={../Link/To/Model.usdz}
    alt='model name'
    ar
    loading='lazy'
    camera-controls
    poster={../Link/To/Image.png}
    autoplay>
  </model-viewer>

이 경우 애니메이션을 자동으로 시작하는 기본 애니메이션 모델이 됩니다. 자세한 설명은 https://modelviewer.dev 문서를 참조하십시오.

로컬 모델이나 S3와 같은 호스트에서 호스팅되는 모델을 사용할 수 있습니다. 내가 겪은 한 가지 문제는 Firebase 저장소에서 파일을 사용하는 것이었습니다. 때때로 CORS 문제가 있으며 GitHub의 공개 문제입니다.

이것이 작동하려면 GLTF 또는 GLB 모델이 필요합니다. 다른 모델 유형이 있는 경우 올바른 모델 유형을 작동시키기 위해 온라인에서 찾을 수 있는 변환기가 있습니다.

이렇게 하면 Android의 Scene Viewer에서 열리므로 Android에서 AR을 사용할 수도 있습니다. iOS에서 AR을 사용하려면 AR 훑어보기를 사용하기 위해 USDZ라는 두 번째 모델 유형도 필요합니다.

또한 이 유형을 사용하기 위한 변환기를 찾아야 합니다. Apple에는 무료로 다운로드할 수 있는 프로그램이 있으며 iOS 개발자 계정이 있는 경우 이를 수행합니다. 그것은 현실 변환기라고합니다.

AR을 사용하지 않는 경우 위 코드에서 ar 및 ios-src 속성을 무시할 수 있습니다.

설치하고 실행하는 것은 정말 쉽습니다. 어려운 부분은 귀하의 사이트에 들어갈 멋진 모델을 만드는 것입니다. 그 부분은 여러분에게 맡기겠습니다.