Vue 3D Model 入门

• 官方文档
• 源码地址
• 3D素材地址
• 练习项目地址

（一）安装

npm install vue-3d-model --save

（二）踩坑记录

• 控制台报extend错误
  • install到的版本是对应vue2的，vue3用不了（vue3不支持Vue.extend），需要去官方文档（master分支->src）拷贝最新的代码引入才可以使用
• 素材须放下public文件夹下
• 多个模型，只展示了第一个
  • 解决: 一个模型要包一个容器标签

（三）API

1. 前置知识点

• requestAnimationFrame(callback)
  • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率；>>
  • 一般来说，这个频率为每秒60帧；
  • requestAnimationFrame会在当前窗口或者标签页不可见时停止运行，不会进行重绘或回流。可以减少的cpu，gpu和内存使用量；>>
• cancelAnimationFrame(id)
  • requestAnimationFrame默认返回一个id，调用cancelAnimationFrame时只需要传入这个就可以停止了。

2. API说明

属性	说明
width	宽度，和高度一起才生效
height	高度，和宽度一起才生效
src	3d文件路径，e.g. example/models/obj/LeePerrySmith.obj
background-color	背景颜色
background-alpha	背景颜色透明度
controls-options{}	①enableRotate: false：能否旋转 ②enableZoom: false：能否缩放 ③enablePan: false： 能否移动（鼠标右键可以移动模型）
rotation{x: 0, y: 0, z: 0}	①控制模型角度，旋转中心 ②搭配 requestAnimationFrame方法使用 ③参数 x：围绕x轴旋转的角度(负数则是反向) y：围绕y轴旋转的角度 z：围绕z轴旋转的角度
事件
load	模型加载完毕事件
on-click	鼠标点击事件
on-mousemove(event, intersected)	鼠标悬浮事件 鼠标在容器上移动，intersected为null 鼠标在模型上移动，intersected为模型对象
gl-options={}	① 设置属性为{ preserveDrawingBuffer: true }时，可以通过ref获取对应的图片地址； ②imgSrc.value = modelRef.value.renderer.domElement.toDataURL('image/png', 1);