This React application employs the Three.js library and integrates the @react-three/fiber and @react-three/drei packages to construct an interactive 3D scene. The scene features dynamic shapes such as Cubes, Spheres, Tori, and TorusKnots, each with unique behaviors like rotation and color changes on interaction. The application uses the useFrame hook for continuous updates, and the OrbitControls component enables users to navigate the 3D space. Additionally, the Leva UI is incorporated for adjusting parameters of a directional light, offering sliders to control light color and intensity. The code structure adheres to React best practices, promoting modularity and reusability of components, resulting in a visually engaging and customizable 3D experience.
https://github.com/pmndrs/leva
https://github.com/pmndrs/drei