《ThreeJSCesium智慧机场三维可视化》实战项目大纲
HelloWorld
2022-11-16
《ThreeJS+Cesium智慧机场三维可视化》 实战项目大纲 一、需求分析 二、交互设计 三、UI设计 五、可视化开发 六、项目测试 七、项目打包与发布 1.[PUID001]《UI设计全流程》 2.[PTEST002]《智慧机场项目测试文档编写》 1.[PTEST001]《智慧机场项目测试》 1. [PREQ001]《智慧机场项目需求讲解与分析》 1.[PUXD001]《交互设计全流程》 四、三维设计 （1）机场设施设备的运行演示 4 展示客机的材质绘制 4 展示客机的UV展开与复用 （2）展示客机的爆炸拆分展示 ②客机运行的空间位置位移 2 展示客机的拆分运动与轴设置 1 飞机与车辆的空间运动中心轴设置 ③独立拆解状态的客机为内部设备写实外壳透明质感的科技效果材质 ⑥机场专用车辆的分布统计 I.飞机除冰车 II.摆渡车 III.加液车 IV.客梯车 V.除雪车 ③独立飞机的爆炸拆解展示 1.[P3DM001]《三维设计制作流程入门》 ⑦客机模型的精细化多形式的展示 ⑤场区内飞机航班信息状态监测反馈 （1）了解三维技术应用的方向 （2）三维设计师涉及的软件工具 1 影视行业 2 动画行业 3 游戏行业 4 VR/AR/MR/元宇宙 5 数字孪生与三维可视化 城建园区 工业制造 交通运输 医疗防疫 军事航天 虚拟仿真 仓储物流 能源水务 工程孪生 数字旅游 展览展示 1 建模软件 2 材质贴图 建模设计 动画制作 材质调节 灯光渲染 特效制作 i.3dsMax ii.Blender a.场景建模 b.UV展开 c.模型整理 d.材质整理 iii.C4D iv.Maya v.ZBrush vi.Marvelous Designer 图像处理 材质绘制 i.Photoshop 贴图处理 ii.Substance Painter PBR材质绘制 （3）项目制作的流程纲目 2 第二课-前期方案需求沟通-沟通项目制作内容效果与交互效果 3 第三课-前期资料准备-素材分析与采集筛选并处理准备 4 第四课-三维建模-范围场景外环境模型的制作 5 第五课-三维建模-环境内场景模型的制作 6 第六课-三维建模-场景内设备模型的制作 7 第七课-模型的规范整理-模型的分组原则、命名规范、坐标规范、材质 球、法线光滑组等整理 8 第八课-模型UV展开与复用-UV的展开规范与复用摆放原则 9 第九课-模型动画的处理准备与设置导出-整理应用于设备动画的物体拆 分和轴设置 10 第十课-材质效果设计制作-PBR材质贴图绘制流程 12 第十二课-三维设计与三维开发的工作对接-场景及设备的运行演示 （4）设计师必备软件技能点 Blender Photoshop Substance Painter 2.[P3DM002]《前期方案需求沟通》 （1）项目类型及展示需求沟通 ①应用于Web端的智慧机场可视化系统（北京首都机场T3区域） ②机场内设施设备状态等资产配置的三维全景监测 ③独立客机的运维分解展示与状态监测 （2）制作内容沟通和场景样式确认 ①机场区域的地形、跑道、道路、辅建、绿化、天空等场景环境进行展 现 ③机场站坪与跑道状态的监测 ④场内登机桥的运行状况监视调度 （3）交互形式和动画动效的确认 ①专用车辆的空间位置位移 （4）风格样式的确认 ①机场周围地形与主体建筑的大环境用黑金质感的科技效果材质 ②机场设施设备与飞机车辆使用写实材质 3.[P3DM003]《前期资料准备-素材分析与采集筛选》 （1）前期资料的分析利用处理 ①项目类型的展示参考 i.交互图纸的分析 ii.相关案例的视频分析处理 ④风格样式的材质参考 i.科技感机场的案例参考分析 (2)软件插件的资源数据下载处理 全能电子地图下载器 i.地图资源的下载 ii.地图纹理的处理 4.[P3DM004]《三维建模-范围场景外环境模型制作》 1 基本几何网格的创建编辑 ii. 机场航站区的内外地形环境的制作 iii.机场航站区跑道与外围公路的制作 2 可编辑多边形命令的使用 3 布线规则和处理方式 4 图像资料的造型分析实现 Next 5.[P3DM005]《三维建模-环境内场景模型的制作》 1 基本几何网格的创建编辑 iv.机场航站区的内外绿化花坛的制作 2 可编辑多边形命令的使用 3 布线规则和处理方式 4 图像资料的造型分析实现 Next i.机场主建航站楼与登机桥的制作 ii.指挥塔与高架灯的制作 6.[P3DM006]《三维建模-场景内设备模型的制作》 1 基本几何网格的创建编辑 v.机场周遭辅建民房的制作 2 可编辑多边形命令的使用 3 图像资料造型分析实现 Next ②机场飞行区的T3航站楼、航站区、机场、高杆灯、指挥塔等机场基 建设施展示 i.[P3DM006.1]《其他设备篇》 ii.[P3DM006.2]《展示设备篇》 8.[P3DM008]《模型UV展开与复用》 （1）可复用模型的分析与整理 4 展示客机的组装整理 1 天空球、地形、辅建、绿化的UV展开与复用 2 主建、设施的UV展开与复用 （2）UV切线规则 （3）UV摆放原则 （4）UV工具的使用 （5）UV效果的查看调整 （6）UV展开后模型的复用操作 Next 7.[P3DM007]《模型的规范整理》 （1）模型分组附加与对接摆放 1 天空球、地形、辅建、绿化等环境整理 2 主建、设施的场景整理 3 飞机与车辆的设备整理 （2）材质球整理与命名规范 （3）模型法线与光滑组的检查设置 （4）模型的坐标设置与整理 Next 9.[P3DM009]《模型动画的处理准备与设置导出》 （1）需要制作动画部分的拆分 3 飞机与车辆的UV展开与复用 （2）需要制作动画部分的轴设置 （3）模型整理结束后的导出设置 Next 10.[P3DM010]《材质效果设计制作》 （1）模型导入SP软件的设置 1 天空球、地形、辅建、绿化的材质绘制 2 主建、设施的场景材质绘制 3 飞机与车辆的材质绘制 （2）场景贴图的烘焙 （3）层级界面与纹理界面的使用 （4）工具栏的操作使用 （5）材质球的属性调整使用 （6）配合Blender与PS导出调整贴图 （7）素材到出入与层级使用的规范 （8）科技感材质的绘制 （9）写实材质的绘制 （10）绘制结束后贴图纹理的设置导出 Next 11.[P3DM011]《模型贴图文件的整理提交》 （1）导出贴图的命名规范整理 智慧机场可视化系统内全部模型文件与贴图文件的整理 （2）贴图贴入模型材质球的通道设置 （3）模型检查与清理规范 （4）模型导出设置与贴图路径指认方法 （5）文件资料提交开发与对接流程 Next 提交给开发人员并讲述资料文件用途 12.[P3DM012]《三维设计与三维开发的工作对接》 4 软件插件 地图下载 全能地图下载器 全能电子地图下载器 ②制作内容的样式参考 i.飞机车辆的图像参考 ii.首都机场的航拍视频分析处理 ②交互形式的动画参考 i.机场飞机运行的视频参考分析 ii.机场飞机起降的视频参考分析 场景建模与UV展开和模型整理处理 处理贴图纹理素材 制作PBR材质 处理下载地图资源 (2)网上素材的补充筛选下载处理 i.科技感的案例参考分析处理 ①项目类型的展示参考 ii.写实感的案例参考分析处理 i. 飞机车辆塔台的图像参考下载处理 ②制作内容的样式参考 ii.客机样式的视频参考下载处理 ④风格样式的材质参考 ②交互形式的动画参考 i.机场飞机运行的视频参考下载处理 ii. 机场飞机运行的视频参考下载处理 i.机场夜景的案例参考分析 ii.科技感机场的案例参考分析 iii.三维机场样式的案例下载处理 i.卫星底图与天空球的搭建制作 1 第一课-三维设计制作流程入门-行业认知、相关软件和项目设计流程 3 平台引擎 Web GL UE4 网页端 客户端 6.1《其他设备篇》 6.2《展示设备篇》 11 第十一课-模型贴图文件的整理提交-贴图文件整理命名规范与贴入并导 出对接开发 1.[P3DD001]《项目开发必备技能-svn版本管理》 2.[P3DD002]《项目开发必备技能-代码命名规范》 3.[P3DD003]《项目开发必备技能-vscode的使用》 4.[P3DD004]《项目开发必备技能-效果图查看工具的使用》 5.[P3DD005]《项目开发必备技能-程序概要设计》 6.[P3DD006]《项目开发必备技能-程序详细设计》 7.[P3DD007]《项目开发必备技能-编写程序接口文档》 8.[P3DD008]《vue环境的搭建、项目的创建》 10.[P3DD010]《航班总览界面开发--航班轨迹概览组件的开发》 11.[P3DD011]《航班总览界面开发--航班准点率、趋势、延误原因界面模块的开发》 12.[P3DD012]《航班总览界面开发--今日航班列表组件的开发》 14.[P3DD014]《航班总览界面开发--飞机起降图表的开发》 13.[P3DD013]《航班总览界面开发--天气、准点率排名界面模块的开发》 15.[P3DD015]《机场运营界面--中间模块的开发》 16.[P3DD016]《机场运营界面--右侧模块的开发》 17.[P3DD017]《客机运维界面--左侧模块的开发》 18.[P3DD018]《客机运维界面--右侧模块的开发》 19.[P3DD019]《vue中创建三维场景》 20.[P3DD020]《添加模型场景》 21.[P3DD021]《飞机起飞效果的实现》 23.[P3DD023]《点击客机模型部件高亮显示、弹窗交互》 24.[P3DD024]《客机的拆解与还原效果的实现》 31.[P3DD031]《项目的Bug修改与功能的优化》 32.[P3DD032]《后台数据对接与集成》 1、nodejs的下载、安装 2、vue-cli的安装 1、Raycaster的介绍 2、点击高亮的实现方法 3、点击的事件交互 1、程序代码的优化 1、客机的拆解 2、客机的还原 22.[P3DD022]《点击客机的视角切换实现》 软件下载及安装 svn的使用 常用插件 常用快捷键 PxCook 蓝湖 [PPR001]《智慧机场项目打包与发布》 （1）指令 npm run build 1 js 路径问题 脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/ index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’ 2 img 路径问题 在 build/utils.js 文件中 ExtractTextPlugin extract 节点下，添加一 行：publicPath: ‘…/…/’ 1.项目打包 2.项目发布 i.在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下， 添加一行：favicon: config.build.favicon （2）常见问题 3 favicon.ico 问题 同步到远程服务器 ii.在 config/index.js 文件中 build 节点下，添加一行 ： favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS： favicon.ico 放在 src 目录下) 6 生成的文件大 4 IE9+ 兼容性问题 5 禁止生成 .map 文件 i.由于 axios 是基于 promise 之上实现的，在 IE 下会有兼容性问题。 ii. 安装 babel-polyfill iii. 修改 build/webpack.base.conf.js 文件中 entry 节点 修改 config/index.js 中 productionSourceMap 值 productionSourceMap:false ii.使用vue路由的懒加载 i.把不常改变的库放到index.html中，通过cdn引入 基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以 直接将这两个文件扔到服务端 （4）合法和非合法原则 （3）独立测试原则 （2）IPO原则 （1）尽早不断测试的原则 （5）错误群集原则 原则 （6）严格性原则 （7）覆盖原则 （8）定义功能测试原则 （9）回归测试原则 （10）错误不可避免原则 1 单个页面测试 （1）单元测试 2 单个控件测试 1 前后台数据对接测试 （2）集成测试 2 数据联调测试 1 整个软件系统的测试（前端部分） （3）系统测试 1 页面加载速度测试 测试 2 大数据量测试 （4）性能测试 3 页面响应实时性测试 1 分辨率测试 2 浏览器测试 （5）兼容性测试 3 操作系统测试 4 宿主硬件测试 1 设计原则 i正确性 ii全面性 iii连贯性 iv可判定性 v可操作性 i白盒法 ii测试覆盖率 2 设计方法 iii黑盒法 i同级互查 （1） 测试用例文档 a.项目负责人 3 评审 b.测试人员 c.编程人员 ii专家评审 d.系统分析设计 e.客户代表 4 修改更新 1 首页 2 引言 3 测试概要 （2） 测试报告文档 4 测试结果与缺陷分析 5 测试结论与建议 6 附录(缺陷统计) 1.项目背景 （1） 智慧机场概述 （2）智慧机场的现状及存在问题研究 （3） 智慧机场系统的建设必要性 （1）分辨率 （2）字体 （3）响应速度 2.总体需求 （4）兼容性 （5）以深色科技感为主 1 今日航班准点率统计 1 2D面板 2 3D机场地图 3 3D飞机模型 2 今年航班起降架次趋势 3 飞机延误原因统计 4 今日航班详情展示 5 飞机起降正常与异常情况统计 （1）航班总览 6 气象监测 7 准点率排名 8 消息通知 9 不同时区时间显示 10 飞行航线展示 1 越界警告 2 机场车辆人员统计 3.功能要求 3 机场监测 4 旅客吞吐量统计 （2）机场运行 5 飞机装载率统计 6 作业定位分布 7 机位作业分布 1 灯光设备统计监测 3 航班轨迹 （3）客机运维 2 客机信息统计监测 4 当前航班工作人员状态监测 1 可视化图表信息展示 2 结合GIS地理信息系统 （1） 航班总览 3 飞机航线三维可视化展示 4 为停机规划数据支持 1 用科技感风格展示机场 2 丰富全面的可视化图表数据面板 3 通过后台数据接入 （2） 机场运行 4.界面需求 4 实时监测并显示飞机场车辆、设备信息 5 结合GIS地理信息系统 6 实现管理实时化、可视化 1 用科技感风格展示飞机模型 2 实时显示飞机灯光设备情况，便于维修更换 （3） 客机运维 3 实时显示飞机人员健康状况，实现人员管理实时化 页面结构设计 1 研究智慧机场行业主流竞品的业务功能界面 2 将收集到的机场情况监测数据进行分组 3 对机场的信息、数据进行设计使之结构化 4 更加清晰、快捷的传达机场的各项监测数据 5 可以用Sketch、Axure等工具输出简易页面结构布局 1 基于前期调研和用户访谈内容 （1）需求整体梳理 思维导图转化 2 组织设计师结合各角色用户对产品的理解与定位 3 用Xmind、Sketch、Axure等工具输出产品信息架构图 1 搜索其他智慧机场项目可视化系统进行分析 2 检索出来的产品界面既有科技感风格的，又有写实风格的 3 结合实际功能模块和用户访谈需求 设计路线选型 4 得出科技感的视觉风格比较符合目前的用户需求 a.注重系统的全局掌控 b.查看机场的整体运营情况 i.领导决策者 c.查看航班准点率等关键信息 1 本系统适用的用户群体 a.关注机场的运营情况 ii.智慧机场平台运营人员 b.能够及时查看机场全局信息，便于统筹资源调度 希望在设计交互方面能够让用户可以高效率、有效地浏览内容，更容易 找到信息 iii.软件产品经理 （1）用户研究 i.功能需求 ii.操作特性 iii.知觉特征 2 用户的实际需求成为产品设计的导向 iv.认知心理特征 v.日常工作中各自的使用场景 1 今日航班准点率统计 2 今年航班起降架次趋势 3 飞机延误原因统计 （2）产品设计 4 今日航班详情展示 5 飞机起降正常与异常情况统计 6 气象监测 （2）产品功能 7 准点率排名 8 消息通知 9 不同时区时间显示 10 飞行航线展示 11 基于GIS的飞机航线实时显示 1 用流程图梳理出智慧机场系统的各个功能点 2 串联各角色在不同任务中涉及的页面信息、操作与反馈 （3）流程设计 3 形成线性流程关系 4 建立特定逻辑顺序的步骤地图 5 预知机场场管理监测的最佳实现路径 竞品分析 概念设计 主色调 飞机的白色 天空深蓝色 颜色多以白色为主 轻巧简炼 具有一定的想象空间 线性 蓝色代表科技感 图标设计 不会对界面产生太大的视觉干扰 以较为鲜艳的不同颜色进行区分 功能区图标 9.[P3DD09]《头部公共组件的开发》 1、echarts的介绍 1.官网 https://echarts.apache.org/zh/index.html 2.vue中使用echarts 世界地图 2、ecahrts中地图的使用 中国地图 echarts常用属性字段的介绍 vue-charts组件开发 vue-charts配置 vue-charts安装 3、轨迹的出发地、目的地、飞线的实现 1、今日航班准点率的实现 ecahrts中渐变色的使用 echarts柱状图的开发 2、今年航班起降架次趋势 3、飞机延误原因的实现 echarts象形柱状图的使用 标注连线的使用 ecahrts饼图的开发 1、vue-virtual-scroll-list组件的安装 2、vue-virtual-scroll-list组件模板item项的创建 3、1、vue-virtual-scroll-list组件的使用 1、飞机起降正常与异常组件的开发 echarts折线图的开发 echarts areaStyle属性的使用介绍 1、天气信息的实现 2、准点率排名列表的实现 1、越界告警信息的实现 2、车辆人员统计信息的实现 3、机坪监测的实现 echarts散点图的开发 ecahrst x轴y轴的属性设置 4、旅客吞吐量信息的实现 1、运载率、客座率、靠桥率的实现 2、作业定位分布的实现 3、机位作业分布的实现 1、灯光设备的实现 1、客机信息的实现 2、航班轨迹的实现 3、当前航班工作人员列表的实现 安装 1、如何在vue中使用threejs 引用 导入加载器库 异步加载 b.Promise.all a.Promise 克隆模型 a.GLTFLoader GLTF加载器 b.setDRACOLoader用于解码 c.DRACOLoader解码器 a.模型位置 压缩模型加载 b.模型大小 d.load加载 c.旋转角度 d.修改材质 TweenMax.js动画库安装 使用TweenMax.js动画库 了解使用TweenMax.to方法 1、TweenMax动画库的介绍 I.play控制动画往正方向播放 动效的启停 II.pause暂停动画可选择跳转到特定时间 III.vars动画参数 II.duration动画持续时间 I.target需要动画的对象 onStart时间轴开始时执行的回调函数 onComplete时间轴结束时执行的回调函数 飞机起飞的效果实现 了解使用TweenMax.to方法 TweenMax.js动画库安装 使用TweenMax.js动画库 1、TweenMax动画库的介绍 I.play控制动画往正方向播放 动效的启停 II.pause暂停动画可选择跳转到特定时间 III.vars动画参数 II.duration动画持续时间 I.target需要动画的对象 onStart时间轴开始时执行的回调函数 onComplete时间轴结束时执行的回调函数 飞机起飞的效果实现 客户端支持防御XSRF(跨站请求伪造) 转换请求数据和响应数据 axios.post("url"{}).then(res=>{}), axios.get("url"{}).then(res=>{}), 自动转换JSON数据 支持Promise API[JS中链式编程] 拦截请求和响应 如何解决跨域请求的问题 从node.js创建http请求 取消请求 从浏览器中创建XMLHttpRequests 特点 引用 import axios from 'axios' axios介绍 Post请求 跨域请求 安装 npm install --save axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她 的主要作用就是实现AJAX异步通信 Get请求 25.[P3DD025]《Cesium--飞机航线轨迹效果实现》 26.[P3DD026]《Cesium--航班数量三维可视化柱状图实现》 27.[P3DD027]《Cesium--全球天气情况效果实现》 28.[P3DD028]《Cesium--摆渡车行驶路线规划实现》 29.[P3DD029]《Cesium--飞机自动提示告警信息的实现》 30.[P3DD030]《Cesium--点选单个飞机的航线规划效果实现》 3、vue create 创建vue项目 4、路由的介绍 5、路由的配置、跳转设置 1、dayjs库的使用介绍 1、https://dayjs.fenxianglu.cn/ 2、安装 > npm install dayjs --save 3、导入 import * as dayjs from 'dayjs' 4、格式化 5、获取当前时间 6、时间戳的转换 1、setTimeout 2、实时显示当前时间 2、setInterval 1、通过时区差获取相差的时间戳 3、实时显示各不同时区的时间 2、通过时间戳转换成时间 1、如何引用系统未安装的字体 4、特殊字体的使用 2、设置字体 1、路由的介绍 2、路由的两种模式 5、路由的介绍 3、不同路由模式的区别 1、如何配置路由 6、路由的配置、跳转设置 2、如何点击跳转路由 1、vue配置安装cesium方法 2、cesium基本环境搭建与属性介绍 3、轨迹效果实现 1、vue配置安装cesium方法 2、cesium基本环境搭建与属性介绍 3、轨迹效果实现 1、风场效果开发 1、div弹窗同步三维对象 3、鼠标事件管理 2、点选对象功能 1、航迹规划效果