Colin's Blog
[javascript] Universal Viewer를 통한 3D 모델 뷰어 기능

3D 모델을 웹에서 보여주기 위해 Universal Viewer 라이브러리를 사용할 수 있습니다. Universal Viewer는 다양한 형식의 3D 모델을 지원하며, 간편하게 웹 페이지에 통합할 수 있는 기능을 제공합니다.

Universal Viewer 라이브러리 설치

먼저, Universal Viewer 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 Universal Viewer를 설치할 수 있습니다.

npm install universal-viewer

3D 모델 뷰어 설정

Universal Viewer를 이용하여 3D 모델을 보여주기 위해서는 몇 가지 설정을 해주어야 합니다. 아래의 코드는 Universal Viewer를 초기화하고 3D 모델을 로드하는 예제입니다.

import { Viewer } from 'universal-viewer';

const viewer = new Viewer({
  container: document.getElementById('viewer'),
  models: [
    { type: 'obj', url: 'path/to/model.obj' },
    { type: 'mtl', url: 'path/to/model.mtl' },
    { type: 'texture', url: 'path/to/texture.png' }
  ]
});

viewer.load();

위의 코드에서 container 속성에는 3D 모델을 렌더링할 HTML 요소를 지정하고, models 속성에는 로드할 3D 모델의 경로를 지정합니다. 이 예제에서는 .obj와 .mtl 파일로 3D 모델을 로드하였으며, 텍스처는 .png 파일로 지정하였습니다.

3D 모델 뷰어 컨트롤

Universal Viewer를 통해 로드한 3D 모델은 다양한 컨트롤을 통해 조작할 수 있습니다. 아래의 코드는 3D 모델을 회전하고 확대/축소하는 컨트롤을 추가하는 예제입니다.

import { rotateControl, zoomControl } from 'universal-viewer/plugins';

viewer.use(rotateControl());
viewer.use(zoomControl());

위의 코드에서 rotateControl 함수는 3D 모델을 회전시키는 컨트롤을 추가하고, zoomControl 함수는 3D 모델을 확대/축소하는 컨트롤을 추가합니다.

마무리

Universal Viewer를 사용하면 웹 페이지에서 3D 모델을 간편하게 보여줄 수 있습니다. Universal Viewer의 다양한 기능과 컨트롤을 활용하여 사용자들에게 더 편리한 3D 모델 뷰어를 제공할 수 있습니다.

참고 문서

© 2018 Colin. All rights reserved.