# Update vertices base on useFrame

**URL:** <https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000>\
**Category:** Questions\
**Tags:** vertices, animation, vertex, geometry\
**Created:** [February 14, 2023, 6:01am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000 "2023-02-14T06:01:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [February 14, 2023, 6:01am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/1 "2023-02-14T06:01:07Z")

</div>

Hi there,  
I get all vertices of the first render of an animated model. I draw a Points cloud base on that vertices. But I can’t sync that point cloud when animation running. How can I safely update?

```javascript
const getVertices = (mesh: THREE.Mesh) => {
    const position = mesh.geometry.getAttribute('position')
    const vertices = []

    for (let i = 0; i < position.count / position.itemSize; i++) {
      const vertex = new Vector3(position.getX(i), position.getY(i), position.getZ(i))

      vertices.push(vertex)
    }
    position.needsUpdate = true
    position.setUsage(THREE.DynamicDrawUsage)

    return vertices
  }

useFrame((state, delta) => {
    for (const mixer of mixers) {
      mixer.update(delta)
    }
    model?.traverse((node) => {
      if (node instanceof THREE.Mesh) {
        let veticesBone: Array<THREE.Vector3> = []
        veticesBone = getVertices(node)
        const pointsGeometry = new THREE.BufferGeometry().setFromPoints(veticesBone)
        const line = new THREE.Points(
          pointsGeometry,
          new THREE.LineBasicMaterial({ vertexColors: true, color: 0xff0000 })
        )

        line.geometry.attributes.position.needsUpdate = true
        line.geometry.computeBoundingBox()
        line.geometry.computeBoundingSphere()
        scene.add(line)
        veticesBone = []
      }
    })
  })

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 14, 2023, 9:36am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/2 "2023-02-14T09:36:50Z")

</div>

My hypothesis\* is:

The animation with skeletons happens in the GPU. Reading coordinates from the `position` attribute will read the coordinates that go to GPU, so they are yet unmodified by the animation. To get modified values you either have to get them from the GPU or to simulate the GPU calculation in JavaScript. Both options are not pleasant to implement.

* * *

\* hypothesis – (_noun_) (1) a supposition or proposed explanation made on the basis of limited evidence as a starting point for further investigation; (2) a proposition made as a basis for reasoning, without any assumption of its truth.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 14, 2023, 9:41am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/3 "2023-02-14T09:41:47Z")

</div>

this looks very strange to me. useFrame is your ticker, it runs 120 times per second. why would you want to create buffergeometry in there, that is beyond wasteful and will blow up the GC. not to mention that you should never add/remove stuff, there is no scene.add/scene.remove in react it doesn’t ever come to that. you mount elements by returning them.

there is an article that teaches you how to update things [three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-update-things)

1. return the buffer geometry declaratively
2. mutate the point positions directly in the buffer
3. set needsUpdate to true

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [February 14, 2023, 9:51am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/4 "2023-02-14T09:51:43Z")

</div>

Thanks @drcmda ,  
Because I draw vertex normal for an model. But the vertex not sync with animation model.

 ![Screenshot 2023-02-14 at 16.51.16](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/6/e6657c1243855b7de1619db4f8f52f2f42a79b3e.jpeg)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 14, 2023, 10:22am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/5 "2023-02-14T10:22:03Z")

</div>

yes, but the amount of vertices doesn’t change just because the model moves. all you need to do is create points once, and then update the vertices every frame, not create 120 buffer geometries per second.

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [February 14, 2023, 10:37am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/6 "2023-02-14T10:37:44Z")

</div>

Thanks. I created points. Could you please send me guide to update vertices by every frame?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 14, 2023, 12:21pm UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/7 "2023-02-14T12:21:26Z")

</div>

> **[Point cloud - CodeSandbox](https://codesandbox.io/s/point-cloud-zsyu9?file=%2Fsrc%2FApp.js)**
>
> Shows how to form self-contained components with their own state and user interaction.

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [February 14, 2023, 12:30pm UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/8 "2023-02-14T12:30:14Z")

</div>

Hi @drcmda,  
Thanks so much for that. But I can’t see the update vertices by frame in this demo. Sorry if I miss it.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 14, 2023, 12:31pm UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/9 "2023-02-14T12:31:45Z")

</div>

```plaintext
  useFrame((state) => {
    const t = state.clock.elapsedTime
    positions.forEach((p, i) => (positions[i] += Math[i % 2 ? 'sin' : 'cos'](1000 * i + t) / 100))
    points.current.geometry.attributes.position.needsUpdate = true
  })

```

according to threejs docs that’s the only way you should update buffergeometries, mutate the array, call needsUpdate

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [February 16, 2023, 4:55am UTC](https://discourse.threejs.org/t/update-vertices-base-on-useframe/48000/10 "2023-02-16T04:55:16Z")

</div>

Thanks so much.