Making Games in React
summary
Builds a working mini game with react-three-fiber and a physics layer via use-cannon, showing the actual code: a Canvas with meshes, MeshStandardMaterial, ambient/point/strip lights, a paddle tied to mouse by reading viewport width, a ping‑pong ball defined as a physics sphere, gravity set to about -30, restitution increased above 1 so the ball bounces, a contact plane that respawns the ball, and an animation loop using the useFrame hook — all implemented in roughly sixty lines and visibly running.
AI-written summary · about
chapters (10)
- 0:00Introduction to React Three
- 3:003D space and concepts
- 4:15Setting up the scene
- 7:54Creating game components
- 9:19Integrating physics
- 11:50Mouse control and mechanics
- 15:37Game respawn logic
- 18:21Adding game elements
- 21:33Closing thoughts
- 22:28Q&A session
related talks
21mBreaking out of the confines: making games in React
26mLet’s create a React powered game in 25 minutes
25mReact For Game Development
45mMaking Your Website Stand Out With React Three Fiber
37mCreating 3D Experiences with React
36mBlasting React into Space: Building fluid interface swith React and WebGL
04mBuilding a puzzle game in React/Redux
35mGamedev on React + WebGL