Vue项目中怎么展示3D模型（.glb文件）？_vue 3d

根据公司提出的需求，需要在后台项目中留出一个展示.glb文件的地方，在此之前确实没接触过，照猫画虎的用three.js确实是实现了展示的效果，但是仅仅只是做到了展示，并不能添加事件，毕竟three.js咱还没琢磨过，于是乎就大肆的搜索，找到了好几个vue专门用来展示3D模型的插件，例如：vue-model-viewer、vue-3d-model，（在npm官网搜索可以找到），这两个插件默认展示的效果是一样的，也默认可以用鼠标控制模型旋转，但是缩放等一系列操作不能够满足，或许可以满足，只是我没仔细研究，重点来了，<model-viewer></model-viewer>,这个插件还是比较强的@google/model-viewer - npm (npmjs.com)https://www.npmjs.com/package/@google/model-viewer这个是npm地址，可以去看看详细信息

使用方法：

1.安装

npm install three@0.154.0 
npm install @google/model-viewer@3.2.1

2.代码部分

a.template部分

<template>
  <div class="hello">
    <model-viewer style="width: 500px;height: 500px;"  alt="Ready Player Me Avatar" 
      camera-controls 
      src="https://api.readyplayer.me/v1/avatars/6185a4acfb622cf1cdc49348.glb" shadow-intensity="1"
      touch-action="pan-y">
  </model-viewer>
  </div>
</template>

b.script部分

<script>
import ModelViewer from '@google/model-viewer'   //引入组件
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  components:{
    ModelViewer  //注册组件
  }
}
</script>

c.效果

d.解释：

运行起来可能会弹出警告，不用理会，我安装的three.js是0.154.0版本，目前最新的是0.155.0，但是这个版本的three.js不支持使用3.2.1版本的插件，所以要根据版本进行安装哦！

也可以全局引入插件，在main.js文件，直接写:import '@google/model-viewer'

这样的话就没有警告了，看个人习惯

以上就是vue展示3D模型所有有价值的信息，希望对你有帮助！