https://github.com/shahdinsalman23/react-animatedcircle

A 3D rotating cylinder with custom textures, built using React Three Fiber, featuring optional postprocessing effects for enhanced visuals and interactivity.
https://github.com/shahdinsalman23/react-animatedcircle

react-three-drei react-three-fiber reactjs tailwindcss threejs vite

Last synced: about 2 months ago
JSON representation

A 3D rotating cylinder with custom textures, built using React Three Fiber, featuring optional postprocessing effects for enhanced visuals and interactivity.

• Host: GitHub
• URL: https://github.com/shahdinsalman23/react-animatedcircle
• Owner: shahdinsalman23
• Created: 2024-11-17T17:54:34.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-17T18:08:55.000Z (about 2 months ago)
• Last Synced: 2024-11-17T19:18:40.898Z (about 2 months ago)
• Topics: react-three-drei, react-three-fiber, reactjs, tailwindcss, threejs, vite
• Language: JavaScript
• Homepage: https://react-cylindricalmodel-shahdin.vercel.app/
• Size: 216 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cylindrical Model Animation with React Three Fiber

This project showcases a 3D animated cylindrical model with a custom texture, built using **React Three Fiber**, **Drei**, and **PostProcessing Effects**. It includes smooth rotation and ambient lighting for an interactive and visually appealing experience.

## 🚀 Live Demo

Check out the live version here: **[Live Demo](https://your-live-demo-link.com)**

## 📂 GitHub Repository

Explore the source code here: **[GitHub Repository](https://github.com/your-username/your-repo-name)**

---

## 🎯 Features

- 3D animated rotating cylinder.

- Custom texture mapping with `@react-three/drei`.

- Optional bloom and tone-mapping effects for enhanced visuals.

- Lightweight and efficient rendering with **React Three Fiber**.

---

## 🛠️ Installation

Follow these steps to run the project locally:

### Clone the repository:

```bash

git clone https://github.com/your-username/your-repo-name.git

cd your-repo-name

```

## 🎮 Usage

- Observe the 3D rotating cylinder in the canvas.

- Experiment with the commented-out postprocessing effects in the code (e.g., `Bloom` and `ToneMapping`) for advanced visuals.

- Update the texture (`image.png`) in the `public` directory to customize the model's appearance.

## 🌐 Resources

- [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)

- [Drei - Essential Helpers for React Three Fiber](https://github.com/pmndrs/drei)

- [React PostProcessing Effects](https://github.com/pmndrs/react-postprocessing)

---

## 🤝 Contributing

Contributions are welcome! Feel free to:

- Open issues for bugs or suggestions.

- Submit pull requests with improvements.

---

## 📜 License

This project is licensed under the **MIT License**. Feel free to use it for personal or commercial purposes. See the `LICENSE` file for more details.

---

## 🧑‍💻 Author

**Shahdin Salman**  

- [GitHub Profile](https://github.com/shahdinsalman23)  

- [Linkedin](https://www.linkedin.com/in/shahdinsalman/)

---

## ⭐ Acknowledgements

- **React Three Fiber** for powering the 3D rendering.

- **Three.js** for the 3D graphics library.

- Special thanks to the **Drei** library for its incredible helper functions.