Threejs unexplained crash "Out of Memory"

Maybe you’re recreate instancedBufferGeometry every frame

I don’t have instancedBufferGeometry in my source code

I didn’t used JavaScript “new” in my codes.

Can you give an example of how to use Three.js without an occasional “new”?

1 Like

I was referring to for ( new i ; i < o.lenght ; i++ ) { ... } There are “new THREE.” but this are not recurring codes. I think that there must be a variables in threejs that are recurring that the garbage collector can not clear and it accumulates until it crashes.

Add stats to see memory. Then one by one delete some stuffs from code and see then memory is ok


where di u get that api? here is the source code so u check where does the crash occurs.

Its from three.js three.js examples
But modifed version
stats.js (4.0 KB)

<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript">
var stats=new Stats();
function animate(){
1 Like

The engine is very big i cant seek what to delete. You need to do it self.

I scanned the source code so many times and I couldn’t find what is causing the memory leak, I am thinking about rewriting it again carefully.

Delete stuff one by one and you will find bottle neck


If I may interpret @Chaser_Code 's suggestion:

Reduce the complexity of your code by commenting out sections/features of your code base until the problem disappears.

Re-writing 120+ MB of zipped code seems like a huge task which I’d definitely try to avoid. In re-writing, you’d go the other way around, adding stuff to a bare-bones minimum until it breaks.

In any case: the last portion you took away until the problem vanished, or added before the problem re-surfaced, is likely to be the culprit.

P.S.: try to identify test cases (user interactions) which reliably introduce the problem. Re-run those before introducing the next level of complexity, going up. Or: going down - until the problem goes away.


If you are dynamically adding objects to your webgl environment, you also need to dynamically clear objects loaded in to memory that are no longer required, this is generally known as “garbage collection” in webgl and reffered to as dispose() in threejs there are many topics on here covering the disposal of no longer needed textures and geometries


this is already integrated in the source code and several memory leak routines that clears unused variables but the browser still crash after sometimes.

I have a similar problem. When you refresh or reload the page with the button in the browser, memory allocation doesn’t free and the amount of memory used grows up.
May be you have reloaded the page a lot of times, and memory gets full

have u check the memory leakage from the other api, like cannon.js?

Just profile your game using the Devtools they will tell you what is blowing up memory. Creating objects instead of reusing (pooling) is a major reason for hickups (laggs) and page crashes, as well as WebGL related garbage that usually rather leads to a context loss but can also crash the page in some cases.


I traced the problem (not in threejs) the crash occures when cars are unloaded (variables are not actually disposed) so when cars are reloaded the raycast vehicle function creates new variables (does not reused the undisposed variables), this loop cascades until it crashes the browser.

1 Like

the cannon-es.js has memory leak, i hope the cannon will be updated and address the bugs:

  1. memory leak
  2. trimesh and polyhedron bugs
  3. raycast vehicle postStep should be removed when vehicle is removed from world

The cause of the browser crash “out of memory” was not because of threejs or cannon-es, the crash occurred because the function mesh-to-trimesh ( mesh ) is returning undefined.

function mesh-to-trimesh ( mesh ) {
  for ( i = 0 ; i < mesh.lenght ; i ++ ) {
  return shape
shape = mesh-to-trimesh ( mesh )

I fixed the bug by making the function mesh-to-trimesh ( mesh ) an async function and adding await to the call

async function mesh-to-trimesh ( mesh ) {
  for ( i = 0 ; i < mesh.lenght ; i ++ ) {
  return shape
shape = await mesh-to-trimesh ( mesh )