How to Get Started With 3D in React

Cody points to uses beyond games, including e-commerce previews, interactive websites, augmented reality, hardware design, and data visualization. Chris adds that 3D and real-time interaction could help web developers build experiences that feel more like native apps, including everyday apps for XR headsets.

Chris says many front-end developers assume 3D requires learning a game engine, unfamiliar languages, and a large body of new concepts. React Three Fiber makes it easier to try ideas in an existing React app. He and Cody recommend starting with examples, changing them, and learning through hands-on practice rather than waiting to master the math.

Mario names Three.js and React Three Fiber as options for building 3D scenes with React, while noting that WebGL and shader programming offer a lower-level route. The panel recommends beginning with either React or Three.js, then exploring React Three Fiber’s examples and editable CodeSandbox demos. The host also mentions Pixi and Babylon as other tools in the ecosystem.

Cody describes WebGPU and WebXR as evolving technologies that still need more tooling and implementation work. Mario cautions that moving to a lower-level graphics API will not automatically make an app faster; teams may need to redesign and optimize how they use it. The panel also highlights WebGPU compute shaders as a way to run parallel workloads such as machine learning and image processing on-device.