Building a Solar System using Hand Recognition and Three.js 🚀

image

Accompanying code for JSNation 2022 talk. Demo video here: https://www.youtube.com/watch?v=pQtlMjw6K0M

Installation

yarn

Usage

yarn watch

Opens in in http://localhost:1234.

What is going on

This project builds on Mediapipe‘s hand recognition in order to create a mini-solar system with Three.JS. Assets from Sanderblue’s Solar System.

Supported:

  • Snap to create the stars
  • Snap to create the sun
  • Flick to move sun into center
  • Finger wave to make the sun spin
  • Snap to create Earth (and Mars)
  • Finger wave to make Earth/Mars spin
  • Flick up to move Earth/Mars into orbit
  • Using hands to rotate and dolly the camera

Bugs

Yes, there will be. Issues/contributions are welcome.

GitHub

View Github