- Create react app:
create-react-app my-app
- Add three.js:
yarn add three
- Copy and paste spinning cube example from three.js front page, and expose a function to interact with react.js:
export function mount( container ) {
if( container ) {
container.insertBefore( renderer.domElement, container.firstChild );
resize();
} else {
renderer.domElement.remove();
}
}
In react component, pass this function to useCallback:
import { mount } from './3d';
export default function Cube() {
const containerRef = useCallback(mount, []);
return <div className="Cube-container" ref={containerRef}></div>
}
- Add some tests if you feel like.