本文是一个合集,稍微对ProjectTexture的技术进行总结,突出关键和创意。
演示视频如下(Playing with Texture Projection in Three.js | Codrops (tympanus.net)):
20240909_232959
1、它的创新与用途?
这个案例中模型方块游荡的方式像水波,鼠标放上面如棍子放在水里一样。方块在进出主界面的动画犹如游龙,又像DNA螺旋效果。我们可以从中学到噪声函数、创建曲线、实体模型纹理投影等技术。
2、样条曲线
拆解每个方块的移动的走势,其就是一个从0,0向x,y发展的曲线。
当然大家看到这些线的起点并不在(0,0),是因为算法在Y轴给了随机偏移。如果不加“偏移”就可以变成右侧的效果。文中采用的方法比较新颖,采用的是eases这个组件。eases是一个渐进函数,如声音编辑器里面的消失,就会采用这个函数。
具体的函数为(注意:我下面的函数是简化的,不是原文的)
3、扭曲的自然
下面图本身是矩形的,为何它可以这么扭曲呢?它在随机处带有一定的规律,跟股票一样