js粒子群流光js特效

下载地址

 

js粒子群流光特效,不断的变色动画效果。引用了一些远程cdn类库,可以存到本地使用。

dd:

### 使用 Three.js 实现流光特效 为了创建流光特效,可以利用 `THREE.Line` 或者更复杂的几何体配合着色器来实现动态效果。下面是一个基于线段的简单流光效果示例: #### 创建场景、相机和渲染器 ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` #### 定义材质与线条 对于流光效果而言,自定义 ShaderMaterial 是一种常见做法。这里采用了一种简单的顶点颜色渐变方式模拟线流动。 ```javascript // 自定义着色器材料 const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); }`, fragmentShader: ` uniform float uTime; varying vec2 vUv; void main(){ // 计算距离中心的距离并应用时间偏移量制造移动感 float distFromCenter = distance(vUv - .5, vec2(.0)); float waveEffect = sin(distFromCenter*80.-uTime)*.5+.5; if (waveEffect < .3){ discard; } gl_FragColor = vec4(vec3(waveEffect), 1.); }` }); // 构建一条曲线路径作为发源的基础形状 const points = []; for (let i = 0; i < 100; i++) { let t = i / 99; const x = Math.sin(t * Math.PI * 2) * 2; const y = -(t - 0.5); // 垂直方向分布 points.push(new THREE.Vector3(x, y, 0)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(geometry, material); scene.add(line); ``` #### 动画循环更新uniform变量 为了让照看起来像是在运动,在每一帧都需要调整 shader 中的时间参数。 ```javascript function animate(time) { requestAnimationFrame(animate); // 更新着色器中的时间属性 material.uniforms.uTime.value = time * 0.001; renderer.render(scene, camera); } requestAnimationFrame(animate); ``` #### 清理定时器防止内存泄漏 当组件卸载时应当清除任何可能存在的计时器或其他资源占用项[^2]。 ```javascript window.addEventListener('beforeunload', () => { cancelAnimationFrame(requestId); // 如果有其他动画帧ID记得取消它们 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值