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

1. Clone the Repository:

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

2. Install Dependencies:

   cd your-3d-animation-project
   npm install

3. 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

• Feel free to customize and extend this project to explore more features and capabilities of React Three Fiber.
• Don't forget to check out the official documentation of React Three Fiber for more details and examples.