如何从0-1开发一张3D大屏,我用大白话给你解释清楚了!

楼主
我是社区第1125571位番薯,欢迎点我头像关注我哦~

现在数据可视化的应用是越来越高端酷炫了,除了常规的二维看板外,三维可视化也愈发热门。

可别因为3D看板的酷炫误以为它很难,偷偷告诉你,只要掌握好了设计技巧,即使是0基础的IT人员也能制作出令人震撼的3D看板。

大师兄特地整合了帆软内部FineVis3D看板可视化设计方法分享给大家,内附3D建模沟通清单和大量免费资源获取路径,还不快快收藏!

 

STEP1:业务需求调研

3D看板不仅是为了展现炫酷的视觉效果,更重要的是为业务人员提供实际的业务价值,通过可视化让数据可以被更好地透明、解读和共享。因此,第一步的需求调研是至关重要的环节。

下面以帆软锂能科技公司三维展示大屏为例,向大家展示调研过程:

1、明确业务背景

该三维看板作为公司企业的宣传大屏,主要用于介绍公司经营状况、主营信息,并通过3D可视化呈现出园区和生产车间,展示公司的经营实力、生产流程工艺及信息化水平。

因此,主要有3个场景需求:
  • 将整个工业园区建模,作为模板中的主场景
  • 车间产线通过三维模型,展示关键工艺流程,以及设备运转情况
  • 通过地图展示公司在全国的分布情况

2、业务场景关键指标

需求调研过程,不仅要明确业务侧重展示的内容,以及看板需呈现的故事,同时还要梳理清楚关键指标。

下面为锂能科技公司梳理好的指标情况,具体是从公司情况、园区情况以及园区管理这三个层面,挖掘关键监控指标,确定合适的可视化方式。

3、确定看板的分辨率

看板的设计一定要基于最终终端的实际分辨率,值得注意的是,设备最终展示的分辨率又会受到模板、显卡和终端屏幕分辨率的影响。

FineVis可视化看板里内置了4种常用的分辨率:高清屏(1280*720px)、超清屏(1920*1080px)、2K屏(2560*1440px)、超宽屏(4864*1294px)。

STEP2:场景规划

在明确各种指标后,要进行三维看板的场景规划,包含:二维指标、三维模型、二维和三维的联动关系,以及看板的交互内容等。具体可以按照下方表格将规划内容记录下来,方便后续设计看板,以及绘制看板原型效果。

以上是锂能科技公司的场景规划,根据此表格,可以清晰了解到具体的三维模型需求:园区全景模型、生产车间细节模型。然后再根据这个场景规划和建模师进行具体沟通。

STEP3:视觉设计

视觉设计主要分为两个部分,一个是三维模型,另一个是二维图表。整体视觉色系需要保持一致,让整个看板更协调。

1、三维模型开发

具体三维模型可以根据场景需求,和建模师沟通视觉效果,这份材料清单会帮你缩减60%的建模师沟通成本,在FineVis里面需要认准glb格式的模型。

如果模型师是第一次进行开发,可以先修炼一些课程,以保证模型能够快速导入,推荐学习课程:三维模型优化教学课程

以下是一些常见的模型效果:

2、快速获取模型

为了降低3D看板的搭建成本,FineVis整理了700+模型提供给大家免费下载。如果模型库中提供的模型和你所需的模型场景十分一致,那恭喜,可以直接复用,省略建模环节。

3、看板布局设计

根据模型所在位置,确定看板主视觉位置,并且围绕主视觉分布二维指标。具体有以下几种布局可以参考:

STEP4:快速开发

在完成视觉设计后,要如何快速开发3D看板呢?

如果你是0基础使用FineVis,可以跟着老师的教学视频,快速上手开发。推荐学习课程:FVS基础教学课程

如果你已经用过FineVis,那更要尝试“资源复用”大招!

FineVis所有的官方模板和组件都可在Demo库里进行在线预览,并支持在编辑器内下载。共覆盖10+行业、包含200+模板,模板开发不再愁!此外帆软还提供组件商城,以组件为可视化单位,任你挑选使用,模板开发效率upup!

E8FF1F7F-DF69-4586-BD34-015C03C6F6CB.GIF

STEP5:上线测试

3D看板开发后,还需要最终上屏测试,检查模板在终端屏幕上的展示细节,还要注意测试模型的交互效果,避免踩坑哦~

是不是很心动呢,点击这里FineVis可视化平台,即可在线体验FineVis官方Demo平台的模板,提前感受3D看板的魅力!

分享扩散:

沙发
发表于 2023-11-20 13:45:06
先把官方的demo里的bug都解决掉再推广吧……
板凳
发表于 2023-11-20 17:14:18
光是建筑和设备建模就劝退了 大部分公司都没有这个岗位 报表工程师也没有这个技能啊
地板
发表于 2023-11-23 13:46:51
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

6回帖数 4关注人数 8089浏览人数
最后回复于:2023-11-23 13:46

返回顶部 返回列表