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

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]);}}
}

结果
在这里插入图片描述

http://www.lryc.cn/news/387030.html

相关文章:

  • 鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一
  • Elasticsearch优化索引映射和设置
  • boss直聘招聘数据可视化分析
  • 小程序人脸分析
  • UML建模笔记
  • 初见SpringCloud ing
  • Python | Leetcode Python题解之第198题打家劫舍
  • 什么是中断?---STM32篇
  • 51单片机第1步_putchar()和_getkey()应用
  • 微信小程序中的地图的使用
  • MySQL root密码丢失处理
  • RabbitMQ中java实现队列和交换机的声明
  • 解决SPA(单页应用)首屏加载速度慢
  • ElementUI框架搭建及组件使用
  • 同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器
  • 【设计模式】【创建型5-5】【原型模式】
  • 原子变量原理剖析
  • WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置)
  • CentOS 7 和 CentOS Stream 8 的主要区别
  • 基于go1.19的站点模板爬虫
  • (单机版)神魔大陆|v0.51.0|冰火荣耀
  • k8s自动补全工具和UI管理界面
  • 内网渗透:内网基础信息收集
  • cos符号链提示是什么?TOT呢?
  • docker-compose部署Flink及Dinky
  • 数字时代的文化革命:Facebook的社会影响
  • 66.前端接口调用返回400的错误
  • Hadoop 安装与伪分布的搭建
  • 网络安全:渗透测试思路.(面试)
  • 优化堆排序