# Create waves effect with buffer geometry

Hello, I’ve tried to create a simple waves effect with buffer geometry without success. I have this code working with geometry.

``````function waves( plane, waveSize, magnitude ){
const theTime =  performance.now() * .001 ;
var center = new THREE.Vector2(0,0);
var vLength = plane.geometry.vertices.length;
for (var i = 0; i < vLength; i++) {
var v = plane.geometry.vertices[i];
var dist = new THREE.Vector2(v.x, v.y).sub(center);
v.z = Math.sin(dist.length()/- waveSize + (theTime)) * magnitude;
}
plane.geometry.verticesNeedUpdate = true;
}
``````

I have used as reference the example ‘how to update things’ . I don’t have clear the concept. I tried to put each vector in its position like previous example.

``````function wavesBuffer( planeBuffer, waveSize, magnitude ){

const theTime =  performance.now() * .001 ;
var positions = planeBuffer.geometry.attributes.position.array;

var x, y, z, index;
x = y = z = index = 0;

let center = new THREE.Vector2(0,0);

for ( var i = 0, l = planeBuffer.geometry.attributes.position.array.length; i < l; i ++ ) {

var dist = new THREE.Vector2(x, y).sub(center);

positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;

x += dist.x;
y += dist.v;
z += Math.sin( dist.length()/- waveSize + (theTime)) * magnitude;

}

planeBuffer.geometry.attributes.position.needsUpdate = true

}
``````

Does anybody know if is there a basic example of this?
Here a jsfiddle

Hi!
Try it this conceptual way:

``````var pos = planeBuffer.geometry.attributes.position;
let center = new THREE.Vector3(0,0,0);
var vec3 = new THREE.Vector3(); // for re-use

function wavesBuffer( waveSize, magnitude ){

const theTime = performance.now() * .001;
for ( var i = 0, l = pos.count; i < l; i ++ ) {

vec3.fromBufferAttribute(pos, i);
vec3.sub(center);

var z = Math.sin( vec3.length() /- waveSize + (theTime)) * magnitude;

pos.setZ(i, z);

}

pos.needsUpdate = true

}
``````

Here is your slightly changed fiddle:
https://jsfiddle.net/prisoner849/yxb8j7Lf/

5 Likes

Hi prisoner849, I going to check your code.
Thank you so much!!!