Learning on Web Dev Open is free for all.

Immersive Web > The 3D mental modelA scene, a loop, and a resize you did not forget
Phase 07The 3D mental model338 of 434

A scene, a loop, and a resize you did not forget

Raw three.js, no helpers: one object, one light, a delta-timed loop, correct pixel ratio, and a frame that stops when nobody is looking.

Build40 minAI implements

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Drive animation from elapsed time rather than frame count
  • Handle resize and device pixel ratio correctly
  • Stop rendering when the canvas is hidden or off screen
Ask the community

Loading…

← PreviousLights, materials and what physical accuracy costsThe 3D mental modelNext →Three.js in one sittingThree.js, R3F, and when to use neither