An interactive 3D pottery workshop UI built with Three.js and GSAP, offering users a creative experience of shaping and interacting with virtual pottery. Move your mouse to experience the parallax effect and enjoy smooth animations in real time.

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.

• Interactive 3D pottery creation experience
• Parallax effect that responds to mouse movements
• Smooth animations using GSAP
• Beautiful starry background for a calming workshop vibe

• Three.js - 3D rendering library
• Vite - Lightning-fast build tool
• GSAP - Animation library for smooth transitions
• HTML, CSS, JavaScript - Front-end technologies for structure, styling, and logic

• Placing stars randomly in the background
• Correctly mapping textures onto the 3D objects

These challenges helped me better understand coordinate systems, scene management, and texture handling in Three.js.

• Successfully created a responsive parallax effect
• Applied textures and animations to 3D objects
• Enhanced user interaction with seamless UI experience

• Mastered Three.js basics and object transformations
• Learned to create engaging animations using GSAP
• Improved scene optimization and rendering skills

• Add more customization options for pottery shapes and textures
• Implement a feature to save or export 3D models
• Optimize the experience for mobile devices and touch gestures

Make sure you have Node.js and npm installed.

1. Clone the repository:

   git clone <repository-url>
   cd pottery-workshop

2. Install the dependencies:

   npm install

3. Run in local:

   npm run dev