Open code, practice, and notes →
Download source with English comments · for reading
React Three Fiber · 08 useThree Scope and Selection
Series contents · Technology map
Stage: 3D Input and UI State · Editable example · Storage ID: react-three-fiber-step-08
Goals and learning outcomes
- The useThree call is inside a Canvas child.
- Record size and viewport in their different units.
Prerequisites
Unit 8 continues using the deliverables and experiment records from Unit 7.
Key concepts and explanations
Canvas Context
useThree is available only in components inside Canvas. A parent returning Canvas does not yet have that Context.
Selective Subscription
A selector makes dependencies clear by reading only the required state. Do not assume every imperative change to camera internals is automatically subscribed to.
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
- Create src/SceneInfo.jsx as a Canvas child, and read size and viewport.
- Display measurements in a DOM panel through a low-frequency reporting callback.
- Change the parent width from 400 to 800, and compare pixel size with the world viewport.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Parent Width | 400px | 800px | Pixel size and the camera-based world extent each update. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The useThree call is inside a Canvas child.
- Record size and viewport in their different units.
Self-check
- Are size.width and viewport.width the same value?
- Does a selector automatically track changes to camera.position.x?
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: useFrame and Time-based Rotation · Next: Camera Control and projection Updates