A simple wrapper to run vanilla ThreeJS code inside a React component.
- Uses React 18 and Vite. Also a branch showing use with Next.js.
- Uses Leva React GUI to show passing props from React -> ThreeJS.
React-three-fiber is great if you want to write your ThreeJS code with JSX. If you prefer coding ThreeJS with vanilla JS, this template might be useful for you. Any of the ThreeJS examples can be loaded into this wrapper.
In the project directory, you can run:
npm install- Install dependencies.npm run dev- Runs the app in dev mode.npm run build- Build app todistfolder.
In Dev mode you will notice the ThreeJS init() and dispose() calls are fired twice on mount. This is caused by using React.StrictMode which causes components to be rendered twice. Since the dispose() function cleans up properly you can safely ignore this issue. Double render does not happen in production mode.
main- Uses the Vite build tool.nextjs-build- Uses the Next.js framework. Based off ofnpx create-next-app.
In this example, the ThreeJS canvas size is defined by the #canvas-container CSS. ThreeJS resizing logic is fired by a ResizeObserver to allow changing the size of the canvas from React.
