学习threejs，使用粒子实现下雪特效
👨⚕️ 主页： 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，使用粒子实现下雪特效
👨⚕️ 主页： gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏：threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.Points简介1.11 ☘️…...
unity3d——Time
在Unity3D中，Time类是一个非常重要的工具类，它提供了一系列与时间相关的属性和方法，帮助开发者在游戏中实现各种时间相关的操作。以下是一些Time类常用的方法及其示例： 一、常用属性 Time.time 含义：表示从游戏开始到…...
天地图实现海量聚合marker--uniapp后端详细实现
本文章详细的讲解了前后端代码来 实现uniapp天地图功能的实现 以及 后端海量数据的聚合查询 和网格算法实现思路。 并对当数据量增加和用户频繁请求接口时可能导致服务器负载过高做了前后端优化。 前端uniapp： 实现了天地图的行政区划边界/地图切换/比例尺/海量数…...
Bug | 项目中数据库查询问题
问题描述 理论上，点击查询后，表头应当显示中文。而不是上面的在数据库中的表头【如上图示】 正常点击查询后，如果没有输入值，应当是查询所有的信息。 原因分析： 这里是直接使用SELECT * 导致的。例如： S…...
C++入门基础知识129—【关于C 库函数 - time()】
成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 库函数 - time()的相关内容࿰…...
大文件秒传，分片上传，断点续传
大文件分片上传 一 功能描述 1.文件通过web端分片多线程上传到服务端，然后web端发起分片合并，完成大文件分片上传功能 2.上传过的大文件，实现秒传 3.上传过程中，服务异常退出，实现断点续传 二 流程图 三 代码运行…...
多生境扩增子探秘：深度溯源与多样性解析
分析微生物组数据的组成结构的一个主要挑战是确定其潜在来源。在微生物来源分析中，随机森林、SourceTracker和FEAST都有较广泛应用。今天，小编就带大家看一篇发表在《iMeta》的文章，使用溯源技术追踪微生物的来源与去向，揭示生物在…...
Selenium4自动化测试常用函数总结，各种场景操作实战
🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 seleninum作为自动化测试的工具，自然是提供了很多自动化操作的函数，下面列举下比较常用的函数，更多可见官方文档：…...
图像生成新范式：智源推出全能视觉生成模型 OmniGen
大型语言模型（LLM）的出现统一了语言生成任务，并彻底改变了人机交互。然而，在图像生成领域，能够在单一框架内处理各种任务的统一模型在很大程度上仍未得到探索。近日，智源推出了新的扩散模型架构 OmniGen&am…...
实现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 …...
Python期末题目 | 期末练习题【概念题+代码】
一、前言 Python 是一门功能强大且易于学习的编程语言，在高校中被广泛用作教学语言。Python 的期末考试通常会包含基础知识和编程实践，以考察学生的理解与应用能力。本文整理了一套 Python 期末练习题，包括选择题、填空题、判断题和代码题。…...
视频基本处理)
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毫…...
详解Java之Spring MVC篇一
目录 Spring MVC 官方介绍 MVC RequestMapping 传递参数 无参数 单个参数 针对String类型 针对Integer类型 针对int类型 针对自定义类型 多个参数 参数重命名 参数强制一致 参数不强制一致 传递数组 编辑传递List 编辑 传递JSON 编辑 从路径中获取参…...
ubuntu20.04上使用 Verdaccio 搭建 npm 私有仓库
安装nvm 首先安装必要的工具： apt update apt install curl下载并执行nvm安装脚本： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash添加环境变量（如果安装脚本没有自动添加）。编辑 ~/.bash…...
Python实现办公自动化的数据可视化与报表生成
在 Python 中，可以利用多个库来实现办公自动化中的数据可视化与报表生成。以下是具体的方法： 一、数据可视化 使用 matplotlib 库 matplotlib 是一个强大的 Python 绘图库，可以创建各种类型的静态、动态和交互式图表。示例代码：i…...
前端知识串联笔记（更新中...）
1.MVVM MVVM 是指 Model - View - ViewModel，Model 是数据与业务逻辑，View 是视图，ViewModel 用于连接 View 和 Model Model ---> View：将数据转化成所看到的页面，实现的方式：Data Bindings -- 数据绑定…...
PostgreSQL根据字符串的长度排序
PostgreSQL根据字符串的长度排序 在 PostgreSQL 中，你可以使用 LENGTH 函数来获取字符串的长度，并根据这个长度进行排序。LENGTH 函数会返回字符串的字符数。 以下是一个基本的 SQL 查询示例，它根据 some_column 字符串列的长度对表中的行进…...
计算机网络：网络层 —— IP数据报的发送和转发过程
文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程： 主机发送IP数据报路由器转发IP数据报 直接交付：源主机与目的主机在同一网络中间接交付：…...
【算力基础】GPU算力计算和其他相关基础(TFLOPS/TOPS/FP32/INT8...)
文章目录 :one: 算力的常见指标:two: 算力计算:three: 常用链接 🚀 本文主要是聚焦于深度学习领域的 GPU的算力估计，其他类型的硬件设备如CPU可以类比参考。 1️⃣ 算力的常见指标 算力衡量主要与运算速度和精度这两个指标有关。 🌔速度指…...
UI自动化测试（app端）4.0
✨博客主页： https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》：.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏： https://blog.csdn.net/m0_63815035/cat…...
AI教材写作必备：低查重工具，助力高效生成专业教材！
选择 AI 教材编写工具的困境与解决方案 在准备教材之前，选择合适的工具就像进入了一个“纠结的大迷宫”！使用办公软件确实方便，但功能往往太过基础，搭建框架和调整格式都得手动搞定；而如果选择专业的 AI 教材编写工具…...
Ardb源码深度解析：从网络层到存储引擎的完整架构设计
Ardb源码深度解析：从网络层到存储引擎的完整架构设计 【免费下载链接】ardb A redis protocol compatible nosql, it support multiple storage engines as backend like Googles LevelDB, Facebooks RocksDB, OpenLDAPs LMDB, PerconaFT, WiredTiger, ForestDB. …...
BLE AT指令实战：从GAP广播到GATT服务构建的嵌入式蓝牙开发指南
1. 项目概述与BLE AT指令核心价值如果你正在捣鼓物联网设备、可穿戴硬件或者任何需要无线连接的嵌入式项目，蓝牙低功耗（BLE）技术大概率是你绕不开的一环。它功耗低、连接快，非常适合那些需要长时间运行、间歇性传输少量数据的场景…...
不只是标定：挖掘OpenCV findCirclesGrid在工业视觉中的另类玩法与参数调优
超越标定：OpenCV findCirclesGrid在工业视觉中的高阶应用与参数调优实战 在工业视觉领域，圆形网格检测一直扮演着关键角色。传统认知中，OpenCV的findCirclesGrid函数常被简化为相机标定的辅助工具，但其底层算法蕴含的几何约束与模…...
基于LangChain与Streamlit构建智能论文阅读助手：从原理到实践
1. 项目概述：一个为学术阅读而生的智能助手 如果你也经常被海量的学术论文淹没，或者对着PDF里复杂的公式和图表感到头疼，那么“talkingwallace/ChatGPT-Paper-Reader”这个项目，很可能就是你一直在寻找的“神兵利器”。这不仅仅是…...
杰理之主机插拔U盘，从机较高概率出现无声情况【篇】
switch节点初始丢数据时后续节点状态错误导致时间戳异常问题（对应rx无声）...
纺织行业智能化升级进入深水区：AI验布机从“可选项”变为“必选项”
过去三年，走访过数十家纺织服装企业的行业观察者会发现一个明显的变化：2023年时，AI验布机还是展会上引人驻足的新奇设备；到了2025年，它已经成为越来越多工厂标准配置的一部分。这一转变背后，折射出整个纺织…...
基于发布订阅模式的Web实时通信框架hermes-for-web实践指南
1. 项目概述：一个为Web应用注入灵魂的“信使”最近在折腾一个前后端分离的Web项目，遇到了一个老生常谈但又极其磨人的问题：前端页面状态和后端数据更新之间的“延迟”与“不一致”。比如，用户A在后台管理界面删除了一个订单&#…...
TPS65131模块实战：单电源生成正负双电压的工程指南
1. 项目概述与核心需求解析在模拟电路、音频设备乃至一些复古的数字逻辑电路里，正负双电源轨是一个绕不开的话题。无论是给运算放大器供电，为LCD屏幕提供偏置电压，还是驱动某些老式合成器模块，你常常需要同时拥有一个正电压和一个…...
RePKG终极指南：解锁Wallpaper Engine资源包的专业工具
RePKG终极指南：解锁Wallpaper Engine资源包的专业工具 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg 你是否曾经对Wallpaper Engine中精美的动态壁纸感到好奇ÿ…...