《大型风能可视化系统》实战项目大纲
HelloWorld
2022-11-16
《大型风能可视化系统》实战项目大纲 一、需求分析 二、交互设计 三、UI设计 四、三维设计 五、可视化开发 六、项目测试 七、项目打包与发布 项目背景 （1）风机数据、状态监测 （2）兼顾管理员和参观者的不同需求 总体需求 （1）分辨率 （2）字体 （3）响应速度 （4）兼容性 （5）以蓝色科技感为主 1 2D面板 2 3D风机 3 3D地形场景 菜单要求 （1）风机场总览 （2）数字风机 （3）舱体视角 （4）爆炸分解 界面需求 接口需求 （1）vue项目的创建 （2）路由配置 9.[P3DD009]《three.js开发-vue中创建三维场景》 模型效果 风机转动 18.[P3DD018]《three.js开发-风机爆炸效果的实现》 14.[P3DD014]《three.js开发-舱体视角及流光效果的实现》 ii.三维交互 19.[P3DD019]《二维UI的开发实现》 4 问题发现处理 （1）测试用例文档 （2）测试报告文档 1.项目打包 2.项目发布 1 风电场三维全景 2 实时上网电量 3 风机在线数量 4 单机容量 5 装机容量 6 风机状态 7 设备信息 8 发电功率/风速 9 设备以及告警信息 10 发电量实况信息 1 展示风电机组 2 显示风机机型 3 监测风机年平均风速范围 4 MTBF 5 等效小时数 6 时间可利用率实况信息 1 三维可视化 2 360度观察风机各个部位 3 全面了解风机各个部件的位置和状态 1 对风机内部电子元件进行分解展示 2 了解风机内部结构 1.[P3DD001]《项目开发必备技能-svn版本管理》 2 svn的使用 i.代码下载 ii.代码更新 iii.代码提交 iv.代码冲突解决 v.版本回退 1 软件下载及安装 2.[P3DD002]《项目开发必备技能-代码命名规范》 5.[P3DD005]《项目开发必备技能-编写程序概要设计文档》 6.[P3DD006]《项目开发必备技能-编写程序详细设计文档》 7.[PDD007]《项目开发必备技能-编写程序接口文档》 3.[P3DD003]《项目开发必备技能-vscode的使用》 1 常用插件 2 常用快捷键 4.[P3DD004]《项目开发必备技能-效果图查看工具的使用》 1 PxCook 2 蓝湖 1 关于vue 2 安装node.js 3 安装npm 4 创建vue项目 5 创建vue组件 6 使用vue组件 1 安装three.js库 2 three.js库的使用 3 三维场景创建 i.创建场景 ii.创建渲染器 iii.创建相机 iv.添加光源 v.添加测试模型 vi.OrbitControls轨道控制器 vii.窗体自适应 4 vue选项式API i.Data a.Data函数 b.methods属性 ii.生命周期钩子 a.mounted函数 导入加载器库 异步加载 压缩模型加载 克隆模型 a.Promise b.Promise.all a.GLTFLoader GLTF加载器 b.setDRACOLoader用于解码 c.DRACOLoader解码器 d.load加载 a.模型位置 b.模型大小 c.旋转角度 d.修改材质 a.修改材质属性 b.添加光源 I.transparent是否透明 II.metalness金属度 III.roughness粗糙度 IV.opacity不透明度 V.color颜色 VI.emissive放射颜色 I.DirectionalLight光源 II.AmbientLight光源 a.使用TweenMax.js动画库 b.TweenMax.js动画库安装 c.了解使用TweenMax.to方法 I.target需要动画的对象 II.duration动画持续时间 III.vars动画参数 d.动效的启停 I.play控制动画往正方向播放 II.pause暂停动画可选择跳转到特定时间 e.动画事件 I.onComplete时间轴结束时执行的回调函数 II.onStart时间轴开始时执行的回调函数 1 使用TweenMax.delayedCall方法 i.Number 延迟的时间 ii.callback执行回调函数 2 getObjectByName获取位移对象 3 动画事件 i.onComplete时间轴结束时执行的回调函数 ii.onStart时间轴开始时执行的回调函数 1 加载流光纹理贴图 i.TextureLoader纹理加载器 2 重置材质 i.map贴图 ii.transparent是否透明 iii.side定义渲染面 3 贴图位移 i.offset偏移 15.[P3DD015]《three.js开发-常规描边效果的实现》 i.EffectComposer效果合成器 ii.RenderPass渲染通道 iii.OutlinePass边缘发光通道 iv.FXAAShader快速近似抗锯齿 v.ShaderPass后期处理通道 16.[P3DD016]《three.js开发-非常规描边方法与三维交互》 i.模型偏移 1 事件监听 i.addEventListener 2 Raycaster光线投射 i.鼠标位置归化 ii.setFromCamera更新射线 iii.intersectObjects检测和射线相交 （1）顶部状态栏 （2）左侧图表信息栏 （3）右侧设备信息栏 （4）底部按钮控制栏 1 风机开启 2 数字风机 3 舱体视角 4 爆炸分解 1 解决UI与模型不同步加载 2 三维效果和Bug修改 i.加载页面 a.HTML标签 b.CSS动画 3 三维效果功能优化 1.[PUXD001]《需求整体梳理与产品设计》 （2）产品设计 2.[PUXD002]《主界面交互设计》 3.[PUXD003]《数字风机与舱体的页面交互设计》 （2）舱体页面设计 （1）页面布局设计 （1）用户研究 （2）产品功能 （3）流程设计 （2）主要控件设计 （3）页面动效策划 页面布局设计 主要控件设计 页面动效策划 （1）页面布局设计 （2）主要控件设计 （3）页面动效策划 页面结构设计 思维导图转化 设计路线选型 1.[PUID001]《概念设计与图标设计》 图标设计 2.[PUID002]《主界面设计》 3.[PUID003]《数字风机与舱体的页面设计》 舱体页面设计 4.[PUID004]《页面的标注与切图》 1.[P3DM001]《三维设计制作流程入门》 20.[PDATA020]《后台数据对接与集成》 1 组件化开发 2 基础样式编写 3 dayjs日期插件的使用 4 全局过滤器的使用 1 echarts的使用 2 v-echarts插件配置和安装 3 echarts文档的查询和使用 4 控件开发基本思路讲解 5 控件实现自适应 1 双折线图的实现 2 折线图和柱状图的组合使用 3 复杂图表样式实现的思路拓展 8.[P3DD008]《three.js开发-三维总览和项目创建》 模型轻量化处理 （5）性能与兼容性 1 大数据量 2 实时性 3 多浏览器的兼容 4 多操作系统的支持 5 多种主流分辨率的自适应 axios介绍 Get请求 Post请求 跨域请求 Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她 的主要作用就是实现AJAX异步通信 安装 npm install --save axios 引用 import axios from 'axios' 特点 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API[JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF(跨站请求伪造) axios.get("url"{}).then(res=>{}), axios.post("url"{}).then(res=>{}), 如何解决跨域请求的问题 1 设计原则 2 设计方法 3 评审 4 修改更新 2.[PTEST002]《风机可视化项目测试文档编写》 原则 （1）尽早不断测试的原则 （2）IPO原则 （3）独立测试原则 （4）合法和非合法原则 （5）错误群集原则 （6）严格性原则 （7）覆盖原则 （8）定义功能测试原则 （9）回归测试原则 （10）错误不可避免原则 测试 （1）单元测试 （2）集成测试 （3）系统测试 （4）性能测试 （5）兼容性测试 1 分辨率测试 2 浏览器测试 3 操作系统测试 4 宿主硬件测试 1 页面加载速度测试 2 大数据量测试 3 页面响应实时性测试 i.正确性 ii.全面性 iii.连贯性 iv.可判定性 v.可操作性 i.白盒法 ii.测试覆盖率 iii.黑盒法 1 首页 2 引言 3 测试概要 4 测试结果与缺陷分析 5 测试结论与建议 6 附录(缺陷统计) i.同级互查 ii.专家评审 a.项目负责人 b.测试人员 c.编程人员 d.系统分析设计 e.客户代表 1 单个页面测试 2 单个控件测试 1 前后台数据对接测试 2 数据联调测试 1 整个软件系统的测试（前端部分） （1）指令 （2）常见问题 npm run build 1 js 路径问题 2 img 路径问题 3 favicon.ico 问题 4 IE9+ 兼容性问题 5 禁止生成 .map 文件 6 生成的文件大 同步到远程服务器 基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以 直接将这两个文件扔到服务端 脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/ index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’ 在 build/utils.js 文件中 ExtractTextPlugin extract 节点下，添加一 行：publicPath: ‘…/…/’ i.在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下， 添加一行：favicon: config.build.favicon ii.在 config/index.js 文件中 build 节点下，添加一行 ： favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS： favicon.ico 放在 src 目录下) i.由于 axios 是基于 promise 之上实现的，在 IE 下会有兼容性问题。 ii. 安装 babel-polyfill iii. 修改 build/webpack.base.conf.js 文件中 entry 节点 修改 config/index.js 中 productionSourceMap 值 productionSourceMap:false i.把不常改变的库放到index.html中，通过cdn引入 ii.使用vue路由的懒加载 （1）首页界面-风电场总览 （2）风电机组运行界面-数字风机 （3）风电机组运行界面-舱体视角 1 主界面 2 结合GIS地理信息系统 3 风电场可视化展示 4 为安全运行提供数据保障 1 以科技感风格展示风机的内部工艺构造 2 并结合两侧的2D数据面板 3 通过后台数据接入 4 实时监测并显示风机的最新动态 5 如遇到风机故障可进行及时发现与修复 6 实现管理实时化、可视化 1 采用风机三维模型进行进行全景展示 2 全局精准可视 3 打造物理风机与数字风机为一体的数字世界 4 以三维动态的形式展现风机内部机械结构 5 并模拟机械内部运作过程 6 让风机的局部状态和运行更加直观 7 实现所有风机的管理及相关监控信息一体协同 结合接口的不同类型和实时性要求，可以选择合适的接口实现方式 1 研究风机行业主流竞品的业务功能界面 2 将收集到的风机监测数据进行分组 3 对风机的信息、数据进行设计使之结构化 4 更加清晰、快捷的传达风机的各项监测数据 5 可以用Sketch、Axure等工具输出简易页面结构布局 1 基于前期调研和用户访谈内容 2 组织设计师结合各角色用户对产品的理解与定位 3 用Xmind、Sketch、Axure等工具输出产品信息架构图 1 通过搜索其他大型风能发电机可视化系统 2 检索出来的产品界面既有科技感风格的，又有写实风格的 3 结合实际功能模块和用户访谈需求 4 得出科技感的视觉风格比较符合目前的用户需求 1 本系统适用的用户群体 i.领导决策者 ii.风电机组运维人员 iii.风电场运营人员 iv.软件产品经理 a.注重系统的全局掌控 b.查看风电场的整体运营情况 c.查看发电量等关键信息 可以查看具体某个时段的发电量、风机在线数量等详细信息 a.关注风电机组的运行情况 b.能够及时查看报警信息，便于抢修 希望在设计交互方面能够让用户可以高效率、有效地浏览内容，更容易 找到信息 2 用户的实际需求成为产品设计的导向 i.功能需求 ii.操作特性 iii.知觉特征 iv.认知心理特征 v.日常工作中各自的使用场景 1 风机的状态监测以及报警提示 2 上网电量统计 3 风机在线数量 4 单机容量 5 装机容量统计 6 风机的三维模型可视化展示 1 用流程图梳理出风机管理系统的各个功能点 2 串联各角色在不同任务中涉及的页面信息、操作与反馈 3 形成线性流程关系 4 建立特定逻辑顺序的步骤地图 5 以预知风机可视化监测的最佳实现路径 1 用Sketch、Axure等工具绘制简洁的原型图呈现页面布局 2 模拟用户真实使用产品的场景和系统反馈 3 画面中间展示 4 顶部展示 i.发电量 ii.平均风速 iii.线路总成 iv.运行状态 v.功率因数 5 左侧展示 i.实时上网电量 ii.风机在线数量 iii.单机容量 iv.装机容量 6 右侧展示 i.风机状态 ii.设备信息 iii.发电功率/风速 iv.设备以及告警信息的实况信息 7 底部展示 i.风机开启 ii.数字风机 iii.舱体视角 iv.发电原理 风电场三维全景 1 上网电量统计 2 风机在线数量统计 3 单机容量统计 4 发电功率/风速统计 5 装机容量统计 1 统计图可以采用上下波动的动效来提升数据显示效果 2 风机内部电子元件进行分解展示 i.位移 ii.旋转 iii.翻转 iv.缩放 v.逐帧 vi.透明度 3 用AE，Principle，Flinto等工具输出微交互/动效效果 1 画面中间 2 顶部 3 左侧 4 右侧 i.风电机组三维可视化展示 ii.可以360度观察风机各个部位 iii.全面了解风机各个部件的位置和状态 i.发电量 ii.平均风速 iii.线路总成 iv.运行状态 v.功率因数 i.风机开启 ii.数字风机 iii.舱体开启 iv.发电原理 i.二维切换 ii.三维切换 1 左右两侧采用弧形控件 2 根据前期调研，将功能按钮进行归类 3 左侧放置风机动画的开关按钮和页面切换按钮 4 右侧放置二维视角和三维视角的切换按钮 1 风电机组数字孪生 2 应用三维仿真技术 3 采用位移，旋转等动效对风电机组内部结构进行全方位三维实景展现 4 可通过360度旋转操作浏览，直观、完整地呈现风机整体运行情况 竞品分析 颜色多以白色为主 分布地区 主色调 以海上、戈壁滩等风能资源丰富的地区为主 大海的深蓝色 风机组的白色 蓝色代表科技感 线性 功能区图标 轻巧简炼 具有一定的想象空间 不会对界面产生太大的视觉干扰 更能突出风机机组三维模型 以较为鲜艳的不同颜色进行区分 设计风格 蓝色科技感为主 风机呈现科幻风格 整体场景以2D面板、3D风机和3D地形场景相结合 功能模块面板 采用深蓝色 增加一点透明度 使面板与画面背景更好的融合 加强画面的整体感 折线图控件 浅绿色 在深色界面中能够更直观的展示 设备状态 蓝色代表运行正常 黄色代表设备告警 红色代表设备故障 设计风格 功能模块面板 设备状态 设计风格 左右两侧功能模块 机组模型 以蓝色为主 风机呈现科幻风格 整体场景以2D面板、3D风机和3D地形场景相结合 采用弧形设计 对中间风机机组模型呈包围形式 很好的装饰衬托作用 很好的突出了主体模型 特写视角 扇叶模型上添加了流动的光线特效 让整个模型更具科技感 将设计效果图切割成独立的小切片 规范命名并提供字体、字号、间距等标注信息 提供给开发人员进行开发 （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）项目制作的流程纲目 1 第一课-前期方案需求沟通-沟通项目制作内容效果与交互效果 2 第二课-前期资料准备-素材分析与采集筛选并处理准备 3 第三课-三维建模设计制作-1-范围场景外环境模型的制作 4 第四课-三维建模设计制作-2-环境内场景模型的制作 5 第五课-三维建模设计制作-3-场景内设备模型的制作 6 第六课-模型的规范整理-模型的分组原则、命名规范、坐标规范、材质 球、法线光滑组等整理 7 第七课-模型UV展开与复用-UV的展开规范与复用摆放原则 8 第八课-动画的处理准备-整理应用于设备动画的物体拆分和轴设置 9 第九课-材质效果设计制作-PBR材质贴图绘制流程 10 第十课-模型贴图文件的整理-贴图文件整理命名规范与贴入并导出对接 开发 （4）设计师必备软件安装教程 Blender Photoshop Substance Painter 2.[P3DM002]《前期方案需求沟通》 （1）项目类型及展示需求沟通 ①蓝色科技感的智慧山地风电场景 ②风电场三维全景监测 ③独立风机设备的分解展示与监测 （2）制作内容沟通和场景样式确认 ①起伏的山地场景 ②山地上阵列分布风机设备 ③独立展示风机外壳与机舱内设备 （3）交互形式和动画动效的确认 ①外部风机扇叶机舱的转向 ②内部机舱设备旋转制动与爆炸分解 （4）风格样式的确认 ①山地风电场景与风机外壳用蓝色线框科技感材质 ②风机机舱内部设备用写实质感材质 3.[P3DM003]《前期资料准备-素材分析与采集筛选》 （1）前期资料的分析利用 ①图像资料 i.山地场景的分析 ii.风机图像的分析 iii..风格参考的分析 ②文本资料 ③图纸资料 ⑤模型资料 ⑥视频资料 i.风机运动的分析处理 ii.风机视频的素材截取 (2)网上素材的补充筛选下载 ①图像素材 i.山地场景样式的补充下载 ii.风机样式的补充下载 ②文本素材 ③图纸素材 ⑤模型素材 ⑥视频素材 风机视频的补充下载 （3）资料素材的处理准备 ①图像资料的处理 ②视频图片的截图 i.山地场景样式的截图 ii.风机内外样式的截图 ③模型素材的下载 4.[P3DM004]《三维建模-范围场景外环境模型制作》 1 基本几何网格的创建编辑 i.山地模型的制作 ii.风机场阵列的布置 2 可编辑多边形命令的使用 3 地形插件的使用 4 地形起伏的雕刻 5 布线规则和处理方式 6 图像资料的造型分析实现 Next 5.[P3DM005]《三维建模-环境内场景模型的制作》 1 基本几何网格的创建编辑 i.风机外壳：扇叶轮毂的制作 2 可编辑多边形命令的使用 3 布线规则和处理方式 4 图像资料的造型分析实现 Next ii. 风机外壳：机舱的制作 iii. 风机外壳：底柱支架的制作 6.[P3DM006.1]《三维建模-设备模型制作-变桨器与主轴》 1 基本几何网格的创建编辑 i.机舱内部设备：变桨器的制作 2 可编辑多边形命令的使用 3 布线规则和处理方式 4 图像资料的造型分析实现 Next ii. 机舱内部设备：主轴的制作 iii. 机舱内部设备：齿轮机的制作 iv. 机舱内部设备：发电机的制作 v. 机舱内部设备：偏航器的制作 vi. 机舱内部设备：底架总成的制作 11.[P3DM008]《模型UV展开与复用》 （1）可复用模型的分析与整理 1 山地场景的UV展开与复用 2 风机外壳：扇叶轮毂、机舱、底柱支架的UV展开与复用 3 机舱内部设备：变桨器、主轴、齿轮机、发电机、偏航器、底架总成的 展开与复用 （2）UV切线规则 （3）UV摆放原则 （4）UV工具的使用 （5）UV效果的查看调整 （6）UV展开后模型的复用操作 Next 10.[P3DM007]《模型的规范整理》 （1）模型分组附加与命名规范 1 山地场景的整理 2 风机外壳的整理 3 机舱内部设备的整理 （2）材质球整理与命名规范 （3）模型法线与光滑组的检查设置 （4）模型的坐标设置与整理 Next 12.[P3DM009]《模型动画的处理准备与设置导出》 （1）需要制作动画部分的拆分 1 风机外壳机舱与风机轮毂的拆分坐标设置 2 机舱内部设备的拆分坐标设置 （2）需要制作动画部分的轴设置 （3）模型整理结束后的导出设置 Next 13.[P3DM010]《材质效果设计制作》 （1）模型导入SP软件的设置 1 山地场景的科技感绘制 2 风机外壳的科技感绘制 3 机舱内部设备的写实质感绘制 （2）场景贴图的烘焙 （3）层级界面与纹理界面的使用 （4）工具栏的操作使用 （5）材质球的属性调整使用 （6）配合Blender与PS导出调整贴图 （7）素材到出入与层级使用的规范 （8）科技感材质的绘制 （9）写实材质的绘制 （10）绘制结束后贴图纹理的设置导出 Next 14.[P3DM011]《模型贴图文件的整理提交》 （1）导出贴图的命名规范整理 智慧山地风机场景模型贴图材质球的整理 （2）贴图贴入模型材质球的通道设置 （3）模型检查与清理规范 （4）模型导出设置与贴图路径指认方法 （5）文件资料提交开发与对接流程 Next 提交给开发人员 13.[P3DD013]《three.js开发-场景切换功能的实现》 11.[P3DD011]《three.js开发-添加地形模型》 12.[P3DD012]《three.js开发-三维主功能入口实现》 10.[P3DD010]《three.js开发-添加风机模型》 知识点 1.[PTEST001]《风机可视化项目测试》 [PPR001]《风机项目打包与发布》 概念设计 数字风机页面设计 （1）需求整体梳理 （1）数字风机页面设计 1.[PREQ001]《风能项目需求讲解与分析》 4.[PUXD004]《开发人员如何与交互设计师工作对接》 5.[PUID005]《开发人员如何与UI设计师工作对接》 15.[P3DM012]《三维开发人员如何与三维建模师工作对接》 17.[P3DD017]《three.js开发-项目的Bug修改与功能优化 7.[P3DM006.2]《三维建模-设备模型制作-齿轮机》 8.[P3DM006.3]《三维建模-设备模型制作-发电机》 9.[P3DM006.4]《设备模型制作-偏航器与底架总成》