看Threejs好玩示例，学习创新与技术(二)
本文接上篇内容，继续挖掘应用ThreeJS的一些创新算法。
本文理解难度比较大，可以先看一些概念，在难的地方培养一些意识即可。
1、扭曲的自然
下面图本身是矩形的，为何它可以这么扭曲呢？它在随机处带有一定的规律，跟股票一样，开始难以捉摸。
这个效果是基于Poisson Disk Sampling（泊松圆盘采样）。该算法可以生成二维或三维空间中生成均匀分布的点集的算法。它的主要特点是确保生成的点之间保持一定的最小距离，从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用，尤其是在需要生成自然分布的对象（如树木、石头等）时。
接下来，每行采用多个正弦波叠加对左右前后进行裁剪。如果不进行裁剪，那么效果如下（初步的锯齿感是因为矩形内采样的结果）。水平裁剪函数为Math.sin(y * 3) * Math.sin(y * 2) * Math.sin(y * 4.7) * 0.5 - 0.5) * 0.7.
2、如何给每个方块投影纹理
这是本文名称的由来--Project Texture。
在上面那副图中，聪明的你一定初步猜到了每个方块的纹理是怎么得到的。对，正如你猜的那样，在每个方块要静止时候记录所在位置。在代码里，每个方块用savedModelMatrix存储了居中静止时候的矩阵。在着色器代码里面重算uv即可。
//顶点着色器vWorldPosition = savedModelMatrix * vec4(position, 1.0);vTexCoords = projectionMatrixCamera * viewMatrixCamera * vWorldPosition;//片元着色器vec2 uv = (vTexCoords.xy / vTexCoords.w) * 0.5 + 0.5;uv.x = map(uv.x, 0.0, 1.0, 0.5 - widthScaled / 2.0, 0.5 + widthScaled / 2.0);uv.y = map(uv.y, 0.0, 1.0, 0.5 - heightScaled / 2.0, 0.5 + heightScaled / 2.0);vec4 color = texture2D(texture, uv);
为啥这么复杂呢，为啥不开始存储每个方块的UV呢？这个原因我也尝试了。下面代码的vTexCoords（=savedModelMatrix，已修改）记录方块所在的位置，vWorldPosition表示方块中像素的偏移。得到的效果如下。效果比较差是因为没有归一化。
vec2 uv =vec2((vTexCoords.x+vWorldPosition.x)/3.8+0.5,(vTexCoords.y+vWorldPosition.y)/5.8+0.5);
其他小代码：
问：var t={a:3,b:4} var {a} =t。这是什么写法 答：这是 JavaScript 中的
对象解构赋值（Destructuring Assignment）
语法。具体来说，代码的作用是从对象 t 中提取属性 a 的值并将其赋值给变量 a。