当前位置：首页 > news >正文

three.js混合白色模型的智慧城市扫光效果

news 来源：原创 2025/5/24 6:20:21

https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=shader&id=cityBlendLight

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'const box = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 100000)camera.position.set(157, 545, -987)const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)renderer.setClearColor(0x000000, 0)renderer.setPixelRatio(window.devicePixelRatio * 2)new OrbitControls(camera, renderer.domElement)window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}box.appendChild(renderer.domElement)const dirLight = new THREE.DirectionalLight(0xffffff, 3.8)dirLight.position.set(83, 61, -183)dirLight.target.position.set(10, -11, -194)scene.add(dirLight)const pointLight = new THREE.PointLight(0xffffff, 2)pointLight.position.set(-60, 182, -98)scene.add(pointLight)let model = null// 加载模型
new FBXLoader().load(`https://threehub.cn/` + '/files/model/city.FBX', (object3d) => {scene.add(object3d)object3d.scale.set(0.04, 0.04, 0.04)object3d.position.set(224, -9, -49)model = object3dmodelBlendShader(object3d, box)})// 渲染
animate()function animate() {model && model.render?.()renderer.render(scene, camera)requestAnimationFrame(animate)}/* 混合着色 */
function modelBlendShader(model) {let materials = []model.traverse(c => c.isMesh && materials.push(c.material))materials = [... new Set(materials)]const uniforms = {innerCircleWidth: { value: 480, type: 'number', unit: 'float' },circleWidth: { value: 160, type: 'number', unit: 'float' },circleMax: { value: 940, type: 'number', unit: 'float' },circleSpeed: { value: 1.5, type: 'number', unit: 'float' },diff: { value: new THREE.Color(0x6edbe8), type: 'color', unit: 'vec3' },color3: { value: new THREE.Color(0x1919f9), type: 'color', unit: 'vec3' },center: { value: new THREE.Vector3(-1, 0, 0), type: 'position', unit: 'vec3' },intensity: { value: 4, type: 'number', unit: 'float' },isDisCard: { value: false, type: 'bool', unit: 'bool' },}const glslProps = {vertexHeader: `varying vec2 vUv;varying vec3 v_position;void main() {vUv = uv;v_position = position;`,fragHeader: Object.keys(uniforms).map(i => 'uniform ' + uniforms[i].unit + ' ' + i + ';').join('\n') + '\n' + 'varying vec3 v_position; varying vec2 vUv;\n',fragBody: `float dis = length(v_position - center);vec4 diffuseColor;if(dis < (innerCircleWidth + circleWidth) && dis > innerCircleWidth) {float r = (dis - innerCircleWidth) / circleWidth;#ifdef USE_MAPvec3 textureColor = texture2D(map, vUv).rgb;if(isDisCard && textureColor.r < 0.1 && textureColor.g < 0.1  && textureColor.b < 0.1 ) discard;#endifdiffuseColor = vec4( mix(diff, color3, r) * vec3(intensity, intensity, intensity)  , opacity);}else {if(isDisCard)  discard ;else diffuseColor = vec4( diffuse, opacity );}`}materials.forEach(material => {material.onBeforeCompile = (shader) => {Object.keys(uniforms).forEach((key) => shader.uniforms[key] = uniforms[key])shader.vertexShader = shader.vertexShader.replace(`void main() {`, glslProps.vertexHeader)shader.fragmentShader = shader.fragmentShader.replace(/#include <common>/, glslProps.fragHeader + '\n#include <common>\n')shader.fragmentShader = shader.fragmentShader.replace('vec4 diffuseColor = vec4( diffuse, opacity );', glslProps.fragBody)}material.needsUpdate = true})model.render = () => uniforms.innerCircleWidth.value < uniforms.circleMax.value ? uniforms.innerCircleWidth.value += uniforms.circleSpeed.value : uniforms.innerCircleWidth.value = 0}/*** 名称: 城市混合扫光* 作者: 优雅永不过时 https://github.com/z2586300277
*/

three.js混合白色模型的智慧城市扫光效果

three.js混合白色模型的智慧城市扫光效果 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyshader&idcityBlendLight import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { FBXLoader …...

编程日记 2025/5/24 6:20:21

【QT常用技术讲解】发送POST包(两种方式：阻塞方式及非阻塞方式)

前言 http/https(应用层)协议是广泛使用的网络通信协议。在很多与第三方API对接的场景中，通常是通过http/https协议完成，比如API对接时，通常要通过POST包获取access_token进行鉴权，然后再进行数据交互（本篇也包含有对接…...

编程日记 2025/5/20 6:46:13

基于Python大数据的电影可视化分析系统

标题:基于 Python 大数据的电影可视化分析系统内容:1.摘要本文介绍了一个基于 Python 大数据的电影可视化分析系统。该系统通过收集和分析大量电影数据，提供了对电影市场的深入洞察。文章首先介绍了系统的背景和目的，然后详细描述了系统的架构和功能。…...

编程日记 2025/5/22 6:03:43

Vue3：uv-upload图片上传

效果图： 参考文档： Upload 上传 | 我的资料管理-uv-ui 是全面兼容vue32、nvue、app、h5、小程序等多端的uni-app生态框架 (uvui.cn) 代码： <view class"greenBtn_zw2" click"handleAddGroup">添加班级群</vie…...

编程日记 2025/5/20 13:53:50

VBA技术资料MF243：利用第三方软件复制PDF数据到EXCEL

我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套，分为初级、中级、高级三大部分，教程是对VBA的系统讲解&#…...

编程日记 2025/5/20 2:21:07

redis使用注意哪些事项

1. 数据类型选择： • Redis支持多种数据类型，如字符串（String）、哈希（Hash）、列表（List）、集合（Set）、有序集合（Sorted Set）等。在选择…...

编程日记 2025/5/23 21:55:33

Go使用sqlx操作MySQL完整指南

# Go使用sqlx操作MySQL完整指南## 1. 安装依赖bash go get github.com/go-sql-driver/mysql go get github.com/jmoiron/sqlx2. 数据库基础操作 package mainimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx" )// 定…...

编程日记 2025/5/23 15:31:53

计算机基础复习12.23

ThreadLocal 线程隔离：ThreadLocal为每个线程提供了独立的变量副本，意味着线程之间不会相互影响，可以安全的在多线程环境中使用这些变量而不必担心数据竞争或同步问题 ThreadLocal的实现依赖于Thread类中的一个ThreadLocalMap字段&#xff…...

编程日记 2025/5/21 16:38:26

Jenkins介绍

Jenkins 是一款流行的开源自动化服务器，在软件开发和持续集成 / 持续交付（CI/CD）流程中发挥着关键作用。一、主要功能 1.持续集成（CI） （1）.自动构建：Jenkins 可以配置为监听代码仓…...

编程日记 2025/5/23 18:12:01

RK3588 , mpp硬编码yuv, 保存MP4视频文件.

RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ Ubuntu x64 架构, 交叉编译aarch64 FFmpeg mppRK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBRK3588 , mpp硬编码yuv, 保存MP4视频文件....

编程日记 2025/5/7 12:06:08

Delphi WebBrowser 基本操作与常见问题的解决方案

前言 WebBrowser 作为Delphi 常见的网络浏览控件，我这里整理了一些它的基本操作，遇到了一些问题，我梳理了一下并给出解决方案基本操作 WebBrowser1.GoHome; //到浏览器默认主页 WebBrowser1.Refresh; //刷新 WebBrowser1.GoBack; //后退 Web…...

编程日记 2025/5/22 13:35:58

【更新】LLM Interview

课程链接：BV1o217YeELo 文章目录 LLM基础相关1. LLMs概述2. 大语言模型尺寸3. LLMs的优势与劣势4. 常见的大模型分类5. 目前主流的LLMs开源模型体系有哪些（Prefix Decoder，Causal Decoder，Encoder-Decoder的区别是什么&#xff09…...

编程日记 2025/5/24 6:14:50

从零开始C++棋牌游戏开发之第一篇：C++ 游戏开发环境搭建与工具简介

前言：作者的感想每一次选择开始一项新技能的学习，总会让人感到既兴奋又有些许忐忑。C 游戏开发，尤其是针对棋牌类游戏规则实现的开发，更是一个有趣而充满挑战的领域。作为一名开发者，我深知面对 C 时的那种 "既…...

编程日记 2025/5/22 4:43:42

Hydrogen-Web 项目常见问题解决方案

Hydrogen-Web 项目常见问题解决方案 hydrogen-web Lightweight matrix client with legacy and mobile browser support [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/hy/hydrogen-web 项目基础介绍 Hydrogen-Web 是一个轻量级的 Matrix 客户端，专…...

编程日记 2025/5/19 14:43:33

LabVIEW中的“Synchronize with Other Application Instances“

在LabVIEW中，“Synchronize with Other Application Instances”是一个常见的提示或错误，通常出现在尝试并行运行多个LabVIEW实例时，特别是当你打开多个VI或项目时。这个问题可能影响程序的执行流程，导致不同实例之间的数据同步或…...

编程日记 2025/5/20 8:18:33

Hslcommunication通讯调用

Vs2022选择配置属性选择高级语言运行时(/clr);符合模式选择否;引用选择Hslcommunication.dll和HslCppExtension.dll; Demo #include <iostream> using namespace HslCommunication; using namespace HslCommunication::Core::Net; using namespace HslCommunication::Mo…...

编程日记 2025/5/21 19:59:31

渐进式 Web 应用程序：新的 FE 系统

在企业环境中，我们通常认为稳定的互联网连接是理所当然的。然而，现实世界的条件经常挑战这一假设，可能会中断关键业务运营。本文详细介绍了我们如何将传统的纯在线 ERP 系统转变为具有弹性、支持离线的解决方案的更可靠的系统。通过利用基于浏…...

编程日记 2025/5/15 8:51:07

安科瑞能源物联网平台在老旧小区用电安全改造中的应用与优势

安科瑞吕梦怡一、现状老旧住宅小区普遍存在建成时间久远的情况，其电力系统刚开始的设计标准已难以匹配当下居民不断攀升的用电需求。电力基础设施老化现象较为突出，例如电线的绝缘层出现破损、电表箱被锈蚀以及配电设备超期服役等问题比比皆是。小…...

编程日记 2025/5/21 17:37:10

[Effective C++]条款36-37 两个绝不

本文初发于 “天目中云的小站”，同步转载于此。条款36 : 绝不重新定义继承而来的non-virtual函数本条款很容易理解, 援引以前的条款就可以说明为什么 : 条款34中就提到过 : non-virtual函数意味着接口强制性实现继承, 它不应当被改变. 重新定义继承而来的non-…...

编程日记 2025/5/14 17:30:40

MySQL数据库——复制表数据与结构

命令格式 create table 表名 select 字段1,字段2 from 被复制表首先新建一个表，然后从被复制的表中选择字段复制到新表举例...

编程日记 2025/5/14 7:31:19

一文掌握如何编写可重复执行的SQL

一文掌握如何编写可重复执行的SQL 文章已同步个人博客：一文掌握如何编写可重复执行的SQL 背景先提出问题，这里的可重复执行是指什么？我们为什么要编写可重复执行的sql？ 可重复执行是指一条sql重复多次执行都不会报错&#xf…...

编程日记 2025/5/22 23:00:28

编译笔记：vs 中正在从以下位置***加载符号 C# 中捕获C/C++抛出的异常

加载符号解决方法： 进入VS—工具—选项----调试----符号，看右边有个“Microsoft符号服务器”，将前面的勾去掉，（可能还有删除下面的那个缓存）。参考 C# 中捕获C/C抛出的异常在需要捕捉破坏性异常的函数…...

编程日记 2025/5/18 14:45:50

[搜广推]王树森推荐系统——Deep Retrieval 召回

Deep Retrieval 简介 Deep Retrieval 是一种推荐系统框架，它将物品表示为路径（path），并在线上查找与用户最匹配的路径。这种方法与传统的双塔模型不同，后者通常将用户和物品表示为向量，并在线上进行最近邻…...

编程日记 2025/5/19 6:23:04

【深入解析蓝牙dumpsys bluetooth_manager 命令输出】

了解蓝牙的工作状态以及如何在测试中利用这些信息。 1. Bluetooth Status（蓝牙状态） enabled: true state: ON address: 00:00:00:00:43:36 name: 小米手机 time since enabled: 00:15:18.492enabled: true — 蓝牙功能已启用。state: ON — 蓝牙目前是开启状态。address: …...

编程日记 2025/5/19 14:12:40

【三】Fast-DDS hello world!

编译hello world # 进入到源码目录 mkdir -p examples/cpp/hello_world/build cd examples/cpp/hello_world/build cmake .. && make -j4运行publisher ./hello_world publisher 运行subscriber ./hello_world subscriber 结果...

编程日记 2025/5/22 2:56:18

将HTML转换为PDF：使用Spire.Doc的详细指南(一) 试用版

目录引言 1. 为什么选择 Spire.Doc？ 1.1 主要特点 1.2 适用场景 2. 准备工作 2.1 引入 Spire.Doc 依赖 2.2 禁用 SSL 证书验证 3. 实现功能 3.1 主类结构 3.2 代码解析 4. 处理图像 5. 性能优化 5.1 异步下载图像示例代码 5.2 批量处理优化示例代…...

编程日记 2025/5/22 5:00:44

【物联网技术与应用】实验10：蜂鸣器实验

实验10 蜂鸣器实验【实验介绍】蜂鸣器是音频信号装置。蜂鸣器可分为有源蜂鸣器和无源蜂鸣器。【实验组件】 ● Arduino Uno主板* 1 ● USB数据线* 1 ● 有源蜂鸣器* 1 ● 无源蜂鸣器* 1 ● 面包板* 1 ● 9V方型电池* 1 ● 跳线若干【实验原理】如图所示&#x…...

编程日记 2025/5/22 13:36:29

【python高级】342-TCP服务器开发流程

CS模式：客户端-服务端模式 TCP客户端开发流程介绍（五步）（C端） 1.创建客户端套接字对象 2.和服务端套接字建立连接 3.发送数据 4.接收数据 5.关闭客户端套接字 TCP服务端开发流程（七步）&#xf…...

编程日记 2025/5/19 15:44:48

C++开源项目 VLC 源代码的交叉编译以及库的裁剪方法详解

目录 1、VLC简介 2、VLC编译环境配置 2.1、编译环境 2.2、编译环境配置 2.2.1、下载安装MSYS2 2.2.2、下载mingw-w64 3、编译VLC 4、VLC库的裁剪 5、总结 C软件异常排查从入门到精通系列教程（核心精品专栏，订阅量已达600多个，欢迎订…...

编程日记 2025/5/19 20:09:47

draw.io 导出svg图片插入word后模糊（不清晰）的解决办法

通常我们将图片从draw.io导出为svg格式后插入word, 会发现字体不清晰，特别是使用宋体时，折腾了半天，得到如下办法： 方法1: 在draw.io中导出pdf文件，使用 PDF转SVG转换器 - SVGConverter 将其转换为svg, 完美呈现。 …...

编程日记 2025/5/21 10:53:39

详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用

目录详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用一、什么是柯里化？ 1、原理解析 2、一个直观的例子二、如何实现柯里化？ 1、底层实现 2、工作原理解析 3…...

编程日记 2025/5/23 2:33:14

Cesium材质——Material

简介： Cesium.Material对象的目的，就是生成一段名称为czm_getMaterial的函数（示例代码如下）， 这个czm_getMaterial函数，是shader代码，会被放到片元着色器中使用。 czm_material czm_getMater…...

编程日记 2025/5/21 21:56:55

《点点之歌》“意外”诞生记

世界是“点点”的，“点点”是世界的。 (笔记模板由python脚本于2024年12月23日 19:28:25创建，本篇笔记适合喜欢诗文的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网：https://www.python.org/ Free：大咖免费“圣经”教程《 …...

编程日记 2025/5/21 21:55:04

统计某个文件中某个字符串出现的次数

要统计某个文件中某个字符串出现的次数，有多种方法可以实现。以下是几种常用且高效的 Linux 命令方法： 方法一：使用 grep 和 wc 命令示例： grep -o "字符串" 文件名 | wc -l说明： grep -o "字符串&…...

编程日记 2025/5/23 10:18:43

C++简明教程（文章要求学过一点C语言）（3）

一、编程工具大揭秘——IDE 当我们准备踏入 C 编程的奇妙世界时，首先要认识一个重要的“魔法盒子”——集成开发环境（IDE）。IDE 就像是一个全能的编程工作室，它把我们写代码所需要的各种工具都整合到了一起，让编程这件…...

编程日记 2025/5/20 2:35:15

Springboot高并发乐观锁

Spring Boot分布式锁的主要缺点包括但不限于以下几点： 性能开销：使用分布式锁通常涉及到网络通信，这会引入额外的延迟和性能开销。例如，当使用Redis或Zookeeper实现分布式锁时，每次获取或释放锁都需要与这些服务进行交…...

编程日记 2025/5/21 7:32:23

编译原理复习---正则表达式+有穷自动机

适用于电子科技大学编译原理期末考试复习。 1. 正则表达式正则表达式（Regular Expression，简称regex或regexp）是一种用于描述、匹配和操作文本模式的强大工具。它由一系列字符和特殊符号组成，这些字符和符号定义了一种搜索模式…...

编程日记 2025/5/20 13:38:20

如何使用ChatGPT辅助文献综述，以及如何进行优化？一篇说清楚

目录 1.写在开头 2.ChatGPT 3.提示词研究 4.第一轮研究 5.第二轮研究 6.生成文献综述嘿宝子们！今天我们要聊的，可是个让学术圈都为之振奋的话题——ChatGPT辅助文献综述。这个教育界的新宠儿，已经不满足于仅仅在学习和教学中露两手了&…...

编程日记 2025/5/20 20:55:29

ZZNUOJ 1601：字母序号(C/C++/Java)

题目描述我们把字母 A-Z 分别编号为 1-26，现在给你一个大写字母，输出这个大写字母的序号。输入输入一个大写字母输出输出这个大写字母的序号样例输入 C 样例输出 3 常见的ASCII值 ASCII表中可以记下部分特殊的值（十进制）（字母从A到Z，从a到z，ASCII值依次递增）...

编程日记 2025/5/15 7:17:22

[CISCN 2021初赛]rsa

[CISCN 2021初赛]rsa 源代码： from flag import text,flag import md5 from Crypto.Util.number import long_to_bytes,bytes_to_long,getPrimeassert md5.new(text).hexdigest() flag[6:-1]msg1 text[:xx] msg2 text[xx:yy] msg3 text[yy:]msg1 bytes_to_lo…...

编程日记 2025/5/21 14:37:15

Electron -- Electron Fiddle（一）

Electron Fiddle 是一个由 Electron 团队开发的开源工具，它允许开发者快速创建、运行和调试 Electron 应用。这个工具提供了一个简洁的界面，使用户无需配置复杂的开发环境，就能快速体验和学习 Electron。强烈建议将其安装为学习工具。学习它…...

编程日记 2025/5/19 22:29:43

java 实现排序的几种方式

冒泡排序(Bubble Sort) 基本原理： 它重复地走访要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。示例代码如下： 登…...

编程日记 2025/5/20 1:37:29

【机器学习与数据挖掘实战】案例06：基于Apriori算法的餐饮企业菜品关联分析

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈机器学习与数据挖掘实战 ⌋ ⌋ ⌋ 机器学习是人工智能的一个分支，专注于让计算机系统通过数据学习和改进。它利用统计和计算方法，使模型能够从数据中自动提取特征并做出预测或决策。数据挖掘则是从大型数据集中发现模式、关联…...

编程日记 2025/5/18 18:07:07

陀螺仪选型

瑞芬官网 datasheet 陀螺仪、IMU姿态仪、陀螺转角仪、三轴姿态仪、三轴陀螺仪 mid360 imu ICM-40609-D TDK InvenSense | Mouser https://product.tdk.com/system/files/dam/doc/product/sensor/mortion-inertial/imu/data_sheet/ds-000330_icm-40609-d_v1.2.pdf...

编程日记 2025/5/16 9:35:35

【超详细实操内容】django的身份验证系统之限制用户访问的三种方式

目录 1、使用request.user.is_authenticated属性 2、装饰器login_required 3、LoginRequiredMixin类通常情况下，网站都会对用户限制访问，例如，未登录的用户不可访问用户中心页面。Django框架中使用request.user.isauthenticated属性、装饰器loginrequired和LoginRequire…...

编程日记 2025/5/20 5:42:41

Pika Labs技术浅析（六）：自动化技术

Pika Labs 的自动化技术旨在通过工作流引擎和自动化警报系统，帮助用户实现业务流程的自动化和实时监控。一、自动化技术模块概述 Pika Labs 的自动化技术模块旨在通过以下两个核心组件，实现业务流程的自动化和实时监控： 1.工作流引擎&…...

编程日记 2025/5/23 10:24:00

springboot471基于协同过滤算法商品推荐系统(论文+源码)_kaic

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装协同过滤算法商品推荐系统软件来发挥其高效地信息处理的作用…...

编程日记 2025/5/20 4:11:54

【YashanDB知识库】jdbc查询st_geometry类型的数据时抛出YAS-00101错误

本文内容来自YashanDB官网，原文内容请见 https://www.yashandb.com/newsinfo/7802956.html?templateId1718516 问题现象某客户的业务在通过YashanDB jdbc驱动查询含有st_geometry列的数据时，报如下异常：YAS-00101 cannot allocate 0 byte…...

编程日记 2025/5/22 10:13:20

ajax中get和post的区别，datatype返回的数据类型有哪些？web开发中数据提交的几种方式，有什么区别。

在 Web 开发中，GET 和 POST 是两种常见的 HTTP 请求方法，它们有一些显著的区别。此外，datatype 参数在 jQuery 的 ajax() 请求中指定了预期的响应数据类型。接下来，我会详细解释这些问题。 1. GET 和 POST 请求的区别 GET 请求和…...

编程日记 2025/5/21 19:26:33

EKF异常状态自检

https://wenku.csdn.net/column/25p1jkf4vz https://www.zhihu.com/question/293038308/answers/updated https://zhuanlan.zhihu.com/p/12011086094 常用数据分析方法：方差分析及实现！-腾讯云开发者社区-腾讯云方差分析的七种类型_双因素方差分析自变…...

编程日记 2025/5/21 10:35:14

相关文章：