點擊獲取雪花圖片素材
提取碼: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]);}}
}

結果