好久没发THREE.js教程了。今天给大家带来一个小案例，介绍THREE.js中如何使用PerlinNoise生成随机地形。我们先来看看效果。随机数和噪声噪声实际上是一个随机数发生器，普通噪声产生的随机数是无规律的。80年代，PerlinNoise的发明者KenPerlin曾为迪斯尼经典电影电子世界大赛(TRON)尝试用普通噪声来模拟随机效果，但一直未能获得令人满意的结果。PerlinNoise算法就是这样应运而生的。柏林噪音的2010TRON重制版。在自然界中，高山、大理石的纹理、大海起伏的波浪，这些现象看似杂乱无章，却有着内在的规律可循。普通噪音无法模拟这些自然效果。柏林噪声算法使这成为可能。使用Perlin噪声算法可以得到一组平滑的插值随机数。它们相互关联，可以用来生成接近自然的随机值。下图中，左边是普通噪声产生的随机纹理，右边是柏林噪声产生的纹理。可以看出，后者生成的纹理更加自然流畅，随机值之间有明显的过渡效果。我用canvas画了两组图，用两种算法生成了一些随机点，然后把这些点连起来，可以看到右边的Perlinnoise是一条比较平滑的曲线，而左边的是普通noise的图没有规则。普通噪声和柏林噪声连接随机点生成随机地形。在THREE.js中，我们使用平面来生成随机地形。平面由一系列顶点组成。我们只需要改变这些顶点的z轴坐标就可以生成高度。对于起伏效果，我们先用随机噪声试试。让pos=this.groundGeo.attributes.position.arrayfor(leti=0;i
