ThreeJS动画的喧嚣
时间：2023-03-27 23:59:52
HTML
五一假期即将结束，大家又要准备上班了。在这个假期的最后一天，给大家带来一个复杂的线条动画。效果如下。如果你做过一些企业站点项目，你应该遇到过这种需求。为了使我们的网站更加动态和生动，我们经常添加一些这样的效果来丰富我们的网站。今天我们就来看看如何实现这个效果。动画效果基于threejs-toys。本文不讨论其基本原理。有兴趣的同学可以研究一下源码。实现引入依赖包import{noisyLinesBackground}from'https://unpkg.com/threejs-toys@0.0.4/build/threejs-toys.module.cdn.min.js'初始化调用
constbg=noisyLinesBackground({el:document.getElementById('app'),colors:[143811,10932726],minStroke:5,maxStroke:20,timeCoef:0.0002,coordScale:2,displacementScale:0.02})参数说明参数含义el动画加载元素colorslinecolorarrayintervalminStroke线最小宽度maxStroke线最大宽度timeCoef线移动速度coordScale曲线水平，1为全线移动displacementScale线移动水平经过上面的初始化调用，界面可以看到线条移动起来，我们可以通过点击事件继续改变相应的参数来改变我们界面的动画效果。document.body.addEventListener('click',()=>{bg.config.colors=[Math.random()*0xffffff,Math.random()*0xffffff]bg.config.minStroke=Math.random()*2bg.config.maxStroke=bg.config.minStroke+Math.random()*5bg.drawTexture()bg.config.timeCoef=0.000025+Math.random()*0.001bg.uniforms.uCoordScale.value=0.5+Math.random()*4.5bg.uniforms.uDisplacementScale.value=0.00025+Math.random()*0.01})效果如下：最后介绍一下整体的实现，调用方式也比较简单。有兴趣的可以看看源码实现过程是基于threejs的。如果觉得有用，请点赞收藏，说不定哪天会用到~地址github：https://github.com/klevron/th...codepen：https://codepen.io/soju22/pen...专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）
