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

Community Help
1

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.

2 Likes
2

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

1 Like
3

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.

4

Hi, Fil!

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

Thanks a lot

5

the solution has been merged in 3D Graphs with THREE.js / Lao / Observable

6

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.

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.

2 Likes