Unable to perform animation on a circleGeometry

[saurabhiam]

Hi, I am trying to recreate this https://codepen.io/hrahimi270/pen/yLOeWxm using @react-three/fiber. I have achieved this so far:
https://codesandbox.io/s/throbbing-snow-ljvx5

I am not able to figure out how to add wobbling effect. However, i figured in the codepen example above, the loop is being executed over the vertices array, which looks like bubble.current.geometry.attributes.position.array in this case

let bubbleGeometryArr = bubble.current.geometry.attributes.position.array;

for (let i = 0; i < bubbleGeometryArr.length; i+=3) {
    const b = new Vector3(bubbleGeometryArr[i], bubbleGeometryArr[i+1], bubbleGeometryArr[i+2]); // bubble vertices
    b.normalize().multiplyScalar(1 + 0.3 * simplex.noise4D(b.x * spikes, b.y * spikes, b.z * spikes + time, 3));
}

I am also not able to get how to perform update on these:

 bubble.geometry.computeVertexNormals();
bubble.geometry.normalsNeedUpdate = true;
bubble.geometry.verticesNeedUpdate = true;

I can see computeVertexNormals is a prop in <circleGeometry> but not able to perceive how to use it

Thanks in advance.

[saurabhiam]

I figured it out.

I had to create a new Vector3() and had to pull vector coordinated using fromBufferAttribute() and then set the normalised values using positionAttribute.setXYZ(i, vertex.x, vertex.y, vertex.z);

const update = () => {
    const positionAttribute = bubble.current.geometry.attributes.position;
    const vertex = new Vector3();
    for (let i = 0; i < positionAttribute.count; i++) {
      const b = vertex.fromBufferAttribute(positionAttribute, i);
      vertex.normalize().multiplyScalar(3 + 0.5 * simplex.noise4D( b.x * spikes, b.y * spikes, b.z * spikes + time, 5));
      positionAttribute.setXYZ(i, vertex.x, vertex.y, vertex.z);
    }
    positionAttribute.needsUpdate = true;
};

Posting the solution to help people stuck in the above scenario.

You can see it in action here: https://codesandbox.io/s/throbbing-snow-ljvx5

Thanks.