# After changing a THREE.js cell, why do I have to reload the page to make it run smoothly?

**URL:** <https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849>\
**Category:** Help\
**Created:** [November 22, 2021, 4:37am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849 "2021-11-22T04:37:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lao](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lao/32/5668_2.png) [@Lao](https://talk.observablehq.com/u/Lao)\
**Post date:** [November 22, 2021, 4:37am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/1 "2021-11-22T04:37:35Z")

</div>

I’ve decided I want to make a 3D graphing calculator with THREE.js. When I change the equation, or modify the THREE.js widow’s code, the framerate goes down, and I have to restart the page to get it to run smoothly again. I’m using buffer geometry, and I’m suspecting the old data isn’t being cleared when the window is updated. Anyone know how to fix this? The two ways I can think of is to automatically clear the old memory, or someone make a mutable function so changing it doesn’t cause the cell to restart.

> **[3D Graphs with THREE.js](https://observablehq.com/d/effa8756f96f189a)**
>
> The joint probability of two independent beta distributions

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 22, 2021, 7:25am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/2 "2021-11-22T07:25:32Z")

</div>

Your analysis is correct. The recursive calls to requestAnimationFrame never stop. I’ve sent you a suggestion that animates from “outside” the cell.

---

<div class="post-metadata">

**Author:** ![Lao](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lao/32/5668_2.png) [@Lao](https://talk.observablehq.com/u/Lao)\
**Post date:** [November 23, 2021, 12:22am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/3 "2021-11-23T00:22:20Z")

</div>

That solved the problem, mucho gracias! I had no idea you could control the updating externally. I’ll definitely be using that trick in the future.

---

<div class="post-metadata">

**Author:** ![vsueiro](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/vsueiro/32/5945_2.png) [@vsueiro](https://talk.observablehq.com/u/vsueiro)\
**Post date:** [December 28, 2021, 11:27am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/4 "2021-12-28T11:27:22Z")

</div>

Hi, Fil!

Could you please share the suggestion here?  
I’m running into a similar issue and I think that would help me 🙂

Thanks a lot

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [December 28, 2021, 6:26pm UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/5 "2021-12-28T18:26:34Z")

</div>

the solution has been merged in [3D Graphs with THREE.js / Lao / Observable](https://observablehq.com/@laotzunami/3d-graphs-with-three-js)

---

<div class="post-metadata">

**Author:** ![Lao](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lao/32/5668_2.png) [@Lao](https://talk.observablehq.com/u/Lao)\
**Post date:** [January 9, 2022, 1:43am UTC](https://talk.observablehq.com/t/after-changing-a-three-js-cell-why-do-i-have-to-reload-the-page-to-make-it-run-smoothly/5849/6 "2022-01-09T01:43:23Z")

</div>

I’ve found that using mutable variables to control a THREE.js works really well because it does not restart the cell. I just made a notebook that stores all values as the object “input”, which is used in the render loop.

> **[Torus Circles and Fundamental Polygon](https://observablehq.com/@laotzunami/torus-polygon-and-circles)**

You should be able to store functions as method’s in the mutable object. Just make sure something updates the mutable object. In that torus notebook, when you change the slider values, that cell updates the mutable variables.
