Frontory

Open code, practice, and notes →

Download source with English comments · for reading

React Three Fiber · 25 Scene Switching and Resource Audits

Series contents · Technology map

Stage: demand Policy and Performance Verification · Editable example · Storage ID: react-three-fiber-step-25

Goals and learning outcomes

Prerequisites

Unit 25 continues using the deliverables and experiment records from Unit 24.

Key concepts and explanations

Visibility and Removal

visible=false leaves objects in the scene. unmount removes them from the tree, changing recreation costs and disposal policies.

Resource Tracking

Memory counts in renderer.info may not immediately reach 0 because of internal caches. Examine growth trends across repeated switches alongside dispose logs for each owner.

Practice setup

First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Use JSX in a separate React Vite project. Record compatible major versions of React and @react-three/fiber, the Three.js version, and the lockfile. This course uses stable WebGL-based APIs and does not mix in alpha WebGPU APIs. Handle frame updates with useFrame and ref.

The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.

Practice tasks

  1. Create two scenes and visible and unmount switching policies in src/SceneSwitcher.jsx.
  2. Alternate the same scenes 10 times, collecting geometry and texture counts and dispose logs.
  3. Create an ownership table for shared and primitive resources.

Variables to observe

VariableBaselineChangeExpected change / hypothesis
Switching PolicyHide with visibleunmountRecreation and disposal counts, and retained resource counts, differ.

Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.

Completion criteria

Self-check

  1. Does a geometry count above 0 always indicate a leak?
  2. Does useFrame in a hidden scene stop automatically?

Official references

Linked example and execution scope

Example source · Runtime environments and limits

This is an actual React Three Fiber Canvas experiment. A browser with WebGL support is required.

Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.

Next learning

Previous: DPR and Shadow Cost · Next: Alternative Controls and Errors in 3D UI

Open code, practice, and notes →