因工作学习需要，近段时间需要做一个玻璃厂的web端三维可视化项目，有前辈的基础，不过此次要在web端实现，由于web端的特性，因此需要将之前的模型进行轻量化处理，提高页面的fps,加载时间，内存占用等问题，在学习过程中会以此方式记录所遇到的问题以及处理方法。
所谓术业有专攻，闻道有先后，文中所提及的知识点以及观点仅供参考学习，不一定正确，若对内容存在疑问，欢迎评论或者私聊交流。
一、开发工具
ThreeJS+html+3DsMax；
ThreeJs: 轻量化的网页端3D图形库；
Html: 网页开发，界面设计；
3DsMax：建模工具，设计厂房模型以及相关机械设备模型；
二、项目进度
初步完成以下内容：
1.玻璃厂房模型的建立并导入；
2.产线部分模型建立，包括熔化区，成型区，冷却区，加工区的传输设备建立；
图1 厂房模型俯视图
图2 平板玻璃产线
三、今日完成
1.熔化区以及成型区的简化处理以及导入，吸盘抓取装置的建模导入；
图3 熔化区+成型区
图4 熔窑
图5 机械手臂抓取装置
四、实施
1. 模型的处理--以熔化区为例
选用的三维软件为3dsMax，以.fbx格式导入web端,至于原因没什么特别的原因，因为之前的学习对.fbx格式了解比较多，.fbx格式适用范围广。
之前的模型是在solidworks建立的，由于两种软件的点面计算的区别，以及前者的建立方式没有过多对模型的顶点数量以及三角面数进行控制，导入3dsMax中，顶点数目以及面数比较多，如下图所示。
图6 处理前的模型顶点与三角面数信息
数目比较大，有32万个三角形以及16万个顶点，在公司的电脑(具体配置忘记了，过两天去看看)直接导入web端需要加载5s左右，fps以及网页内存占用均不理想。
因此需要根据实际工厂的比例对模几何大小进行调整，利用多边形编辑，删除或者简化不重要的几何特征，简化得到下图模型只有6000多个顶点以及7000多面。加载效率以及显示效果大大提高。
图7 简化后的熔化区模型
2. 导入模型的代码
.fbx的导入，在threejs的官方案例中很好找到如何引入并使用。引入的模型的地址，设定其在场景中的位置，添加到场景中即可。
图8 模型导入代码
3.利用顶点缓存复制相同的模型
场景里面有许多几何特征形同的模型，这些模型的顶点与面索引等信息完全一样，如果都在3dsMax中阵列会提高数据量，因此可以利用顶点缓存在模型加载时用代码进行克隆，然后改变模型位置即可达到相同的视觉效果，也不会消耗web端的性能。
图9 抓取装置
图10 模型复制
图11 模型克隆效果
五、结语
第一次写，比较仓促，很多知识点没有细讲，也需要翻阅资料，写了一个小时了，把东西用文字复述一遍还是很不容易啊。以后会多查阅资料，写得更完善更专业一些，谢谢大佬有缘阅读。
网友评论