GLSL trouble with sine curve

Question

I am trying to alter vertex positions in a vertex shader to form a sine curve along a shape's surface.

As seen in the middle of the page here , a sine wave moving vertically along the z axis could be generated with the simple pattern z = sin(u_time + y); . For every new Y pos, increment the Z pos inward/outward, forming a sine path.

For some reason the outcome is different in my vertex shader. The surface of the shape is changing, but it always stays flat, instead of conforming to a sine curve. See the vertex shader in the example here: https://jsfiddle.net/35w7fsqo/1/ , namely the line

p.z += sin((time + position.y) / duration) * amplitude;

Here's a diagram showing what I mean:

What do I need to do to get this surface to conform to a sine curve?

Answer 1

The BoxGeometry which this shader was running on didn't have enough vertices along the face, it only had one at each corner. I added more heightSegments in the constructor like so var geometry = new THREE.BoxGeometry(200, 200, 200, 1, 10, 1); and now sine curves are visible: https://jsfiddle.net/35w7fsqo/2/