Trouble animating plane geometry

Hello, I am trying to animate a plane geometry with a moving sine wave: Ray Test - CodeSandbox

I put comments in my code; each animated item has a tick function (cube, plane) that gets called by the clock each render cycle.

Here is the tick function for the plane. It used the elapsed time

plane.tick = (delta, elapsedTime) => {
      const { position } = planeGeo.attributes;
      plane.tick = (delta, elapsedTime) => {
      const { position } = planeGeo.attributes;
      for (let i = 0; i < position.count; i++) {
        let x = position.getX(i);
        let y = position.getY(i);
        let z = position.getZ(i);
        // This should cause the z axis to wave over time
        z = Math.sin(
          Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) +
            Math.sin(2 * Math.PI * elapsedTime)
        );
        // Attemptd animated sine wave 2d
        // z = Math.sin(x + elapsedTime);
        // Basic, non-animated sine wave
        // Math.sin(Math.pow(x, 2) + Math.pow(y, 2))
        position.setXYZ(i, x, y, z);
      }
    };

I sourced my equation from here: Sine Wave Surface

While my equation for making the plane wave overtime may be wrong, it should be moving. If I try the following equation that is more correct:

// Attemptd animated sine wave 2d
z = Math.sin(x + elapsedTime);

If elapsedTime is changing, why is only my cube animating?

Hi!
Try this:

      for (let i = 0; i < position.count; i++) {
        let x = position.getX(i);
        let y = position.getY(i);
        let z = position.getZ(i);
        // This should cause the z axis to wave over time
        z = Math.sin(
          Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) +
            Math.sin(2 * Math.PI * elapsedTime)
        );
        // Attemptd animated sine wave 2d
        // z = Math.sin(x + elapsedTime);
        // Basic, non-animated sine wave
        // Math.sin(Math.pow(x, 2) + Math.pow(y, 2))
        position.setXYZ(i, x, y, z);
      }
      position.needsUpdate = true; //add this line
1 Like