These demos are real, you can click them! They contain the full code, too.

npm install react-three-fiber React-three-fiber is a small React renderer for Three-js. Why, you might ask? React was made to drive complex tree structures, it makes just as much sense for Three as it makes for the Dom. Building a dynamic scene graph becomes so much easier because you can break it up into declarative, re-usable components with clean, reactive semantics. This also opens up the eco system, you can now apply generic packages for state, animation, gestures and so on. #### Difference to react-three, react-three-renderer, react-three-renderer-fiber This is a small reconciler config with a few additions for interaction and hooks holding it all together. It does not know or care about Three internals, it uses heuristics for objects and attributes, so that we can get away without creating a strong dependency. Three is constantly changing, we don't want to rely on a specific version or chase their release cycle. This library works with version 1 as well as their latest. At the same time we don't want to alter any rules, if something works in Three in a specific way, it will be the same here. # How it looks like ... Copy the following into a project to get going. [Here's the same](https://codesandbox.io/s/rrppl0y8l4) running in a code sandbox. ```jsx import * as THREE from 'three' import React from 'react' import ReactDOM from 'react-dom' import { Canvas } from 'react-three-fiber' function Thing({ vertices, color }) { return ( console.log('we have access to the instance')}> new THREE.Vector3(...v))} onUpdate={self => (self.verticesNeedUpdate = true)} /> console.log('click')} onPointerOver={e => console.log('hover')} onPointerOut={e => console.log('unhover')}> ) } ReactDOM.render(

, document.getElementById('root') ) ``` # Canvas The `Canvas` object is your portal into Threejs. It renders Threejs elements, *not dom element*! ```jsx

react-three-fiber

Download Analytics