![](https://img-blog.csdnimg.cn/0cf10521d01d47c7a68b9bcebb0f6d31.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Threejs项目实战 - 智慧变电站
文章平均质量分 67
从0开始,依托“基于vue、Threejs的具体场景级电力综合运营管理平台”为项目背景,拆分业务模块,实战剖析讲解Threejs的功能,同时提供demo源码、3d模型作为数据补充。
threejscesium项目实战
这个作者很懒,什么都没留下…
展开
-
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 · 678 阅读 · 0 评论 -
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 · 804 阅读 · 0 评论 -
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 · 431 阅读 · 0 评论 -
8、智慧变电站 - Raycaster射线拾取设备对象并做辉光、Tween调整视角动画
前提前几篇文章基本讲的是如何主动展示,接下来讲的是用户触发的时候,模型给出什么样的反馈!模型添加点击事件给模型添加点击事件其实是在页面渲染完之后,给document绑定一个click事件,然后响应一个方法methods: { // 初始化 init() { this.createScene(); // 创建场景 this.createGui(); this.createRender(); // 创建渲染器 this.createLight(); // 创建.原创 2022-05-01 14:27:31 · 286 阅读 · 0 评论 -
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 · 681 阅读 · 0 评论 -
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 · 884 阅读 · 0 评论 -
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 · 1648 阅读 · 0 评论 -
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 · 689 阅读 · 0 评论 -
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 · 907 阅读 · 0 评论