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

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

前提

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

模型添加点击事件

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

methods: {
   
  // 初始化
  init() {
   
    this.createScene(
了解本专栏 订阅专栏 解锁全文 超级会员免费看
threejscesium项目实战
关注
专栏目录
订阅专栏
7、智慧变电站 - OutlinePass着色器实现设备告警辉光及展示告警设备详细信息
github_39988036的博客
05-02 727
创建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 简介
镜花水月
11-18 5390
Cesium 是一个开源 JavaScript 库，用于 3D , 2D , 2.5D 地图可视化
Cesium高阶学习十一、模型特效
程迷学习的博客
10-11 728
Cesium高阶学习十一、模型特效
Cesium简介及发展历史
纸飞机的旅行的博客
02-20 8005
Cesium简介及发展历史
three.js学习笔记(九)——光线投射
hongsir的博客
12-08 1879
光线投射(RayCaster)可以向特定方向投射光线，并测试哪些对象与其相交。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。 用法示例： 测试相机前方是否有一堵墙（障碍） 光线是否击中目标 当鼠标移动时测试是否有物体位于光标下方，以此模拟鼠标事件 当物体朝向特定某处时提示信息 初始场景 三个球体，然后我们要发射一条光线穿过这些球体看其是否与之相交 const object1 = new THREE.Mesh( new THREE.SphereBufferGeometry(0
Cesium基础教程
热门推荐
IT飞牛
04-20 1万+
Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。
QS30和SZ-8的辉光管pcb封装
08-19
标题提到的"QS30和SZ-8"是两种不同型号的辉光管，它们在设计和外观上有所差异。 QS30辉光管通常具有更加圆润的外形，这种设计可能使它在视觉上更具吸引力，适合那些追求柔和线条和流线造型的项目。QS30的电路板封装...
行业分类-设备装置-基于辉光等离子体正柱区制备石墨烯纸的装置.zip
08-27
"行业分类-设备装置-基于辉光等离子体正柱区制备石墨烯纸的装置"这一主题涉及的是一个独特的物理化学过程，它在新材料科学和纳米技术领域具有重要意义。 石墨烯是一种由单层碳原子紧密堆积形成的二维材料，因其卓越...
免费-基于STM32的IN-14 辉光钟设计(硬件/程序/App)-电路方案
04-20
本设计IN-14 辉光钟硬件方面详细介绍如下: *使用IN-14辉光管，四个氖灯显示时间冒号； *每个辉光管下面各安装一个全彩 LED； *单片机采用STM32F103VET6； *时钟芯片采用DS3231; *预留了18B20温度传感器焊点(程序中...
Cesium学习笔记
最新发布
weixin_57468559的博客
10-15 1324
Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子Cesium的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染。
webgl 实现的炫酷地球 基于three.js
05-26
webgl 实现的炫酷地球 基于three.js
Cesium实现UnrealBloom泛光效果
三维网格
09-15 4142
泛光（Bloom）是一种常用的后期处理特效，游戏中更是随处可见，这里直接上我们的效果图。 图1.UnrealBloom泛光效果 Cesium内置的bloom后期处理，是对全屏进行处理，还不能只针对选中的特定对象添加泛光效果，通过修改shader代码也可以实现。不过今天我们不做改进，而是引进three.js的UnrealBloomPass，在Cesium中实现一个新的泛光效果。 从UnrealBloomPass这个名字看，大概是说从Unreal Engine那里学来的吧，另外也是在名称上区别于辉..
最强大的、全球开源三维地理空间可视化地图-Cesium
FL06052146的博客
06-22 3656
矢量和几何图形时间动态可视化3D、2D 和 2.5D 哥伦布视图1、支持海量数据的高效渲染，包括地形、遥感影像、矢量数据等。232、支持时间序列动态数据的三维可视化，具备太阳、大气、云雾等地理环境要素的动态模拟和地形等要素的加载绘制。3、支持多种地理数据格式，如GeoJSON、KML、CZML等，便于集成各种地理信息数据源。4、实时渲染功能，可以在运行时动态加载和更新地理数据，实时反映地球上的变化。5、提供灵活的API和插件系统，允许开发人员定制和扩展功能。
cesium实现区域贴图及加载多个gif动图
qq_43474235的博客
12-24 1263
贴图，如果能够将gif动图进行解析，获得时间序列对应的每帧图片，然后按照时间序列动态更新Billboard的纹理，即可实现动图纹理效果。为此也找到了相对于好一点的第三方库。能够将gif转化为一帧帧图像，正好能够满足我们的需求！Cesium的Billboard支持单帧。2、cesium加载geoJSON并贴图。
【Cesium入门教程】第四课：Cesium 图元(Primitive)与高级特性
GIS前端嘉欣的博客
04-28 3623
geometryInstances属性接受一个Cesium.GeometryInstance对象，这个对象包含几何体的具体信息。geometry属性是一个Cesium.EllipseGeometry对象，它定义了一个椭圆的几何形状。center属性定义了椭圆的中心点，这里使用Cesium.Cartesian3.fromDegrees方法，接受经度和纬度，创建了一个三维笛卡尔坐标点。semiMinorAxis属性定义了椭圆的半短轴长度，数值为500,000.0。
three + cesium 深度融合
weixin_45162984的博客
10-13 2005
three + cesium 深度融合，并实现鼠标对three中的操作
Cesium gltf模型添加立体和反射效果（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-21 777
https://mp.weixin.qq.com/s/sBtj1o1s_4taVWbstYY3Jg
4292-webgl threejs 智慧城市 道路流光效果、建筑模型 辉光效果、特效demo源码
06-28
### 回答1： 4292-webgl threejs 是一个开源的 JavaScript 库，被广泛应用于 3D 图形的开发，其最大的特点是可以利用 WebGL 技术来让 3D 图形运行在 Web 上。在智慧城市建设中，道路流光效果和建筑模型辉光效果对于增强城市的科技感和时尚感是非常重要的。通过利用 4292-webgl threejs 技术，可以很方便地实现这些效果，让城市更加具有现代感和独特性。 在道路流光效果方面，可以通过使用 4292-webgl threejs 来模拟城市夜景的灯光效果，让道路上的流行车灯光流动起来，从而营造出繁华热闹的城市夜景。 在建筑模型辉光效果方面，通过使用 4292-webgl threejs，可以实现建筑物的多彩辉光效果，让城市更加鲜艳美丽，吸引游客和市民的目光。 此外，特效demo源码的使用可以让开发人员更加高效地完成上述效果的实现，加速智慧城市的建设和发展。 总之，利用 4292-webgl threejs 技术可以让城市更加现代化和美丽化，为智慧城市建设提供了强有力的技术支持。 ### 回答2： 智慧城市是一个新的城市发展模式，借助先进科技手段实现各类城市运行数据的收集、分析和处理，以促进城市治理水平的提升，提高城市居民生活质量。 在智慧城市建设中，道路流光效果和建筑模型辉光效果是比较常见的特效应用。通过对这些特效的实现，可以让城市在视觉上呈现出更具科技感和现代感的感觉。 其中，WebGL和threejs是比较常用的技术工具。WebGL是一种基于Web的3D图形库，通过它可以利用GPU的并行计算能力来实现高性能的图形渲染，包括模型渲染、纹理贴图、光照等。而threejs是基于WebGL的图形库，它提供了更高层次的封装，提供了一系列的3D渲染算法和工具类，可以方便地构建3D场景。 在实现道路流光效果时，我们可以利用threejs提供的ShaderMaterial来实现。ShaderMaterial是一种基于WebGL的材质类型，可以自定义渲染管线中的顶点、像素和片段着色器，并将其与threejs的对象进行关联。 而在实现建筑模型的辉光效果时，则可以利用threejs的BloomPass特效实现。BloomPass是threejs中的一种后处理特效，通过对明亮区域进行高斯模糊，增强高光和光晕效果，实现了辉光的效果。 当然，在实现这些特效时，也需要掌握一定的HTML、CSS和JS编程技术，才能完整地展示出智慧城市的效果。此外，为了让广大开发人员更方便地掌握三维图形编程技术，我们还可以通过源码分享的方式来促进交流和共享。 ### 回答3： 现代城市的发展已经不单单是一个单纯的建筑和交通设施的堆砌，更加注重城市的文化和氛围。智慧城市在其中的作用逐渐凸显。在智慧城市的建设中，道路流光和建筑模型的辉光效果是一种可以提升城市氛围的创新做法。这种效果通常是通过webGL和threejs技术来实现的。 webGL是一种基于OpenGL的高性能图形渲染API，旨在为Web进行硬件加速的3D和2D图形渲染，是目前Web引擎标准中的一部分。而threejs是一个JavaScript 3D库。该库使您能够轻松地创建并显示动画化的 3D 图形。threejs作为webGL API的一个包装器，提供了更高层次的抽象，简化了3D绘图的代码实现。 大多数WebGL开发者都应该很熟悉three.js和它的许多出色的功能和演示。对于JavaScript开发人员和设计师，使用three.js代替WebGL API能简化应用程序的堆栈。 在道路流光效果中，通过threejs中的粒子系统，可以快捷地实现流光的效果。这种效果将道路上原本普通的灯光变成了流动的流光线，给持续的夜晚增添了一个梦幻般的氛围。 而在建筑模型中，可以通过三维建模工具，如SketchUp、3DS Max等制作城市建筑物的3D模型。然后通过threejs的灯光工具和材质特效工具，为建筑物添加光效，达到辉光的效果。这种效果不仅仅美化了建筑，更可以为城市地标建筑物创造出一个高端、独特的形象。 当然，在threejs中，还有许多不同的特效demo可以使用。这些demo代码可以在github上找到，并在不同的场景中使用。比如裂纹特效、雾化特效、雨雪天特效等等。 总之，webGL和threejs提供的技术，为智慧城市的建设提供了新的思路和工具。道路流光和建筑模型的辉光效果可以提高城市的文化氛围，特效demo则可以让城市更加生动多彩。 我们期待未来这些特效技术和城市的智慧化建设可以越来越广泛的应用到各个领域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

threejscesium项目实战

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

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

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

打赏作者

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

抵扣说明：

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

余额充值