pmndrs/react-three-fiber

React Three Fiber is a library that lets developers build 3D scenes on the web using React, the same component model used for ordinary web interfaces, instead of writing raw Three.js code directly. Three.js is a JavaScript library for 3D graphics in the browser, but it works through imperative commands: you create objects, set their properties, add them to a scene, and manage everything manually. React Three Fiber lets you describe that same 3D scene declaratively, writing HTML-like tags such as a mesh element that automatically translates into the corresponding Three.js object under the hood. The key advantage is that 3D objects become reusable React components with their own state and event handlers. A rotating cube, for example, can respond to mouse hover and click events the same way any button or form field would in a regular React app. Because it is a proper React renderer, the same class of thing as the library that renders React to a web page or a mobile app, it participates fully in React's update and scheduling system, which the README states can actually outperform raw Three.js for complex scenes. Critically, it does not limit Three.js in any way: every feature that exists in Three.js works in React Three Fiber, because the JSX tags simply map one-to-one to Three.js constructor calls. When Three.js adds new features, they are immediately available without waiting for this library to add special support. A developer would use this when they want to embed interactive 3D graphics, a product viewer, a game, a data visualization, into a React application without having to step outside the React mental model to do it. It is written in TypeScript and targets web browsers and React Native.