ThreeJS 动画之 Noisy Lines-阿里云开发者社区

ThreeJS 动画之 Noisy Lines

2023-08-17 67

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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
})