Screenshots

Build a 3D Drawing Web App with React & Three.js - Van Gogh's Bedroom in Arles 3D Scene

This project is a 3D drawing app built with React Three Fiber, featuring a 2D drawing canvas and an integration of Vincent van Gogh's famous painting, "Bedroom in Arles." The app allows users to draw with different brush colors and sizes while exploring a 3D representation of Van Gogh's iconic artwork.

Tutorial Video

https://youtu.be/V1QuUHgGdx4?si=e1h4L73x4ok0khyO

Installation

To run this project locally, follow these steps:

1. Clone the repository:

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

2. Navigate to the project directory:

 cd your-repo

3. Install the dependencies:

 npm install

4. Start the development server:

 npm run dev

5. Open your browser and visit http://localhost:5173/ to see the app in action

Future Enhancements

Here are some exciting ideas for future features and improvements:

• AI Avatar Integration: Integrate an AI-powered avatar using chatGPT or Claude Anthropic API to guide users through the drawing experience and provide interactive assistance.
• Collaborative Drawing: Implement real-time collaborative drawing features, allowing multiple users to draw together on the same canvas.
• Brush Customization: Add more brush options, such as different brush shapes, textures, and opacity control, to enhance the drawing experience.
• Gallery and Sharing: Create a gallery feature where users can save, view, and share their drawings with others.
• Animation and Effects: Incorporate animations and special effects to bring the 3D scene and drawings to life, making the app more engaging and interactive.
• Additional Artwork: Expand the app to include more famous artworks or allow users to import their own 3D models to create custom drawing environments.
• Mobile Compatibility: Optimize the app for mobile devices, enabling users to draw and explore the 3D scene on their smartphones or tablets.

Contributing

We welcome contributions from the community to enhance this project further. If you have any ideas, suggestions, or bug fixes, please feel free to submit a pull request or open an issue on the GitHub repository. When contributing, please follow the existing code style, maintain clear commit messages, and provide detailed explanations of your changes. Let's collaborate and make this 3D drawing app even more amazing!

Acknowledgements

We would like to express our gratitude to the following resources and libraries that made this project possible:

Three.js Vincent van Gogh's "Bedroom in Arles"

Special thanks to the open-source community for their continuous support and inspiration.

• Three.js
• React Three Fiber
• Vincent van Gogh's "Bedroom in Arles
• Van Gogh's Avatar
• Painting Brush

License

This project is licensed under the Creative Commons Attribution-NonCommercial (CC BY-NC) license. You are free to:

• Share: Copy and redistribute the material in any medium or format.
• Adapt: Remix, transform, and build upon the material.

Under the following terms:

• Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
• NonCommercial: You may not use the material for commercial purposes. This includes creating paid tutorials or profiting from the project in any way.

For more details, please see the Creative Commons Attribution-NonCommercial (CC BY-NC) license.