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

学习threejs，使用粒子实现下雪特效

news 2026/2/8 7:55:27

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.Points简介
      • 1.11 ☘️THREE.PointsMaterial点云材质
  • 二、🍀使用粒子实现下雪特效
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用粒子实现下雪特效，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Points简介

当我们大量使用粒子时，会很快遇到性能问题，导致页面卡顿，这是因为每添加一个粒子就是一个模型，因为每个粒子对象分别由THREE.js进行管理，所以，three.js提供了另一种方式来处理大量粒子，那就是使用THREE.Points。通过THREE.Points，three.js不再需要管理大量的单个粒子对象，而只需管理THREE.Points实例即可。
创建方法：
var cloud = new THREE.Points(geom, material);
geom：THREE.Geometry对象，用于创建粒子对象
material：THREE.PointCloudMaterial 粒子云材质

1.11 ☘️THREE.PointsMaterial点云材质

概念：
设置所有粒子的大小，颜色，顶点颜色，透明度，是否根据相机距离的远近改变大小等属性。
var material = new THREE.PointsMaterial({size: 4, vertexColors: true, color: 0xffffff});
属性：
color： PointCloud中所有的粒子的颜色都相同，除非设置了vertexColors且该几何体的colors属性不为空，才会使用colors颜色，否则都使用该属性。
map：在粒子上应用某种材质。
size：粒子的大小。
sizeAnnutation：false，无论相机的位置，所有的粒子大小一致；true，离相机近的粒子更大一些，离相机越远越小。
vetexColors：true，且该几何体的colors属性有值，则该粒子会舍弃第一个属性–color，而应用该几何体的colors属性的颜色。
opacity：粒子透明度。
transparent：是否透明。
blending：渲染粒子时的融合模式。
fog：是否受场景的雾化影响。

二、🍀使用粒子实现下雪特效

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，定义相机方向lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，scene添加平行光源。
  • 5、加载几何模型：添加THREE.AxesHelper坐标辅助工具，scene场景中加入坐标辅助工具。
  • 6、加入controls控制，加入gui控制，定义gui的redraw重绘方法，方法中生成15000个随机粒子，使用THREE.PointMaterial点云材质，该材质使用“snow.png”图片作为纹理，创建render下雨动画，使用requestAnimationFrame执行下雨动画。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn32(使用粒子实现下雪特效)</title><script src="lib/threejs/91/three.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(new THREE.Color(0xffffff))renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200)camera.position.set(0, 20, 100)camera.lookAt(new THREE.Vector3(0, 30, 0))}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x404040))light = new THREE.DirectionalLight(0xffffff)light.position.set(1, 1, 1)scene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(500)scene.add(helper)}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = truecontrols.autoRotate = false}var render = () => {//产生雨滴动画效果var vertices = cloud.geometry.verticesvertices.forEach(function (v) {v.y = v.y - (v.velocityY)v.x = v.x - (v.velocityX) * .5if (v.y <= -60) v.y = 60if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1})//设置实时更新网格的顶点信息cloud.geometry.verticesNeedUpdate = truerenderer.render(scene, camera)}var gui, cloudvar initGui = () => {gui = {"size": 2,"transparent": true,"opacity": 0.6,"vertexColors": true,"color": 0xffffff,"sizeAttenuation": true,"rotateSystem": false,redraw: function () {if (cloud) {scene.remove(cloud)}createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color)//设置是否自动旋转controls.autoRotate = gui.rotateSystem}}var datGui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);datGui.add(gui, 'size',0.1,10).onChange(gui.redraw)datGui.add(gui, 'transparent').onChange(gui.redraw)datGui.add(gui, 'opacity', 0, 1).onChange(gui.redraw)datGui.add(gui, 'vertexColors').onChange(gui.redraw)datGui.addColor(gui, 'color').onChange(gui.redraw)datGui.add(gui, 'sizeAttenuation').onChange(gui.redraw)datGui.add(gui, 'rotateSystem').onChange(gui.redraw)gui.redraw()}var createParticles = (size, transparent, opacity, vertexColors, sizeAttenuation, color) => {var texture = new THREE.TextureLoader().load('data/img/snow.png')var geom = new THREE.Geometry()var material = new THREE.PointsMaterial({size: size,transparent: transparent,opacity: opacity,vertexColors: vertexColors,sizeAttenuation: sizeAttenuation,color: color,map: texture,depthTest: false  //设置解决透明度有问题的情况})var range = 120for (var i = 0; i < 15000; i++) {var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2)particle.velocityY = 0.1 + Math.random() / 5particle.velocityX = (Math.random() - 0.5) / 3geom.vertices.push(particle)var color = new THREE.Color(0xffffff)//.setHSL ( h, s, l ) h — 色调值在0.0和1.0之间 s — 饱和值在0.0和1.0之间 l — 亮度值在0.0和1.0之间。 使用HSL设置颜色。//随机当前每个粒子的亮度//color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);geom.colors.push(color)}cloud = new THREE.Points(geom, material)cloud.verticesNeedUpdate = truescene.add(cloud)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()render.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initStats()initControls()initGui()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，使用粒子实现下雪特效

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.Points简介1.11 ☘️…...

编程日记 2024/10/29 15:13:37

unity3d——Time

在Unity3D中&#xff0c;Time类是一个非常重要的工具类&#xff0c;它提供了一系列与时间相关的属性和方法&#xff0c;帮助开发者在游戏中实现各种时间相关的操作。以下是一些Time类常用的方法及其示例&#xff1a; 一、常用属性 Time.time 含义&#xff1a;表示从游戏开始到…...

编程日记 2024/10/29 15:12:36

天地图实现海量聚合marker--uniapp后端详细实现

本文章详细的讲解了前后端代码来 实现uniapp天地图功能的实现 以及 后端海量数据的聚合查询 和网格算法实现思路。 并对当数据量增加和用户频繁请求接口时可能导致服务器负载过高做了前后端优化。 前端uniapp&#xff1a; 实现了天地图的行政区划边界/地图切换/比例尺/海量数…...

编程日记 2024/10/29 15:11:35

Bug | 项目中数据库查询问题

问题描述 理论上&#xff0c;点击查询后&#xff0c;表头应当显示中文。而不是上面的在数据库中的表头【如上图示】 正常点击查询后&#xff0c;如果没有输入值&#xff0c;应当是查询所有的信息。 原因分析&#xff1a; 这里是直接使用SELECT * 导致的。例如&#xff1a; S…...

编程日记 2024/10/29 15:10:33

C++入门基础知识129—【关于C 库函数 - time()】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 库函数 - time()的相关内容&#xff0…...

编程日记 2024/10/29 15:09:32

大文件秒传，分片上传，断点续传

大文件分片上传 一 功能描述 1.文件通过web端分片多线程上传到服务端&#xff0c;然后web端发起分片合并&#xff0c;完成大文件分片上传功能 2.上传过的大文件&#xff0c;实现秒传 3.上传过程中&#xff0c;服务异常退出&#xff0c;实现断点续传 二 流程图 三 代码运行…...

编程日记 2024/10/29 15:08:30

多生境扩增子探秘：深度溯源与多样性解析

分析微生物组数据的组成结构的一个主要挑战是确定其潜在来源。在微生物来源分析中&#xff0c;随机森林、SourceTracker和FEAST都有较广泛应用。今天&#xff0c;小编就带大家看一篇发表在《iMeta》的文章&#xff0c;使用溯源技术追踪微生物的来源与去向&#xff0c;揭示生物在…...

编程日记 2024/10/29 15:06:18

Selenium4自动化测试常用函数总结，各种场景操作实战

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 seleninum作为自动化测试的工具&#xff0c;自然是提供了很多自动化操作的函数&#xff0c;下面列举下比较常用的函数&#xff0c;更多可见官方文档&#xff1a;…...

编程日记 2024/10/29 15:05:14

图像生成新范式：智源推出全能视觉生成模型 OmniGen

大型语言模型&#xff08;LLM&#xff09;的出现统一了语言生成任务&#xff0c;并彻底改变了人机交互。然而&#xff0c;在图像生成领域&#xff0c;能够在单一框架内处理各种任务的统一模型在很大程度上仍未得到探索。近日&#xff0c;智源推出了新的扩散模型架构 OmniGen&am…...

编程日记 2024/10/29 15:04:13

实现RPC接口的demo记录

1.Thrift RPC 接口实现 Demo Service public class DemoServiceImpl implements DemoService.Iface {private static final Logger logger LoggerFactory.getLogger(DemoServiceImpl.class);Overridepublic String sayHello(Context context, String msg) throws TException …...

编程日记 2024/10/29 15:02:08

Python期末题目 | 期末练习题【概念题+代码】

一、前言 Python 是一门功能强大且易于学习的编程语言&#xff0c;在高校中被广泛用作教学语言。Python 的期末考试通常会包含基础知识和编程实践&#xff0c;以考察学生的理解与应用能力。本文整理了一套 Python 期末练习题&#xff0c;包括选择题、填空题、判断题和代码题。…...

编程日记 2024/10/29 15:00:05

OpenCV基本操作（python开发）——（6)视频基本处理

OpenCV——视频基本处理 一、读取摄像头 import numpy as np import cv2cap cv2.VideoCapture(0) # 实例化VideoCapture对象, 0表示第一个摄像头 while cap.isOpened():ret, frame cap.read() # 捕获帧cv2.imshow("frame", frame)c cv2.waitKey(1) # 等待1毫…...

编程日记 2024/10/29 14:58:02

详解Java之Spring MVC篇一

目录 Spring MVC 官方介绍 MVC RequestMapping 传递参数 无参数 单个参数 针对String类型 针对Integer类型 针对int类型 针对自定义类型 多个参数 参数重命名 参数强制一致 参数不强制一致 传递数组 ​编辑传递List ​编辑 传递JSON ​编辑 从路径中获取参…...

编程日记 2024/10/29 14:54:59

ubuntu20.04上使用 Verdaccio 搭建 npm 私有仓库

安装nvm 首先安装必要的工具&#xff1a; apt update apt install curl下载并执行nvm安装脚本&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash添加环境变量&#xff08;如果安装脚本没有自动添加&#xff09;。编辑 ~/.bash…...

编程日记 2024/10/29 14:50:53

Python实现办公自动化的数据可视化与报表生成

在 Python 中&#xff0c;可以利用多个库来实现办公自动化中的数据可视化与报表生成。以下是具体的方法&#xff1a; 一、数据可视化 使用 matplotlib 库 matplotlib 是一个强大的 Python 绘图库&#xff0c;可以创建各种类型的静态、动态和交互式图表。示例代码&#xff1a;i…...

编程日记 2024/10/29 14:49:52

前端知识串联笔记（更新中...）

1.MVVM MVVM 是指 Model - View - ViewModel&#xff0c;Model 是数据与业务逻辑&#xff0c;View 是视图&#xff0c;ViewModel 用于连接 View 和 Model Model ---> View&#xff1a;将数据转化成所看到的页面&#xff0c;实现的方式&#xff1a;Data Bindings -- 数据绑定…...

编程日记 2024/10/29 14:47:50

PostgreSQL根据字符串的长度排序

PostgreSQL根据字符串的长度排序 在 PostgreSQL 中&#xff0c;你可以使用 LENGTH 函数来获取字符串的长度&#xff0c;并根据这个长度进行排序。LENGTH 函数会返回字符串的字符数。 以下是一个基本的 SQL 查询示例&#xff0c;它根据 some_column 字符串列的长度对表中的行进…...

编程日记 2024/10/29 14:46:48

计算机网络：网络层 —— IP数据报的发送和转发过程

文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程&#xff1a; 主机发送IP数据报路由器转发IP数据报 直接交付&#xff1a;源主机与目的主机在同一网络中间接交付&#xff1a;…...

编程日记 2024/10/29 14:44:46

【算力基础】GPU算力计算和其他相关基础(TFLOPS/TOPS/FP32/INT8...)

文章目录 :one: 算力的常见指标:two: 算力计算:three: 常用链接 &#x1f680; 本文主要是聚焦于深度学习领域的 GPU的算力估计&#xff0c;其他类型的硬件设备如CPU可以类比参考。 1️⃣ 算力的常见指标 算力衡量主要与运算速度和精度这两个指标有关。 &#x1f314;速度指…...

编程日记 2024/10/29 14:42:39

UI自动化测试（app端）4.0

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…...

编程日记 2024/10/29 14:39:31

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/8 4:37:39

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/6 17:50:11

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2026/2/4 18:42:53

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2026/2/5 3:03:00

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统：网关转发与混合调度实战

🧠关键词：Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者：希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计：5300+ 字 🧭 背景与需求 在许多 IoT 项目中，单一通信方式往往难以兼顾近场数据采集…...

编程新知 2026/1/28 17:37:33

uni-app学习笔记二十七--设置底部菜单TabBar的样式

官方文档地址&#xff1a;uni.setTabBarItem(OBJECT) | uni-app官网 uni.setTabBarItem(OBJECT) 动态设置 tabBar 某一项的内容&#xff0c;通常写在项目的App.vue的onLaunch方法中&#xff0c;用于项目启动时立即执行 重要参数&#xff1a; indexnumber是tabBar 的哪一项&…...

编程新知 2026/1/30 5:01:41