Join Pottery Workshop
🎨 Inspiration
While exploring Three.js and its shapes, I was inspired to design a pottery workshop UI that brings the art of pottery-making to life digitally. The idea of shaping 3D objects in real-time fascinated me, and using GSAP for fluid animations added an interactive touch. This project became a creative way to merge design, animation, and code.
💡 What it does
It offers a sleek UI and engaging user experience, bringing pottery-making to a virtual space with interactive elements.
🛠️ How we built it
This project was built using:
- Three.js for 3D modeling and rendering
- Vite as the build tool
- HTML, CSS, and JavaScript for the structure, styling, and logic
🚧 Challenges we ran into
While building the pottery workshop UI, I faced difficulties in:
- Randomly placing stars in the background scene
- Applying textures correctly to 3D objects
These challenges helped me better understand Three.js's coordinate systems and texture mapping, improving my skills in 3D rendering and scene management.
🎉 Accomplishments that we're proud of
- Successfully placed stars in the background with a smooth Parallax effect that responds to mouse movements.
- Achieved realistic object transformations with GSAP, creating a fluid and immersive experience.
📚 What we learned
- In-depth knowledge of Three.js, including geometry, textures, and object transformations
- Creating dynamic animations using GSAP
- Scene optimization and interactive UI development with JavaScript frameworks
🚀 What's next for Join Pottery Workshop
- Adding more customization options for pottery shapes and textures
- Implementing a save or export feature to download 3D models
- Optimizing performance for mobile devices and touch interactions
Built With
- css
- gsap
- html5
- javascript
- three.js
- vite
Log in or sign up for Devpost to join the conversation.