Skip to content

Light version: pages open quickly, without the 3D graphics. You are seeing the light version because the 3D graphics would be slow on this device. The content is the same.

Turn on 3D

Preparing the graphics. This can take a moment on the first visit.

Henry Lõiv

Web design & development

Quick Answer

Why does Three.js lose its context after navigation?

3D & WebGL 2 min read

When context loss follows repeated SPA navigation, inspect resource and renderer lifecycles. Removing an object from a scene does not automatically release all its geometry, materials and textures. However, a context lost event alone does not prove a memory leak. 13

Repeat one navigation loop

Enter the 3D view, leave it and repeat several times. Check whether renderers, event listeners or animation loops accumulate. renderer.info helps track resource counts; it is not an exact total-GPU-memory meter. 1

Clean up by ownership

Stop the departing view’s rendering loop and remove its own listeners. Dispose of resources that are no longer used. Textures need separate attention: disposing of a material does not dispose of every texture it references. 12

Do not blindly release shared resources that the next view still needs. Decide whether the renderer belongs to the entire application or to one view, and make that ownership explicit.

Plan a failure state

Handle webglcontextlost where appropriate and provide a meaningful fallback. Restoration needs deliberate application support; the visitor should not be left staring at an unexplained blank canvas. 3

If resource counts stabilize across repeated visits, investigate device and driver behavior too. Avoid labelling every context loss as a Three.js defect or a confirmed memory leak without the evidence to distinguish them.

Related reading

How this 3D portfolio is built · Separate pixel cost from lifecycle problems

Sources

  1. Three.js: disposing of GPU resources
  2. Three.js: resource cleanup
  3. MDN: webglcontextlost event

Fact checked:

Let’s talk about your project

Tell me about your project

Tell me what you’d like to build or improve. You don’t need a finished brief — we’ll work out the scope and next steps together.

01 How can I help?
02 How many pages do you need?
03 Which extras do you need? Choose all that apply
04 When does it need to be ready?
05 Project details
06 Your contact details

Enquiry received

Thank you!

Your enquiry has been received. I usually reply by email within 2 working days.