https://github.com/nhanz01/hatelier

HAtelier: Interactive Real-Time 3D Drawing Guide Using Hand Gestures In WebAR
https://github.com/nhanz01/hatelier

aframe augmented-reality drawing location-based mediapipe mediapipe-hands webar

Last synced: 3 months ago
JSON representation

HAtelier: Interactive Real-Time 3D Drawing Guide Using Hand Gestures In WebAR

• Host: GitHub
• URL: https://github.com/nhanz01/hatelier
• Owner: NHanz01
• Created: 2025-06-07T13:19:35.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-06-15T18:44:26.000Z (7 months ago)
• Last Synced: 2025-06-15T19:23:39.671Z (7 months ago)
• Topics: aframe, augmented-reality, drawing, location-based, mediapipe, mediapipe-hands, webar
• Language: JavaScript
• Homepage: https://nhanz01.github.io/HAtelier/
• Size: 170 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [ Welcome To HAtelier! ]

What is HAtelier? Pronounced as "Heart-Atelier", it is an interactive real-time 3D drawing guide using hand gestures in WebAR. 

It serves as my Final Year Project (FYP), also known as Projek Sarjana Muda (PSM), for my degree.

## 🤺 Demo Video

![HAtelier Demo](https://github.com/user-attachments/assets/fbcd7038-8520-4230-a2be-b3058afb546d)

Test out HAtelier [here!](https://nhanz01.github.io/HAtelier/)

- There are two modes: `Free Mode` and `Tutorial Mode`.

- `Free Mode` allows you to draw however you want.

- `Tutorial Mode` allows you to choose a guide for drawing.

- There are 3 Difficulties:

  > `Easy:` Circle, Triangle, Square.

  >> `Medium:` Flower, Bunny, Sun.

  >>> `Hard:` House, Tree, Fish.

## 🤖 Technology Used

- `Mediapipe`: For hand-tracking and gesture recognition.

- `Ar.js`: Location-based augmented reality support.

- `A-Frame`: Handles 3D scene rendering and drawing functionalities.

## ✨ Portfolio

Feel Free to Visit My [Portfolio!](https://nhanz01.github.io/NFZR_Portfolio/)

_Last updated: 13 JUNE 2025_