数据大屏的3d是怎么做的?

UI设计 yekong

随着物联网的发展,数据大屏可显示的内容也越来越丰富了,更多的客户希望在自己的数据大屏中增加3d元素。今天讲一下数据大屏的3d是怎么做的

由于本人是前端开发,所以从前端开发的角度来对数据大屏的3d制作流程进行描述。

数据大屏的3d是怎么做的-客户需求

要在数据可视化大屏 中显示3d元素,首先需要客户提需求,需要什么样的3d模型,比如是厂房啊还是设备呀,然后提供参数,参数越详细越好,建模师会告诉您需要哪些参数的,客户将需求详细描述完成后发给建模师。

数据大屏的3d是怎么做的-建模师建模

建模师会根据客户的需求在3dMax c4d 或者 Blender建模工具中进行3d模型创建,中间与客户沟通完善细节,直至达到客户的需要,3d模型就完成了,客户对模型满意后,建模师会将模型导出为glb或者gltf格式文件发给前端网页开发渲染。
在建模工具中的模型
在建模工具中的模型
建模工具 blender
建模工具 blender

数据大屏的3d是怎么做的-前端开发渲染

接下来到我上场了,前端开发,由我来在html中完成最后的3d模型渲染工作,3d渲染一般是使用threejs这种webgl库将接收到的glb或者gltf文件渲染到网页中,当然也需要调整,比如如果您想要点击3d模型弹出标题,或者想要点击3d模型让其有个半透明的效果,或者要在指定3d模型位置进行标注等,或者让模型进行旋转动画,这些都是由我来完成的。
比如下面的厂房里的高亮,名称显示以及基站显示等。是前端需要完成的工作。
3d建模演示

其他注意事项

显卡问题

小一点的3d模型在网页中渲染一般没啥问题,如果模型太大的话就需要考虑显卡问题了,之前项目开发中要渲染300多M的3d模型,使用2g集成显卡拖动都卡顿,没办法调试,只得又购买了一台加装了8g独立显卡的主机才能流程运行起来,模型太大的话对显卡要求也会增高。

如果是内部使用的话可以加装显卡解决,如果供外部访客使用,需要考虑访客硬件问题。

带宽问题

模型太大对带宽资源也是一种消耗,如果是内部使用的话没问题,如果供外部访问需要考虑带宽问题。

最后

数据大屏的3d是怎么做的,大概的流程就讲完了,希望能够帮到您。

喜欢