A-Frame Entity Pause ↔ three.js Render Loop: Interaction Question

Answer to the core question

In A‑Frame 1.x, this.el.pause() on an entity only stops that entity’s component tick callbacks, animations, and event listeners. The scene’s render loop, driven by THREE.WebGLRenderer, continues to call renderer.render(scene, camera) on every requestAnimationFrame tick. Therefore, pausing every entity does not guarantee that no further three.js frames are rendered.

What the render loop actually does

• Updates the scene graph (positions, rotations, etc.) that have already been computed or are static.
• Issues draw calls to the GPU for all objects in the scene.
• Runs even when the browser tab is in the background (unless the browser throttles it).

Why A‑Frame keeps rendering

The framework is designed for immersive VR and AR where continuous head‑tracking and frame timing are critical. Stopping the render loop would break XR sessions and frustrate users. The pause state is intentionally scoped to entity logic, not to rendering.

How to confirm that frames are still being rendered

// In a browser console
const renderer = document.querySelector('a-scene').renderer;
let frameCount = 0;
renderer.info.render.frame = 0;
setInterval(() => {
  console.log('Frames rendered:', renderer.info.render.frame);
}, 1000);

Even after calling entity.pause() on all entities, renderer.info.render.frame will continue to increment.

Stopping the render loop yourself

• Manual approach (A‑Frame 1.x): scene.renderer.setAnimationLoop(null) or replace the default loop with your own requestAnimationFrame logic.
• Upcoming API (A‑Frame 2.0 alpha): scene.pause() and scene.play() will pause/play the renderer automatically. This is still experimental.
• WebXR note: In an active XR session, renderer.setAnimationLoop(null) does not stop XR frames; you must call xrSession.end() to fully stop.

Should A‑Frame expose a collective pause flag?

It would be useful for developers who want a single event to stop rendering when the entire scene is idle. A common pattern is to dispatch a custom event, e.g., all-entities-paused, when the application has paused every entity, and then listen for that event to call scene.renderer.setAnimationLoop(null). Until A‑Frame 2.0 stabilizes the Scene.pause API, this pattern is the recommended workaround.

Next step: Verify your context

To give you the most accurate guidance, could you let me know if you are running inside a WebXR session? That changes how you should stop the render loop.