This was one of my first Three.js projects, I did it a long time ago, so I've decided to remake it, this time using Next.JS and react-three-fiber. It is not quite finished yet and there is a lot of room for improvement, but I hope that it can be a nice source for anyone starting in three.js with React!
You can check the live version here: Deploy
- Add a background city
- Better illumination
- Better Loading component
- Post processing effects
- Irradiance - Amazing tutorials to get started in both three.js and react-three-fiber!
- Devving It With Sohail - A great tutorial if you are beginning in three.js, also it was my base to get started with this application in React.
- R3F Examples - A collection of amazing react-three-fiber creations, that are really useful!
- Three.JS Reddit - A nice place to ask for help if you are stuck with some problem.
- Threejs-docs
- Threejs-examples
- Threejs-fundamentals
- Discover Threejs
- Do's and don'ts for performance and best practices
- react-three-fiber alligator.io tutorial by @dghez_
@react-three/gltfjsx– turns GLTFs into JSX components@react-three/drei– useful helpers for react-three-fiber@react-three/postprocessing– post-processing effects@react-three/flex– flexbox for react-three-fiber@react-three/xr– VR/AR controllers and events@react-three/cannon– physics based hooks@react-three/a11y– real a11y for your scenezustand– state managementreact-spring– a spring-physics-based animation libraryreact-use-gesture– mouse/touch gesturesleva– create GUI controls in seconds