# How to make an animated IcosahedronGeometry "blob" with perlin noise?

**URL:** <https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236>\
**Category:** Questions\
**Tags:** positioning, vector3, bufferattributes, geometry\
**Created:** [May 14, 2021, 6:25am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236 "2021-05-14T06:25:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tim](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@Tim](https://discourse.threejs.org/u/Tim)\
**Post date:** [May 14, 2021, 6:25am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/1 "2021-05-14T06:25:01Z")

</div>

Hey all!

I’ve been playing with Three.js for the last few days, but by now I got stuck because all the differences in builds and examples on the internet. 🙂

Them main item I get stuck on is `IcosahedronGeometry`. The shift from `geometry.vertices` to `geometry.attributes` Is where I get stuck. I understand it went from a vector array to a single array for each coordinate. But I don’t know how to get → calculate → and set the new values.

[This is an example that gets closest to the effect I have in mind.](https://codepen.io/Sidechain_Studio/pen/VxdgMX?editors=1111) In `updateVertices()` you can see a perlin noise beeing applied to the vectors.

[And this is my current approach.](https://jsfiddle.net/timrr/v8tdesc6/9/) But the blob just disappears in the abyss of nothingness.

```javascript
function setNewPoints( a ) {
    const positionAttribute = blob.geometry.getAttribute( 'position' );
    let newPositionAttribute = [];
    const vertex = new THREE.Vector3();

    for ( let vertexIndex = 0; vertexIndex < positionAttribute.count; vertexIndex++ ) {

        vertex.fromBufferAttribute( positionAttribute, vertexIndex );

        var perlin = noise.simplex3(
            vertex.x * 0.006 + a * 0.0002,
            vertex.y * 0.006 + a * 0.0003,
            vertex.z * 0.006 );

        var ratio = perlin * 0.4 * ( mouse.y + 0.1 ) + 0.8;
        vertex.multiplyScalar( ratio );

        newPositionAttribute.push(vertex.x, vertex.y, vertex.z);

    }
    blob.geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( newPositionAttribute, 3 ) );
    blob.geometry.attributes.position.needsUpdate = true; // required after the first render
    blob.geometry.computeBoundingSphere();
}

```

The code above is, I think, the main focus point of the effect.  
The MaxTween morphs the mouse with an ease, so that the height of the Perlin is not abrupt.

**So, the question would be, how could I get my code in the current build to work and look like the example.**

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 14, 2021, 8:39am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/2 "2021-05-14T08:39:34Z")

</div>

Hi!  
You perfrom noise computation on already changed vertex coordinates, whereas you need to do it on original coordinates.  
Add a new buffer attribute, where you store the original coordinates, then, in animation loop, read data from it, apply the noise, save the result into the attribute with actual positions.

Example: [https://jsfiddle.net/prisoner849/p1o8hrvn/](https://jsfiddle.net/prisoner849/p1o8hrvn/)

---

<div class="post-metadata">

**Author:** ![Tim](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@Tim](https://discourse.threejs.org/u/Tim)\
**Post date:** [May 14, 2021, 9:00am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/3 "2021-05-14T09:00:32Z")

</div>

Holy shjizzle, that would have taken me ages to figure out 🙂 Thanks for the example, I wouldn’t have thought to set it as an attribute to the object itself 🙂 Thanks Paul!

Now I have you here, do happen to know how to smooth the surface? It now is hard and looks low poly.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 14, 2021, 9:04am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/4 "2021-05-14T09:04:56Z")

</div>

Increase the `detail` parameter for `IcosahedronGeometry`.  
For example: `let blobGeometry = new THREE.IcosahedronGeometry( 50, 10 );`. 10 is the level of detail. The greater that value, the smoother surface you get, as the geometry has more vertices.

---

<div class="post-metadata">

**Author:** ![Tim](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@Tim](https://discourse.threejs.org/u/Tim)\
**Post date:** [May 14, 2021, 9:10am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/5 "2021-05-14T09:10:42Z")

</div>

> [@prisoner849](#):
>
> Increase the `detail` parameter for `IcosahedronGeometry` .

Gorgeous, that looks way better 🙂 Thanks.  
New result: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/timrr/uwcndeqh/4/)

With lights I see the blob is turning itself inside-out. I guess that has something to do with the Perlin Noise. It even feels like one point of the object is not affected

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 14, 2021, 9:19am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/6 "2021-05-14T09:19:46Z")

</div>

Also you need to re-compute vertex normals after you changed vertex coordinates for correct shading.

```javascript
    blob.geometry.attributes.position.needsUpdate = true;
    blob.geometry.computeVertexNormals();

```

And I would merge vertices of the geometry to have smooth shading: [https://jsfiddle.net/prisoner849/cL97oerq/](https://jsfiddle.net/prisoner849/cL97oerq/)

---

<div class="post-metadata">

**Author:** ![Tim](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@Tim](https://discourse.threejs.org/u/Tim)\
**Post date:** [May 14, 2021, 9:46am UTC](https://discourse.threejs.org/t/how-to-make-an-animated-icosahedrongeometry-blob-with-perlin-noise/26236/7 "2021-05-14T09:46:10Z")

</div>

Thanks for that Paul. Now, what I have to do is t figure out how the perlin in the script works to get it more like the [first sketch](https://codepen.io/Sidechain_Studio/pen/VxdgMX?editors=1111).

But that’s playing with this part I think

```javascript
        var perlin = noise.simplex3(
            vertex.x * 0.006 + a * 0.0002,
            vertex.y * 0.006 + a * 0.0003,
            vertex.z * 0.006 );

        var ratio = perlin * 0.4 * ( mouse.y + 0.1 ) + 0.8;
        vertex.multiplyScalar( ratio );

```