关于前端:ThreeJS-动画之-Noisy-Lines

五一假期行将完结啦，大家也行将筹备投入到工作中来了，在这假期的最初一天，给大家带来一个简单的线条动画，成果如下所示。

如果你做过一些企业站点的我的项目，应该会有遇到过这种需要，为了让咱们的站点更具有活力及动画成果，往往会加一些相似这样的成果来丰盛咱们的网站，明天就来看看如何实现这种成果吧，动画成果基于 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})

成果如下：

整体实现就介绍完啦，调用的形式相当简略，大家有趣味的能够看看源码实现过程，基于 threejs 实现。如果感觉有用，连忙点赞珍藏起来吧，说不定哪天就用上啦～

github：https://github.com/klevron/th…

codepen：https://codepen.io/soju22/pen…

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

实现

最初

地址