根据公司提出的需求,需要在后台项目中留出一个展示.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模型所有有价值的信息,希望对你有帮助!