- 博客(13)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 2、地球图 - 添加飞线、扩散波及vue大屏元素（整体效果）
书接上回，我们在上文中的基础之上添加飞线、扩散波来表示具体业务 - 资金的流向，再添加一些大屏元素让整个页面看起来更加成型。飞线绘制飞线工具方法：createFlyLine.js此工具主要分为三个功能点drawFlyLine：接收scene实体、地图url、具体发送点和接收点数据信息，生成骨架线和飞线添加到scene上，并且把这些group添加到scene上外加return出去供外部使用。import { util } from './util.js';drawFlyLine(scen
2022-05-02 16:22:19
1547
原创 1、地球图 - 绘制地球、轮廓流光效果、添加光晕轮廓效果并自转
我们实现标题中的效果基本分为接下来的这些功能点，如果看过“Threejs项目实战 - 省市图”，会对这些功能有一定的了解，特别是开启辉光效果和后续的飞线效果。地球绘制地球实体加载地球贴图纹理import earthChartletImage from './images/earth-chartlet.jpg';let texture = new THREE.TextureLoader()texture.load( earthChartletImage, ( texture ) =>
2022-05-02 16:19:31
1626
1
原创 0、全球图目录
书接“Threejs项目实战 - 省市图”，大屏场景下省市的变电站分布及具体信息业务搞完了，然而然而然而很多领导都想再上一层，我要看一下高大上的全球分析图，那么我们接下来要做的就是这一块业务。Threejs项目实战内容(带简介)：1、地球图 - 绘制地球、轮廓流光效果、添加光晕轮廓效果并自转2、地球图 - 添加飞线、扩散波及vue大屏元素（整体效果）PS：项目源码及3d模型会在第一篇文章给出下载地址，或者添加wx：z13964122832备注“全球图源码”效果图...
2022-05-02 16:17:16
429
原创 7、智慧变电站 - OutlinePass着色器实现设备告警辉光及展示告警设备详细信息
创建OutlinePass通道先在vue外层声明几个变量import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';import { OutlinePass } from 'three/examples/jsm/postprocessing/Ou.
2022-05-02 16:02:13
766
原创 0、省市图目录
书接“Threejs项目实战 - 智慧变电站”，具体场景下的变电站做完了，实际业务场景还有许多是整个省市的概览图，我们接下来要做的就是这一块业务。Threejs项目实战内容(带简介)：1、省市地图 - d3-geo类库对geojson坐标数据进行解析绘制中国地图及山东省市图2、省市地图 - canvas、TextureLoader和自定义着色器实现变电站信息光柱标记功能3、省市地图 - Points精灵、自定义着色器实现粒子飞线（整体效果）PS：项目源码及3d模型会在第一篇文章给出下载地址，或者添加wx
2022-05-02 15:51:41
626
1
原创 10、智慧变电站 - 加载vue大屏元素（整体效果）
这一篇文章非常简单，但是也非常出效果阅读前面几篇文章，都可以看到有顶部、左侧、右侧的面板，主要我不会录gif图片，大屏元素面板还有一些动态加载的效果。vue的transition标签Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡；在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to。我们正好使用这个特性来达到面板进入
2022-05-02 13:46:16
877
原创 9、智慧变电站 - VideoTexture加载视频监控效果
dom元素添加video标签后续如果想做在线直播时，也可以使用其他播放器代替<video id="video" autoplay loop muted > <source :src="videoUrl"></video><style lang="scss" scoped> #video { position: absolute; width: 0; .
2022-05-01 14:28:06
489
原创 8、智慧变电站 - Raycaster射线拾取设备对象并做辉光、Tween调整视角动画
前提前几篇文章基本讲的是如何主动展示，接下来讲的是用户触发的时候，模型给出什么样的反馈！模型添加点击事件给模型添加点击事件其实是在页面渲染完之后，给document绑定一个click事件，然后响应一个方法methods: { // 初始化 init() { this.createScene(); // 创建场景 this.createGui(); this.createRender(); // 创建渲染器 this.createLight(); // 创建.
2022-05-01 14:27:31
329
原创 4、智慧变电站 - 外围电塔及电线绘制
创建高压电塔创建的电塔模型需要在场地外围，所有位置和大小都要做一些调整![image.png](https://img-blog.csdnimg.cn/img_convert/3b54efc6a4f7d6d61fb4600dceb01cec.png#clientId=u0da66bc7-9dc8-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=861&id=u186b206a&margin=[.
2022-05-01 14:25:18
798
原创 3、智慧变电站 - 变压器等设备fbx、gltf模型加载
个人获得模型的途径sketchfab（常用）：可下载免费的3d模型，可以下载很多格式的模型![image.png](https://img-blog.csdnimg.cn/img_convert/e9c3705b2b8b93b7dd4228d6bf56dbb2.png#clientId=u2d6bdc38-44b7-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=969&id=u621db7bd.
2022-05-01 14:24:38
991
1
原创 2、智慧变电站 - 地面、围墙绘制及动态贴图
创建基础场景、摄像头等threejs相关类库引入import * as THREE from "three";import { Clock, GridHelper } from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";impo.
2022-05-01 14:19:53
1818
原创 1、基础工作-vue、threejs环境搭建
开发之前，我们要做一些基本的工作。前提知识基础js教程：https://www.w3school.com.cn/js/index.asphtml教程：https://www.w3school.com.cn/html/index.aspcss教程：https://www.w3school.com.cn/css/index.aspvue2教程：https://cn.vuejs.org/index.htmlvue-element-admin教程：https://panjiachen.github.io/v
2022-05-01 14:19:05
746
原创 0、项目介绍
从0开始，依托“基于vue、Threejs的具体场景级电力综合运营管理平台”为项目背景，拆分业务模块，实战剖析讲解Threejs的功能，同时提供demo源码、3d模型作为数据补充。Threejs项目实战内容(带简介)：1、基础工作 - vue、threejs环境搭建（已完成）2、智慧变电站 - 地面、围墙绘制及动态贴图（已完成）3、智慧变电站 - 变压器等设备fbx、gltf模型加载（已完成）4、智慧变电站 - 外围电塔及电线绘制（已完成）5、智慧变电站 - 变压器等设备sprite标注（已完成）6、智慧
2022-05-01 14:14:38
979
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人