three.js实现雪花场景效果
点击获取雪花图片素材
提取码:lywa
// 雪花效果
import * as THREE from "three"
export function getsnowEffect(th) {console.log('th', th) // this 场景var that = th// 创建一个BufferGeometry对象,用于存储顶点数据 const geometry = new THREE.BufferGeometry();const vertices = [];let renderer;// 创建一个纹理加载器 const textureLoader = new THREE.TextureLoader();// 加载五个不同的雪花纹理 const sprite1 = textureLoader.load('/public/data/snowflake1.png');const sprite2 = textureLoader.load('/public/data/snowflake2.png');const sprite3 = textureLoader.load('/public/data/snowflake3.png');const sprite4 = textureLoader.load('/public/data/snowflake4.png');const sprite5 = textureLoader.load('/public/data/snowflake5.png');// 生成10000个随机顶点位置 for (let i = 0; i < 10000; i++) {const x = Math.random() * 2000 - 1000;const y = Math.random() * 2000 - 1000;const z = Math.random() * 2000 - 1000;vertices.push(x, y, z);}// 将顶点数据设置为BufferGeometry的属性 geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));// 定义一个参数数组,包含颜色、纹理和大小 let parameters = [[[1.0, 0.2, 0.5], sprite2, 5],[[0.95, 0.1, 0.5], sprite3, 5],[[0.90, 0.05, 0.5], sprite1, 5],[[0.85, 0, 0.5], sprite5, 5],[[0.80, 0, 0.5], sprite4, 5]];const materials = [];// 根据参数数组创建多个粒子系统,并将它们添加到场景中for (let i = 0; i < parameters.length; i++) {const color = parameters[i][0];const sprite = parameters[i][1];const size = parameters[i][2];// 创建一个PointsMaterial,设置其大小、纹理、混合模式等属性 materials[i] = new THREE.PointsMaterial({size: size,map: sprite,blending: THREE.AdditiveBlending,depthTest: false,transparent: true});materials[i].color.setHSL(color[0], color[1], color[2]);// 创建一个Points对象,并使用之前定义的geometry和material const particles = new THREE.Points(geometry, materials[i]);// 为粒子系统设置随机的旋转值 particles.rotation.x = Math.random() * 6;particles.rotation.y = Math.random() * 6;particles.rotation.z = Math.random() * 6;// 将粒子系统添加到场景中that.scene.add(particles);}// 这里应该初始化renderer,并设置其大小和dom元素 renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);animate();function animate() {requestAnimationFrame(animate);render();}function render() {const time = Date.now() * 0.00005;for (let i = 0; i < that.scene.children.length; i++) {const object = that.scene.children[i];if (object instanceof THREE.Points) {object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));}}for (let i = 0; i < materials.length; i++) {const color = parameters[i][0];const h = (360 * (color[0] + time) % 360) / 360;materials[i].color.setHSL(h, color[1], color[2]);}}
}
结果

相关文章:
three.js实现雪花场景效果
点击获取雪花图片素材 提取码:lywa // 雪花效果 import * as THREE from "three" export function getsnowEffect(th) {console.log(th, th) // this 场景var that th// 创建一个BufferGeometry对象,用于存储顶点数据 const geometry new THREE.Buffe…...
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一
一、鸿蒙开发环境搭建 DevEco Studio安装 下载 访问官网:https://developer.huawei.com/consumer/cn/deveco-studio/选择操作系统版本后并注册登录华为账号既可下载安装包 安装 建议:软件和依赖安装目录不要使用中文字符软件安装包下载完成后࿰…...
Elasticsearch优化索引映射和设置
在Elasticsearch的世界中,优化索引的映射(mapping)和设置(settings)对于提高搜索性能、存储效率和系统稳定性至关重要。本文将带您深入了解如何针对Elasticsearch的索引进行优化,帮助您构建更高效、更可靠的…...
boss直聘招聘数据可视化分析
boss直聘招聘数据可视化分析 一、数据预处理二、数据可视化三、完整代码一、数据预处理 在 上一篇博客中,笔者已经详细介绍了使用selenium爬取南昌市web前端工程师的招聘岗位数据,数据格式如下: 这里主要对薪水列进行处理,为方便处理,将日薪和周薪的数据删除,将带有13薪…...
小程序人脸分析
公司的业务需求是用户在使用某个功能前,必须使用人脸识别,确保当前使用人是用户本人,防止某些功能乱用。后端用的是腾讯的人脸识别方案,这里只是前端的识别代码,保证人脸剧中,大小合适,有一个人…...
UML建模笔记
5个视图 设计。类,接口,对象如何协作。实现。组件,运行程序,文档关系。用例。用户功能期望。进程。并发与同步相关进程,线程。部署。部署到计算机。 建模目的 和客户共创追踪需求变更协同开发进度控制持续迭代测试生…...
初见SpringCloud ing
Consul 服务注册与发现 服务注册与发现 服务注册:微服务在启动时,会将自己的信息(如 IP 地址、端口、服务名称等)注册到 Consul。 服务发现:其他微服务可以通过 Consul 查询到已注册的服务,并通过这些信息…...
Python | Leetcode Python题解之第198题打家劫舍
题目: 题解: class Solution:def rob(self, nums: List[int]) -> int:if not nums:return 0size len(nums)if size 1:return nums[0]first, second nums[0], max(nums[0], nums[1])for i in range(2, size):first, second second, max(first nu…...
什么是中断?---STM32篇
目录 一,中断的概念 二,中断的意义 三,中断的优先级 四,中断的嵌套 如果一个高优先级的中断发生,它会立即打断当前正在处理的中断(如果其优先级较低),并首先处理这个高优…...
51单片机第1步_putchar()和_getkey()应用
没有开发板,没有烧录器,没有学习场所,如何学习写51单片机的程序?除了采用软件模拟仿真,没有更好的方法,因此,使用串口是学习的第一步。 1、_getkey ()函数 在C:\Keil\C51\LIB中有一个叫GETKEY…...
微信小程序中的地图的使用
微信小程序中的地图组件 是一个用于展示地图的组件,提供了丰富的功能和配置选项,可以实现定位、标记、路线规划等多种地图相关的交互。下面是对这个组件的详细介绍,包括属性、事件以及示例代码。 组件属性 基础属性 longitude: 地图中心的经…...
MySQL root密码丢失处理
没有记住MySQL数据库root用户默认密码(为初始化安装mysql时默认生成) 1)修改/etc/my.cnf文件,在[mysqld]的段中加上一句:skip-grant-tables 重启mysql服务 [root@localhost ~]# service mysqld restart 2)以无密码方式进入mysql: [root@localhost ~]# /usr/local/my…...
RabbitMQ中java实现队列和交换机的声明
java实现队列和交换机的声明 在之前我们都是基于RabbitMQ控制台来创建队列、交换机。但是在实际开发时,队列和交换机是程序员定义的,将来项目上线,又要交给运维去创建。那么程序员就需要把程序中运行的所有队列和交换机都写下来,…...
解决SPA(单页应用)首屏加载速度慢
SPA是目前流行的前端开发模式,相对于传统的多页面用户体验更好,操作更顺畅,开发效率也更高。但是SPA首屏加载速度慢一直是个致命的问题,由于SPA应用首次打开需要一次性加载大量的静态资源,这就导致了加载速度慢的问题&…...
ElementUI框架搭建及组件使用
前言: 当开始使用ElementUI框架来搭建网站或Web应用程序时,了解框架的基本结构和组件的使用是至关重要的。ElementUI是一个基于Vue.js的框架,提供了丰富的UI组件和工具,可以帮助开发人员快速构建现代化的用户界面。 在本文中,我…...
同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器
同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器 1路SDI进,1路DVI(可转HDMI/VGA/色差分量/AV)3.5音频1路SDI出,可以支持音频解嵌,也可把3.5音频加嵌转换输出,输出分辨率可调,支持图像翻转180度 一、产品简介 SDI转万能转…...
【设计模式】【创建型5-5】【原型模式】
文章目录 原型模式代码示例 原型模式 代码使用:spring框架里 bean的作用域 用途,以原型为模板,源源不断的创建(克隆 clone)对象。当直接创建对象的代价比较大时,则采用这种模式。 代码示例 public class…...
原子变量原理剖析
一、原子操作 原子操作保证指令以原子的方式执行,执行过程不被打断。先看一个实例,如下所示,如果thread_func_a和thread_func_b同时运行,执行完成后,i的值是多少? // test.c static int i 0;void thread…...
WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置)
WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置) 对此,我特别感谢TryHackMe和HackTheBox academy,永远相信和追随英国TryHackMe所教导的网络安全知识,并保持学习 WebSocket走私相关的知识在这里 前段时间学习过htt…...
CentOS 7 和 CentOS Stream 8 的主要区别
更新频率: CentOS 7:传统的稳定版本,主要用于生产环境,更新频率较低,主要包含安全补丁和重要修复。CentOS Stream 8:滚动发布版本,更新更频繁,包含最新的特性和改进。它处于 Fedora …...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
