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

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

news 2025/7/7 13:56:35

👨‍⚕️ 主页： 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 ☘️…...

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

unity3d——Time

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大型语言模型（LLM）的出现统一了语言生成任务，并彻底改变了人机交互。然而，在图像生成领域，能够在单一框架内处理各种任务的统一模型在很大程度上仍未得到探索。近日，智源推出了新的扩散模型架构 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 是一门功能强大且易于学习的编程语言，在高校中被广泛用作教学语言。Python 的期末考试通常会包含基础知识和编程实践，以考察学生的理解与应用能力。本文整理了一套 Python 期末练习题，包括选择题、填空题、判断题和代码题。…...

编程日记 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 首先安装必要的工具： apt update apt install curl下载并执行nvm安装脚本： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash添加环境变量（如果安装脚本没有自动添加）。编辑 ~/.bash…...

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

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

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

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

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

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

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

PostgreSQL根据字符串的长度排序

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

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

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

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

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

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

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

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

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…...

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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/7/6 2:54:59

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2025/7/5 15:17:53

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个非 root 用户账号并切换到它运行 ns-3。一次性解决方案：创建非 roo…...

编程新知 2025/7/4 21:43:32

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/7/6 19:31:37

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/6/24 6:21:26

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/21 18:22:13

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2025/7/6 9:12:58