Skip to content

makc/react-three-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How to put three.js scene into react.js app:

  1. Create react app: create-react-app my-app
  2. Add three.js: yarn add three
  3. 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>
}

voila

  1. Add some tests if you feel like.

pass

About

How to put three.js scene into react.js app

Topics

Resources

License

Stars

Watchers

Forks