Animate a low-poly "wave" for my water plane

Questions
1

I’m trying to use the animated wave plane here: https://codepen.io/negan1911/pen/GLbBGm
but it’s using old three.js version. So far I got the Update function translated from:

function updatePlane() {
	for (var i = 0; i < planeGeo.vertices.length; i++) {
        planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
        planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z
	}
};

to

function updatePlane {
    let p = planeGeo.getAttribute( 'position' );

    for (let i = 0; i<p.count; i++) {
        let z = +p.getZ(i);
        p.setZ(i, Math.sin(( i + this._count * 0.00002)) * (z - (z* 0.6) ) );
        this._count += 0.1
    }
    p.needsUpdate = true;
}

But the plane is simply static and not moving. Idk what I’m missing, or is there a better neat function for this?

2 

function wireWave() {
  var vertexHeight = 15000,
    planeDefinition = 100,
    planeSize = 1245000,
    totalObjects = 1,
    background = "#002135",
    meshColor = "#005e97";

  camera.position.z = 30000;
  camera.position.y = 5000;
  renderer.setClearColor(background, 1);
  scene.fog = new THREE.Fog(background, 1, 300000);

  let planeGeo = new THREE.PlaneGeometry(
    planeSize,
    planeSize,
    planeDefinition,
    planeDefinition
  );
  let plane = new THREE.Mesh(
    planeGeo,
    new THREE.MeshBasicMaterial({
      color: meshColor,
      wireframe: true,
    })
  );
  plane.rotation.x -= Math.PI * 0.5;

  scene.add(plane);

  let count = 0;
  let p = planeGeo.attributes.position;
  let original = [];
  for (var i = 0; i < p.array.length; i += 3) {
    p.array[i + 2] += Math.random() * vertexHeight - vertexHeight;
    original.push(p.array[i + 2]);
  }

  this.update = () => {
    for (let i = 0, j = 0; i < p.array.length; i += 3, j++) {
      let z = +p.array[i + 2];
      p.array[i + 2] =
        Math.sin(i + count * 0.00002) * (original[j] - original[j] * 0.6);
      count += 0.1;
    }
    p.needsUpdate = true;
  };
}

let wave = new wireWave();

renderer.setAnimationLoop((dt) => {

  wave.update();

  controls.update();

  renderer.render(scene, camera);
});

demo:
https://glistening-purrfect-mountain.glitch.me

code:

5 Likes
3

Perfect, works great thank you!

1 Like