threejs实现烟花特效

内容分享5天前发布 Regina饶芮瑜

0 0 0

大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热烈，欢迎关注我的文章，我们一起成长、进步！

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙

技术栈：JavaScript、React、ThreeJs、WebGL、Go

经验经验：6 年+ 前端开发经验，专注于图形渲染和 AI 技术

找工作，就上智简未来

又是一年岁末，又是辞旧迎新的时刻。寒冬虽冷，但人们心中的那份期待和喜悦，让整个世界变得格外温暖。烟花，作为新年的象征之一，总是在夜空中为我们带来光彩夺目的祝福。

用代码点亮新年

今年，我尝试用代码模拟烟花绽放的画面，融入一些对新年的期待与祝福。烟花不仅是视觉上的震撼，它也能在技术中被表现得充满活力与艺术感。以下是一段基于 Three.js 的烟花效果代码片段，送给所有热爱编程的人们： #前端 #three.js

import * as THREE from 'three';

// Vertex Shader const vertexShader = ` varying vec2 vUv;

void main() { vUv = uv; gl_Position = projectionMatrix *

} `;

// Fragment Shader const fragmentShader = ` #define PI 3.141592653589793 #define TWO_PI 6.283185307179586

uniform float iTime; uniform vec2 iResolution;

varying vec2 vUv;

float star5SDF(vec2 p, float r, float m) { const vec2 k1 = vec2(0.809016994375, -0.587785252292); const vec2 k2 = vec2(-k1.x, k1.y); p.x = abs(p.x); p -= 2.0 *

p -= 2.0 *

p.x = abs(p.x); p.y -= r; vec2 ab = m *

float h = clamp(dot(p, ab) / dot(ab, ab), 0.0, 1.0); return length(p -

}

float hash1(float p) { p = fract(p *

p *= p +

p *= p +

return fract(p); }

vec2 hash21(float p) { vec3 p3 = fract(vec3(p) *

p3 += dot(p3, p3.yzx +

return fract((p3.xx +

}

vec3 colorRibbon(float t) { return abs(mod(vec3(0., 1., 2.) / 3.0 +

}

vec2 getHeartPosition(float t) { return vec2( 16.0 *

-(13.0 *

); }

void main() { float t = iTime *

vec2 uv = vUv *

uv.x *= iResolution.x / iResolution.y;

vec3 color = vec3(0.0); const float jmax = 10.0; const float imax = 20.0;

for (float j = 0.0; j < jmax; j++) { float ja = j / jmax; t -= hash1(ja *

float t1 = floor(t); float t1f = fract(t);

float t2fa = min(0.3, t1f) / 0.3; float t2fb = max(t1f *

float flasht = t2fb * (step(0.1, t2fb) - step(0.0, t2fb)) * 10.0;

vec2 layer1_pos = hash21(t1 *

vec3 col = colorRibbon(hash1(layer1_pos.y));

for (float i = 0.0; i < imax; i++) { float ia = i / imax; vec2 layer2_pos = getHeartPosition(ia *

layer2_pos -= vec2( 1.0 -

1.0 -

);

float blink = step(1.0, mod(i, 2.0)); float sdf = star5SDF(uv - layer2_pos, 0.05, 0.09) + 0.05;

color += col *

-0.016, flasht *

(0.02 / sdf) ); } }

gl_FragColor = vec4(color, 1.0); } `;

// Three.js Scene Setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 2;

const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// Uniforms const uniforms = { iTime: { value: 0.0 }, iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, };

// Shader Material const material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, });

const geometry = new THREE.PlaneGeometry(2, 2); const plane = new THREE.Mesh(geometry, material); scene.add(plane);

// Animation Loop function animate() { uniforms.iTime.value += 0.01; renderer.render(scene, camera); requestAnimationFrame(animate); }

// Resize Listener window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); uniforms.iResolution.value.set(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); });

animate();