개시하다

안녕하세요, 저는 한가한 엔지니어입니다.
블로거 운영 중이니 가능하면 봐주세요.
vue.js로 3D 모델을 간단하게 보여주고 싶어서 해봤어요vue-3d-model.

견본

Vue.프로젝트 만들기

vue-cli 명령을 사용하여 기본 프로젝트를 만듭니다.

vue init webpack my-project
cd my-project
npm install

3D 모델 가져오기

이하 사이트의~.obj 파일을 사용할 수 있도록 허락해 주십시오.

static 폴더에 저장

3D 모델 디스플레이

설치는 vue-3d-모델을 사용할 수 있습니다.

npm install vue-3d-model --save

src/App.vue를 다음과 같은 내용으로 고쳐 쓰세요.

src/App.vue

<template>
  <div id="app">
    <model-obj src="static/ryu0xb.obj"></model-obj>
    <router-view/>
  </div>
</template>

<script>
import { ModelObj } from 'vue-3d-model'
export default {
  name: 'App',
  components: { ModelObj }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

실행 확인

실행

npm run dev

브라우저로 표시되는 경우http://localhost:8080/#/ Vue.js의 로고가 3D 모델로 바뀌었음을 확인할 수 있습니다.

수정 전

수정 후

기타

사이트 제목의 오른쪽 메뉴에서 처리할 수 있는 3D 형식을 확인할 수 있기 때문에 어떤 형식을 사용하는지 확인해야 한다.(이번엔 obj 형식을 이용했다)
또 50MB 정도의 obj 형태를 사용할 때 묘사에 10초 이상 걸려 저다각형화 등을 줄여야 할 수도 있다.

끝맺다

가능하면 블로그'웹 페이지 정보에도 많이 기재돼 있으니 꼭 참고하시기 바랍니다.