three.js 智慧城市扫光效果

城市扫光效果在线预览

在这里插入图片描述

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import gsap from 'gsap'const size = {width: window.innerWidth,height: window.innerHeight
}
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, size.width / size.height, 0.1, 1000)
camera.position.set(5, 5, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true })
renderer.setSize(size.width, size.height)
renderer.setPixelRatio(window.devicePixelRatio * 1.2)
document.body.appendChild(renderer.domElement)
new OrbitControls(camera, renderer.domElement)
renderer.setAnimationLoop(() =>  renderer.render(scene, camera))//加载gltf
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath(`https://file.threehub.cn/` + 'js/three/draco/')
dracoLoader.preload()
const loader = new GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load(`https://file.threehub.cn/` + 'models/glb/build.glb', (gltf) => {const model = gltf.scenemodel.scale.set(0.01, 0.01, 0.01)scene.add(model)model.traverse((child) => {if (child instanceof THREE.Mesh) {child.material.dispose()child.material = modifyMaterial()}})
})// fbx
new FBXLoader().load(`https://threehub.cn/` + '/files/model/city.FBX', (object3d) => {scene.add(object3d)object3d.scale.set(0.001, 0.001, 0.001)object3d.traverse((child) => {if (child instanceof THREE.Mesh) {child.material.dispose()child.material = modifyMaterial()}})
})//混合着色
function modifyMaterial() {const material = new THREE.MeshBasicMaterial({color: '#28A1CC',// wireframe: true,opacity: 0.2,transparent: true,side: THREE.DoubleSide})material.onBeforeCompile = (shader) => {shader.fragmentShader = shader.fragmentShader.replace(/#include <dithering_fragment>/, `#include <dithering_fragment> //替换标记`)addColor(shader)addWave(shader)addLightLine(shader)addToTopLine(shader)}return material
}//  
function addColor(shader) {//   获取物体的高度差const uHeight = 1200shader.uniforms.uTopColor = {value: new THREE.Color('#e9eaef')}shader.uniforms.uHeight = {value: uHeight}shader.vertexShader = shader.vertexShader.replace('#include <common>',`#include <common>varying vec3 vPosition;`)shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',`#include <begin_vertex>vPosition = position;`)shader.fragmentShader = shader.fragmentShader.replace('#include <common>',`#include <common>uniform vec3 uTopColor;uniform float uHeight;varying vec3 vPosition;`)shader.fragmentShader = shader.fragmentShader.replace('//替换标记',`vec4 distGradColor = gl_FragColor;// 设置混合的百分比float gradMix = vPosition.y/uHeight;// 计算出混合颜色vec3 gradMixColor = mix(distGradColor.xyz,uTopColor,gradMix);gl_FragColor = vec4(gradMixColor,1);//替换标记`)
}/***添加扩散波* */
function addWave(shader) {// 设置扩散的中心点shader.uniforms.uSpreadCenter = { value: new THREE.Vector2(0, 0) }//   扩散的时间shader.uniforms.uSpreadTime = { value: -2000 }//   设置条带的宽度shader.uniforms.uSpreadWidth = { value: 40 }shader.fragmentShader = shader.fragmentShader.replace('#include <common>',`#include <common>uniform vec2 uSpreadCenter;uniform float uSpreadTime;uniform float uSpreadWidth;`)shader.fragmentShader = shader.fragmentShader.replace('//替换标记',`float spreadRadius = distance(vPosition.xz,uSpreadCenter);//  扩散范围的函数float spreadIndex = -(spreadRadius-uSpreadTime)*(spreadRadius-uSpreadTime)+uSpreadWidth;if(spreadIndex>0.0){gl_FragColor = mix(gl_FragColor,vec4(1,1,1,1),spreadIndex/uSpreadWidth);}//替换标记`)gsap.to(shader.uniforms.uSpreadTime, {value: 800,duration: 3,ease: 'none',repeat: -1})
}function addLightLine(shader) {//   扩散的时间shader.uniforms.uLightLineTime = { value: -1500 }//   设置条带的宽度shader.uniforms.uLightLineWidth = { value: 200 }shader.fragmentShader = shader.fragmentShader.replace('#include <common>',`#include <common>uniform float uLightLineTime;uniform float uLightLineWidth;`)shader.fragmentShader = shader.fragmentShader.replace('//替换标记',`float LightLineMix = -(vPosition.x+vPosition.z-uLightLineTime)*(vPosition.x+vPosition.z-uLightLineTime)+uLightLineWidth;if(LightLineMix>0.0){gl_FragColor = mix(gl_FragColor,vec4(0.8,1.0,1.0,1),LightLineMix /uLightLineWidth);}//替换标记`)gsap.to(shader.uniforms.uLightLineTime, {value: 1500,duration: 5,ease: 'none',repeat: -1})
}function addToTopLine(shader) {//   扩散的时间shader.uniforms.uToTopTime = { value: 0 }//   设置条带的宽度shader.uniforms.uToTopWidth = { value: 40 }shader.fragmentShader = shader.fragmentShader.replace('#include <common>',`#include <common>uniform float uToTopTime;uniform float uToTopWidth;`)shader.fragmentShader = shader.fragmentShader.replace('//替换标记',`float ToTopMix = -(vPosition.y-uToTopTime)*(vPosition.y-uToTopTime)+uToTopWidth;if(ToTopMix>0.0){gl_FragColor = mix(gl_FragColor,vec4(0.8,0.8,1,1),ToTopMix /uToTopWidth);}//替换标记`)gsap.to(shader.uniforms.uToTopTime, {value: 500,duration: 3,ease: 'none',repeat: -1})
}/*** 名称: 城市光影* 作者: 优雅永不过时 https://github.com/z2586300277* 参考来源：https://github.com/Fate-ui/WebglStudy */

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1134.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

vscode插件-08 Golang

vscode插件-08 Golang

文章目录 Go安装其他必须软件 Go Go语言环境&#xff0c;只需安装这一个插件。然后通过vscode命令下载安装其他go环境需要的内容。 程序调试&#xff0c;需要创建.vscode文件夹并编写launch.json文件。 安装其他必须软件 ctrlshiftp&#xff0c;调出命令面板&#xff0c;输入…
阅读更多...
开源一款前后端分离的企业级网站内容管理系统，支持站群管理、多平台静态化，多语言、全文检索的源码

开源一款前后端分离的企业级网站内容管理系统，支持站群管理、多平台静态化，多语言、全文检索的源码

大家好&#xff0c;我是一颗甜苞谷&#xff0c;今天分享一款前后端分离的企业级网站内容管理系统&#xff0c;支持站群管理、多平台静态化&#xff0c;多语言、全文检索的源码。 前言 在当今的数字化时代&#xff0c;企业网站和个人博客已成为信息传播和品牌建设的重要渠道。…
阅读更多...
数字身份发展趋势前瞻：去中心化身份

数字身份发展趋势前瞻：去中心化身份

去中心化身份&#xff08;Decentralized Identity&#xff0c;DID&#xff09;是数字身份管理领域的一个重要的发展趋势。通过区块链和分布式账本技术&#xff08;DLT&#xff09;&#xff0c;去中心化身份赋予用户更多对其个人信息的控制权&#xff0c;同时减少对传统中心化认…
阅读更多...
ELK-01-kibana安装

ELK-01-kibana安装

文章目录 前言一、下载解压二、修改配置三、启动四、浏览器打开网页总结 前言 elasticsearch安装请参考&#xff1a;https://blog.csdn.net/smdai/article/details/142461237 kibana文档&#xff1a;https://github.com/elastic/kibana/tree/v8.15.1 kibana下载&#xff1a;ht…
阅读更多...
SpringMvc参数传递

SpringMvc参数传递

首先对于post请求汉字乱码需要进行过滤器配置 普通参数传递 直接传递 客户端传递的属性名与我的bean中的函数参数名相同 映射传递RequestParam("XXX") 在我们方法参数中定义一个与客户端属性名一致 并绑定参数 POJO实体类传递 嵌套POJO传递 数组likes参数传递…
阅读更多...
IDEA切换窗口快捷键失效

IDEA切换窗口快捷键失效

问题描述&#xff1a; 在idea中&#xff0c;如果切换窗口的快捷键&#xff08;Alt Tab&#xff09;失效了&#xff0c;可以通过清除缓存的方式修复
阅读更多...
idea git 设置Local Changes窗口

idea git 设置Local Changes窗口

【File】—>【Settings】—>【Version Control】—>【Commit】&#xff0c;取消勾线【Use non-modal commit interface】
阅读更多...
无人机光电识别跟踪算法！

无人机光电识别跟踪算法！

一、算法概述 无人机光电识别跟踪算法结合了可见光和红外成像技术&#xff0c;通过光学系统收集目标的光学信息&#xff0c;并将其转换为电信号进行处理和分析。该算法能够实现对目标的快速、准确识别与追踪&#xff0c;极大提升了无人机在复杂环境下的作业能力和效率。 二、…
阅读更多...
hdl_graph_slam|Start|运行环境搭建|运行官方数据集

hdl_graph_slam|Start|运行环境搭建|运行官方数据集

开发环境 Ubuntu18.04melodic在Ubuntu18.04上安装版本为melodic的ROS开发环境 编译hdl_graph_slam mkdir -p hdl_graph_slam_ws/src cd hdl_graph_slam_ws catkin_make cd hdl_graph_slam_ws/src git clone https://github.com/koide3/hdl_global_localization.git git clon…
阅读更多...
从0到1构建一个RAG检索增强系统

从0到1构建一个RAG检索增强系统

RAG&#xff08;Retrieve Augment Generation&#xff0c;检索增强&#xff09;是“驯服”大语言模型的主要手段之一。它允许大语言模型在从固定的数据库中抽取相关内容的基础上生成答案&#xff0c;从而限制随意发挥&#xff0c;提升答案的可靠性。 核心组件&#xff1a; RA…
阅读更多...
第五篇: 使用Python和BigQuery进行电商数据分析与可视化

第五篇: 使用Python和BigQuery进行电商数据分析与可视化

使用Python和BigQuery进行电商数据分析与可视化 大数据分析对于电商业务的洞察至关重要。在这篇文章中&#xff0c;我们将使用Python结合Google BigQuery来分析电商数据集&#xff0c;以最畅销商品和平均订单价格最高的前10位客户为主题&#xff0c;展示如何通过数据可视化提供…
阅读更多...
无线无源振动温度传感器应用实例

无线无源振动温度传感器应用实例

本产品是专为设备故障监测、设备健康管理的应用场景设计的一款无源、无线振动温度复合传感器&#xff0c;可以对设备进行状态监测和故障诊断&#xff0c;实现设备的安全监测和预测性维护&#xff0c;避 免非计划停机&#xff0c;降低运维的时间和成本。 lora无线温振一体传感器…
阅读更多...
IDEA2024下安装kubernetes插件并配置进行使用

IDEA2024下安装kubernetes插件并配置进行使用

【1】安装插件 其实2024.2.3下默认已经安装了kubernetes插件&#xff0c;如果你发现自己IDEA中没有&#xff0c;在市场里面检索并下载即可。 【2】kubernetes配置 ① 前置工作 首先你要准备一个config文件和一个kubectl.exe 。 config文件类似如下&#xff1a; apiVersi…
阅读更多...
MATLAB/Simulink学习|在Simulink中调用C语言-03使用C Function 实现PI运算(使用模块自定义代码)

MATLAB/Simulink学习|在Simulink中调用C语言-03使用C Function 实现PI运算(使用模块自定义代码)

在前两篇博客中&#xff0c;介绍了如何使用C Function实现比例运算和积分运算&#xff0c;这篇博客将介绍如何实现PI运算&#xff0c;实际上是在前两篇博客的基础上完成的。 添加CFunction 端口和参数 共有两个输入端口&#xff0c;分别是参考Ref和反馈Fbk。一个输出端口Out。…
阅读更多...
#【YashanDB认证】#YCA的学习过程总结-之崖山数据库初体验

#【YashanDB认证】#YCA的学习过程总结-之崖山数据库初体验

概述 前段时间崖山数据库做推广活动&#xff0c;参加了yca的考试&#xff0c;为啥参加这个数据库厂商的学习呢&#xff0c;因为目前这个数据库最像Oracle&#xff0c;又听公司的前辈说呢&#xff0c;这个公司的前身是华为人出来做的数据库&#xff0c;华为人的精神呢&#xff0…
阅读更多...
UE 引入 IOS framework库的坑

UE 引入 IOS framework库的坑

一、我明明已经把framework库进行签名的却在 上传到开发者后台时一直报错 90034 签章遗失 或者 未签 这个问题我最近遇到 极其坑爹 我是这个情况 这是我的framework库的目录 关键就在这了 多出了这个文件 就影响了 上传到开发者后台 就报错 90034 将其删除就好 &…
阅读更多...
使用Service Worker实现离线应用

使用Service Worker实现离线应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Service Worker实现离线应用 引言 Service Worker 简介 注册和激活 Service Worker 注册 Service Worker 激活 Service Work…
阅读更多...
【Spring IoCDI】IoC容器，IoC注解，Bean的使用

【Spring IoCDI】IoC容器，IoC注解，Bean的使用

【Spring核心思想:IoC】 spring是一个开源框架&#xff0c;支持广泛的应用场景&#xff0c;简而言之:Spring是包含了众多工具方法的IoC容器 【IoC】 IoC的意思是「控制反转」&#xff0c;也就是说Spring是一个“控制反转”的容器 通用程序的实现代码&#xff0c;类的创建顺序…
阅读更多...
docker 可用镜像服务地址（2024.10.31亲测可用）

docker 可用镜像服务地址（2024.10.31亲测可用）

1.错误 Error response from daemon: Get “https://registry-1.docker.io/v2/” 原因&#xff1a;镜像服务器地址不可用。 2.可用地址 编辑daemon.json&#xff1a; vi /etc/docker/daemon.json内容修改如下&#xff1a; {"registry-mirrors": ["https://…
阅读更多...
200smart怎么通过4G网络与wincc通讯

200smart怎么通过4G网络与wincc通讯

smart的PLC距离监控室距离比较&#xff0c;要在监控中心使用wincc组态来远程控制&#xff0c;物联网技术已经非常成熟&#xff0c;通过4G无线网络部署速度最快&#xff0c;成本最低&#xff0c;且稳定性可靠性已经完全满足工控技术需求。那200smart是怎样通过4G网络与wincc通讯…
阅读更多...
最新文章

Copyright @ 2022~2023