Getting started with React Three Fiber 3D Animations

This project is a demonstration of using React Three Fiber, a React renderer for Three.js, to create 3D animations in web applications. It explores various 3D objects, materials, and animations using the React Three Fiber library along with additional libraries like @react-three/drei and leva.

What is react three fiber

React Three Fiber is a library that bridges the gap between React, a popular JavaScript library for building user interfaces, and Three. js. It allows you to create 3D scenes using familiar React concepts, such as components and state management. React Three Fiber abstracts many of the complexities of ThreeJS.

Project Overview

Components:
- Cube: A 3D cube that rotates and moves along the z-axis.
- Sphere: A 3D sphere that reacts to hover and click events.
- Torus: A 3D torus with rotation animation.
- TorusKnot: A 3D torus knot with wobbling animation.
Lighting:
- Directional light with shadow casting.
- Ambient light for overall scene illumination.
Controls:
- Use of @react-three/drei for additional controls like OrbitControls.
- Use of leva for interactive UI controls.

Getting Started

Clone the Repository:

git clone https://github.com/your-username/your-3d-animation-project.git

Install Dependencies:

cd your-3d-animation-project
npm install

Run the Project:
```
npm start
```
Open your browser and visit http://localhost:3000 to see the 3D animation.

Dependencies

React Three Fiber: A React renderer for Three.js.
@react-three/drei: Useful helpers and abstractions for react-three-fiber.
leva: A React-based control panel for adding sliders and buttons for your demos.

Additional Notes