将 perlin 噪声添加到 THREE.js r121

Question

我一直在努力寻找一个很好的教程来将 perlin 噪声添加到新版本的 THREE.js 中。我找到了很多教程和示例，但是当我将 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; 
  }
}

那么有谁知道如何使某些版本的柏林噪声工作？我正在尝试创建地形。

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 这样的着色器中进行置换，仅在 2d 中进行