邹巧

2024年了，前端人是时候给予页面一点 Hero Section “魔法” 了！！！在这里您可以尝试自己创建一个有趣的 3D profile

本篇文章古柳将讲解对 plane 平面偏移顶点时一些需要注意的地方；重新详细讲解下 smoothstep 平滑函数，以及用 smoothstep 来实现在一定区域范围内才生效偏移等内容。

本文将讲解粒子动画等内容，实现粒子在自身位置上下移动、在随机的无序状态和特定形状的有序状态之间变化、以及不同形状之间切换过渡等效果，这些都是很多实际 shader 网页里很常见、很实用的知识！

Threejs中海天一色的效果是比较壮观好玩的，本文我们就学习一下如何一步步实现该效果，同时也能深入理解着色器中的Uniforms参数的作用和归一化的原理及效果。

通过将黑白线稿图片绘制到canvas画布上，以获取像素颜色值过滤出黑色部分坐标位置，并用于设置Three.js Shader粒子系统，再结合RGB数值不断减小做出颜色深浅变化的效果。

今天为大家带来的是IQ大神（Inigo Quilez）在2013年的Shader作品，BeautyPI的代码讲解。 首先，我们先来看一下最终的效果。 这个Shader会使用到以下的技：……

两年前看到 Pepyaka 这个网页效果，被其丝滑酷炫漂亮到效果所惊艳，今天终于可以带大家用 Three.js Shader 一步步详复现这个效果，其实并不复杂，相信很多前端、程序员都会喜欢这样的效果

用 Three.js Shader 粒子系统手撸一个超级漂亮的星系效果！学习如何在球体和圆盘上设置顶点、如何插值颜色、让粒子运动起来等等！

简单使用 ThreeJS，之前项目中需要用ThreeJS，就自学了一下，结合一些教程做出来这个效果，整体感觉还可以