ThreeJS 动画之 Noisy Lines

2022 年 7 月 09 日
本文字数：857 字
阅读完需：约 3 分钟

一晃又是周末啦，今天逛网站的时候看到一个不错的效果效果，一个复杂的线条流动动画，效果如封面图所示。

如果你做过一些企业站点的项目，应该会有遇到过这种需求，为了让我们的站点更具有活力及动画效果，往往会加一些类似这样的效果来丰富我们的网站，今天就来看看如何实现这种效果吧，动画效果基于threejs-toys实现，本文不讨论其底层原理，有兴趣的同学可以看看源码研究。

实现

引入依赖包

import { noisyLinesBackground } from 'https://unpkg.com/threejs-toys@0.0.4/build/threejs-toys.module.cdn.min.js'

复制代码

初始化调用

<div id="app"></div>

复制代码

const bg = noisyLinesBackground({  el: document.getElementById('app'),  colors: [143811, 10932726],  minStroke: 5,  maxStroke: 20,  timeCoef: 0.0002,  coordScale: 2,  displacementScale: 0.02})

复制代码

参数解释

el：动画加载元素

colors：线条颜色数组区间

minStroke：线条最小宽度

maxStroke：线条最大宽度

timeCoef：线条运动速度

coordScale：曲线级别，1 是全直线运动

displacementScale：线条移动级别

通过以上初始化调用后界面就能看到线条动起来啦，我们改可以继续通过点击事件来改变相应的参数，让我们的界面动画效果发生变化。

document.body.addEventListener('click', () => {  bg.config.colors = [Math.random() * 0xffffff, Math.random() * 0xffffff]  bg.config.minStroke = Math.random() * 2  bg.config.maxStroke = bg.config.minStroke + Math.random() * 5  bg.drawTexture()
  bg.config.timeCoef = 0.000025 + Math.random() * 0.001  bg.uniforms.uCoordScale.value = 0.5 + Math.random() * 4.5  bg.uniforms.uDisplacementScale.value = 0.00025 + Math.random() * 0.01})

复制代码

效果如下：