将柏林噪声添加到 THREE.js r121

Question

我一直在努力寻找一个很好的教程来为更新版本的 THREE.js 添加 perlin 噪声。我找到了许多教程和示例，但当我将 r121 添加到组合中时，它们似乎都崩溃了。

我使用来自 jeromeetienne.github.io

的脚本尝试了 Codepen 的一个很好的例子

我也试过这个教程和文件 http://www.stephanbaker.com/post/perlinterrain/

我已经尝试了其他几个，但都不成功。我确信这是由于使用了三个版本。我能找到的大部分内容都使用 THREE.js 的旧版本。我已经分叉了其他人拥有的东西，它适用于他们使用的旧版本，但不适用于新版本。

 //land
 let landGeo = new THREE.PlaneGeometry(500,500, 50, 50);
  let landMat = new THREE.MeshStandardMaterial({
color:'green'
})
land = new THREE.Mesh(landGeo, landMat);
  scene.add(land);
noise.seed(Math.random());
for(let i=1;i<100;i++) {
  for(let j=1;j<100;j++) {
   var value = noise.simplex2(i / 100, j / 100);
    // ... or noise.simplex3 and noise.perlin3:
//    var value = noise.simplex3(i / 100, j / 100, clock);

    landGeo[i][j].r = Math.abs(value) * 256; 
  }
}

那么有人知道如何让某些版本的 perlin noise 工作吗？我正在尝试创建地形。

https://codepen.io/jfirestorm44/pen/mdEEwqb?editors=0010

谢谢

Answer 1

您检查浏览器控制台错误了吗？它应该是您检查的第一件事。
我看到错误 Cannot read property '1' of undefined.
这告诉我 landGeo[i][j].r = Math.abs(value) * 256;
行有问题顶点在一维数组中并且是矢量对象。我很确定它应该是：
landGeo.vertices[i+j].z = Math.abs(value) * 256;.

此外，我不确定您是否使用正确的参数调用噪声函数，尽管我可能是错的，您可能想要它原样。
var value = noise.simplex2(i / 100, j / 100);

此外，您的 for 循环从 1 开始，for(let i=1;i<100;i++) {，我很确定您希望从 0 开始。for(let i=0;i<100;i++) {

总是可以选择像这样在着色器中进行置换 3d example, only in 2d

将柏林噪声添加到 THREE.js r121

adding perlin noise to THREE.js r121

three.js

perlin-noise