将佩林噪声添加到THRE.js r121

Question

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

我尝试了Codepen中的一个很好的例子，使用了来自jerometienne.github.io 的脚本

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

我试过其他几次，都没有成功。我确信这是由于使用了三个版本。我能找到的大多数都使用旧版本的THRE.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);

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

在像这个3d示例这样的着色器中，总是可以选择进行位移，仅在2d 中