adding perlin noise to THREE.js r121

Question

I have been struggling with finding a good tutorial to add perlin noise to a newer version of THREE.js. I have found many tutorials and examples but they all seem to break when I add r121 into the mix.

I've tried a great example from Codepen using a script from jeromeetienne.github.io

I've also tried this guys tutorial and file http://www.stephanbaker.com/post/perlinterrain/

I've tried several others and no luck. I am convinced it's due to THREE versions being used. Most of what I can find use an old version of THREE.js. I have forked what others have, and it works with the old version they are using but not the new one.

 //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; 
  }
}

So does anyone know how can get some version of perlin noise working? I am trying to creat terrain.

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

Thank you

Answer 1

Did you check the browser console errors? It should be the first thing you check.
I see the error Cannot read property '1' of undefined.
Which tells me that something is wrong with the line landGeo[i][j].r = Math.abs(value) * 256;
The vertices are in a single dimension array and are vector objects. I am pretty sure it should be:
landGeo.vertices[i+j].z = Math.abs(value) * 256;.

Also, I am not sure you are calling the noise function with the correct parameters, though I could be wrong and you may be wanting it like it is.
var value = noise.simplex2(i / 100, j / 100);

Also, you are starting your for loops at 1, for(let i=1;i<100;i++) {, I am pretty sure you want to start them at 0. for(let i=0;i<100;i++) {

There is always the option of doing the displacement in a shader like this 3d example, only in 2d