8、智慧变电站 - Raycaster射线拾取设备对象并做辉光、Tween调整视角动画

已于 2022-05-02 16:03:05 修改
阅读量347 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Threejs项目实战 - 智慧变电站 文章标签： 动画 javascript 前端
于 2022-05-01 14:27:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_39988036/article/details/124526680
本文介绍了如何在智慧变电站的前端应用中实现用户点击模型的反馈效果，包括使用THREE.Raycaster进行射线检测，添加模型的呼吸灯效果，以及通过TWEEN.js调整视角聚焦到被选中的模型。最后展示了点击模型后的动画过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前提

前几篇文章基本讲的是如何主动展示，接下来讲的是用户触发的时候，模型给出什么样的反馈！

模型添加点击事件

给模型添加点击事件其实是在页面渲染完之后，给document绑定一个click事件，然后响应一个方法

methods: {
   
   
  // 初始化
  init() {
   
   
    this.createScene(
了解本专栏 订阅专栏 解锁全文 超级会员免费看
0、项目介绍
github_39988036的博客
05-01 1015
从0开始，依托“基于vue、Threejs的具体场景级电力综合运营管理平台”为项目背景，拆分业务模块，实战剖析讲解Threejs的功能，同时提供demo源码、3d模型作为数据补充。 Threejs项目实战内容(带简介)：1、基础工作 - vue、threejs环境搭建（已完成）2、智慧变电站 - 地面、围墙绘制及动态贴图（已完成）3、智慧变电站 - 变压器等设备fbx、gltf模型加载（已完成）4、智慧变电站 - 外围电塔及电线绘制（已完成）5、智慧变电站 - 变压器等设备sprite标注（已完成）6、智慧
7、智慧变电站 - OutlinePass着色器实现设备告警辉光及展示告警设备详细信息
github_39988036的博客
05-02 798
创建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.
【Cesium 编程第一篇】概述、环境搭建、界面介绍
前端知识分享喵
04-09 1万+
Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebG
Cesium学习笔记
weixin_57468559的博客
10-15 7615
Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子Cesium的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染。
Cesium入门到实战
最新发布
weixin_43073383的博客
05-28 1841
Cesium是一个开源的JavaScript库，用于创建高性能的3D地球和地图可视化应用。它基于WebGL技术，支持跨平台运行，具有高精度地理空间数据展示能力，并内置时间轴功能。Cesium支持多种数据格式，可应用于GIS、智慧城市、应急指挥等场景。开发者可以通过CDN、npm或本地源码快速搭建开发环境，使用简单的HTML结构和JavaScript代码即可创建交互式3D地球应用。本文提供了基础入门指南，包括环境配置、Viewer初始化、基本功能实现以及常见问题解决方案，帮助开发者快速上手Cesium开发。
Cesium 简介
镜花水月
11-18 6238
Cesium 是一个开源 JavaScript 库，用于 3D , 2D , 2.5D 地图可视化
Cesium简介及发展历史
纸飞机的旅行的博客
02-20 8856
Cesium简介及发展历史
【一起学习三维GIS】Cesium基础功能和项目讲解
gis_witch的博客
12-03 3806
Cesium正式发布于 2014 年，是一个完全开源的基于 WebGL 的 JavaScript框架，无需安装插件即可创建具有最佳性能、精度、视觉质量和易用性的世界级三维地球影像和地图，并且具有丰富的开源社区内容。
three.js学习笔记(九)——光线投射
hongsir的博客
12-08 2022
光线投射(RayCaster)可以向特定方向投射光线，并测试哪些对象与其相交。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。 用法示例： 测试相机前方是否有一堵墙（障碍） 光线是否击中目标 当鼠标移动时测试是否有物体位于光标下方，以此模拟鼠标事件 当物体朝向特定某处时提示信息 初始场景 三个球体，然后我们要发射一条光线穿过这些球体看其是否与之相交 const object1 = new THREE.Mesh( new THREE.SphereBufferGeometry(0
最强大的、全球开源三维地理空间可视化地图-Cesium
FL06052146的博客
06-22 6761
矢量和几何图形时间动态可视化3D、2D 和 2.5D 哥伦布视图1、支持海量数据的高效渲染，包括地形、遥感影像、矢量数据等。232、支持时间序列动态数据的三维可视化，具备太阳、大气、云雾等地理环境要素的动态模拟和地形等要素的加载绘制。3、支持多种地理数据格式，如GeoJSON、KML、CZML等，便于集成各种地理信息数据源。4、实时渲染功能，可以在运行时动态加载和更新地理数据，实时反映地球上的变化。5、提供灵活的API和插件系统，允许开发人员定制和扩展功能。
Cesium基础教程
IT飞牛
04-20 1万+
Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。
Cesium实现UnrealBloom泛光效果
三维网格
09-15 4547
泛光（Bloom）是一种常用的后期处理特效，游戏中更是随处可见，这里直接上我们的效果图。 图1.UnrealBloom泛光效果 Cesium内置的bloom后期处理，是对全屏进行处理，还不能只针对选中的特定对象添加泛光效果，通过修改shader代码也可以实现。不过今天我们不做改进，而是引进three.js的UnrealBloomPass，在Cesium中实现一个新的泛光效果。 从UnrealBloomPass这个名字看，大概是说从Unreal Engine那里学来的吧，另外也是在名称上区别于辉..
three + cesium 深度融合
weixin_45162984的博客
10-13 2175
three + cesium 深度融合，并实现鼠标对three中的操作
Cesium gltf模型添加立体和反射效果（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-21 817
https://mp.weixin.qq.com/s/sBtj1o1s_4taVWbstYY3Jg
Cesium 点选Entity泛光（UnrealBloom泛光效果）
北京-giser的博客
07-12 1063
Cesium 点选Entity泛光
[cesium] 基于Cesium的动态泛光效果示例
热门推荐
啊嘞嘞的博客
07-28 2万+
抽空将之前的功能单独抽出来写成一个模块，方便单独调用，配合单个模块写了一些示例 可以兼容各个基于cesium底层库的三方框架，引入即可。 效果 动态泛光墙 泛光面 城市泛光线 其他示例 三维效果和功能 在线地址：传送门 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

threejscesium项目实战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值