使用QT的canvas3d来加载3d模型

需求：接到一个任务要写展示一个设备的3D模型。串口连接设备返回仰俯角等数据，目的让展示里的模型跟着设备转动。

确定开发框架： 我原本是做VS开发的，以前用开始用MFC框架-->C#Winform-->duilib做界面。在接触的这几个技术并没有发现有3D的，第一反应用MFC做这个这个软件可能要疯吧。Duilib吧百度也一下没有找到做3D的例子（还是一个没有详细文档的开源库用了之后发现各种坑）。好在最近要学习QT，QTCreator的例子里面就有个3D展示一个手机不停旋转的。对的我就要抄那个这个例子。这样开始自己的第一个QT项目吧。

第一步当然先看实例里的代码，了解代码构架。此例子使用的是QTquick里的Canvas3D画布调用了three.js脚本来显示3D模型。里面涉及了QML,js,还有个脚本json。重点关注3文件 main.qml -> cellphonecanvas.qml->cellphone.js。

1. 我使用的这个例子是用的three.js来显示3D，直接丢出讲解这个的视频https://www.bilibili.com/video/av541636494/  。我在官网下载的three.js和QT带的three.js不一样，所以沿用了QT里的three.js也没深究。
2. 查看代码Main.qml为界面入口，cellphonecanvas.qml主要是定义了个Canvas3D画布用这个画布来调用js脚本。往下看找到cellphone.js脚本。这里放上一个Canvas3D制作3D的链接https://xiaoleng.blog.csdn.net/article/details/108003126
3. 模型加载，此例子用的是json文件来装模型信息。下面继续丢出一个连接https://blog.csdn.net/weixin_34228617/article/details/92011134 

第二步开始准备我的模型，结构工程师给到我的是obj文件。 然后需要的是JSON文件。OK下面就是遇到的坑。

1. 网上下载了three.js文件和相关的环境然后用命令把obj转换成了json文件，激动不已。导入qt项目，双击我的json文件卡死了。然后看了文件大小，我转的json文件是1306KB而QT例子里的json也就32KB差距有点大啊。
2. 各种网上奋战终于有找到这个用blender来导出json文件。本以为要见到胜利的曙光，然并不是。刚开始下载了最新版本发现和我网上找的的资料不对应，找不到安装three.js的插件，然后又下了blender的2.79版本，导入已下载的three.js插件，然后又下了好几版本，最终还是找到了three.js-r69成功了。神奇的这个three.js-r69版本下的editor是可以用的。我下载的最新版本总是显示不全。
3. 我最终使用的blender2.79导入了three.js-r69的插件。 导出来的json文件大小是954kb测试放入QT项目是可以用的了。（刚开始我是直接在例子源代码里测试我的json）。
4. 简单记录一下导入插件的步骤

    看图file -> user preferences进入 ->Add-ons 选择Intall Add-ons from file  ->选择 three.js插件的目录（截图中有）

导入成功

以下丢出几个连接

https://github.com/mrdoob/three.js/tree/r69/utils/exporters/blender  three.js-r69

https://zhuanlan.zhihu.com/p/26941153 是这个博客指导了一条明路给我。https://download.blender.org/release/ 各个版本的blender下载

第三步就开始建立的我的项目了，

1. 二话不说先把把QT自带的那个例子copy出来，记得要把three.js文件拷出来一般在这个目录下D:\Qt\Qt5.9.8\Examples\Qt-5.9.8\canvas3d\3rdparty。看自己的QT装在哪个盘。然后导入拷出来的的qrc资源文件下。
2. 把自己不用的功能钱掉，多余的文件去掉，例子的有3个json文件，我这里只有一个json文件，所以把多余的去掉。替换好了，结果是顺当当的的把我的模型显示出来了。

第四步就开始开始根据自己的需求来做软件了。下篇文章再好好记录代码的实现。