Welcome to this demo by Leandro Reschke of Three.js integrated within a React application using react-three-fiber. This repository showcases simple 3D scenes using a variety of three.js technologies working in harmony.
- 🔵 Three.js Integration: Demonstrates the use of Three.js within a React application, highlighting the library's vast 3D capabilities.
- 🪐 React-Three-Fiber: Shows how react-three-fiber serves as the bridge between React and Three.js, allowing developers to work with 3D components in a React-friendly way.
By exploring this repository, you'll get a deeper understanding of:
- The basic structure of a React application implementing Three.js.
- How to build and manipulate 3D objects using Three.js within a React environment.
- Leveraging react-three-fiber to incorporate Three.js into React's declarative style.
- Three.js docs - Three.js docs. Super easy to follow, a lot of different demos as well.
- React Three Fiber docs - React Three Fiber documentation.
- Performance Tips - Great performance tips for Three.js and R3F.
- Transparency Tips - Amazing article about transparency and why sometimes it's better to avoid it.
- R3F-Drei - A library that abstracts the implementation of different shaders and tools for React Three Fiber.
- R3F-Perf - A library specifically to measure performance with a great set of tools
To test the application without building it locally, you can visit the live demo at https://leandroreschke.github.io/web-third-dimension/.
This project uses Yarn as its package manager. To get started with the demo, clone this repository and follow the setup instructions.
yarn upgrade. This project has specific library versions that ensure compatibility and functionality. An unsupervised upgrade may lead to compatibility issues and unexpected behaviors.
Keep an eye on this repository as more demos illustrating the capabilities of Three.js, React, and react-three-fiber will be added in the future.