https://github.com/rmoghariya7/new-types-work-hackathon

A hackathon website build using react and threejs
https://github.com/rmoghariya7/new-types-work-hackathon

gsap hackathon hacktoberfest new-type open-source reactjs threejs

Last synced: 3 months ago
JSON representation

A hackathon website build using react and threejs

• Host: GitHub
• URL: https://github.com/rmoghariya7/new-types-work-hackathon
• Owner: rmoghariya7
• Created: 2024-10-17T18:11:13.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-10-19T20:58:42.000Z (4 months ago)
• Last Synced: 2024-10-20T03:30:22.109Z (4 months ago)
• Topics: gsap, hackathon, hacktoberfest, new-type, open-source, reactjs, threejs
• Language: CSS
• Homepage: https://pottery-workshop.netlify.app/
• Size: 78.1 KB
• Stars: 1
• Watchers: 1
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 🏺 Join Pottery Workshop

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.

## 🎨 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.

## 💡 Features

- Interactive 3D pottery creation experience

- Parallax effect that responds to mouse movements

- Smooth animations using GSAP

- Beautiful starry background for a calming workshop vibe

## 🛠️ Built With

- **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

## 🚧 Challenges

- 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.

## 🎉 Accomplishments

- Successfully created a responsive parallax effect

- Applied textures and animations to 3D objects

- Enhanced user interaction with seamless UI experience

## 📚 What We Learned

- Mastered Three.js basics and object transformations

- Learned to create engaging animations using GSAP

- Improved scene optimization and rendering skills

## 🚀 Future Plans

- 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

---

## 🛠️ Getting Started

### Prerequisites

Make sure you have **Node.js** and **npm** installed.

### Installation Steps

1. **Clone the repository:**

   ```bash

   git clone 

   cd pottery-workshop

   ```

2. **Install the dependencies:**

   ```bash

   npm install

   ```

3. **Run in local:**

   ```bash

   npm run dev

   ```