Threejs项目实战

2,023 阅读1分钟

从0开始,依托“基于vue、Threejs的省市城市及具体场景级电力综合运营管理平台”为项目背景,拆分业务模块,实战剖析讲解Threejs的功能,同时提供demo源码、3d模型作为数据补充。 Threejs项目实战内容(带简介):

  1. 基础工作 - vue、threejs环境搭建
  2. 智慧变电站 - 地面、围墙绘制及动态贴图
  3. 智慧变电站 - 变压器等设备fbx、gltf模型加载
  4. 智慧变电站 - 外围电塔及电线绘制
  5. 智慧变电站 - 变压器等设备sprite标注
  6. 智慧变电站 - 地面行走指示流动动画特效及Tween动画实现漫游巡检
  7. 智慧变电站 - OutlinePass着色器实现设备告警辉光及展示告警设备详细信息
  8. 智慧变电站 - Raycaster射线拾取设备对象并做辉光、Tween调整视角动画
  9. 智慧变电站 - VideoTexture加载视频监控效果
  10. 智慧变电站 - 加载vue大屏元素(整体效果)
  11. 省市地图 - d3-geo类库对geojson坐标数据进行解析绘制中国地图及山东省市图
  12. 省市地图 - canvas、TextureLoader和自定义着色器实现变电站信息光柱标记功能
  13. 省市地图 - Points精灵、自定义着色器实现粒子飞线(整体效果)
  14. 地球图 - 绘制地球、轮廓流光效果、添加光晕轮廓效果并自转
  15. 地球图 - 添加飞线、扩散波及vue大屏元素(整体效果)

PS:想要此项目demo请添加wx:z13964122832

项目效果图

全球图.png

省市图.png

变电站-主场景.png

变电站-设备告警.png

变电站-漫游巡检.png

变电站-实时监控.png