Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theringsofsaturn/3d-drawing-app-threejs-react
https://github.com/theringsofsaturn/3d-drawing-app-threejs-react
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/theringsofsaturn/3d-drawing-app-threejs-react
- Owner: theringsofsaturn
- Created: 2024-04-15T18:24:27.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-05-13T14:14:13.000Z (8 months ago)
- Last Synced: 2024-05-13T17:59:10.684Z (8 months ago)
- Language: JavaScript
- Size: 40.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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:
```bash
git clone https://github.com/your-username/your-repo.git
```
2. Navigate to the project directory:
```bash
cd your-repo
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
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](https://github.com/mrdoob/three.js/)
- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)
- [Vincent van Gogh's "Bedroom in Arles](https://skfb.ly/6FYwn)
- [Van Gogh's Avatar](https://skfb.ly/o6WrM)
- [Painting Brush](https://skfb.ly/6WDGW)
## 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](https://creativecommons.org/licenses/by-nc/4.0/).