JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

Overview

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.

You might also like...

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

wired-elements πŸ‘‰ wiredjs.com Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups,

Nov 23, 2022

An application to map out game reserves using aerial photography, intelligent image stitching and AI driven recognition focus.

Map Out Game Reserves Using Aerial Photographs An application to map out game reserves using aerial photography, intelligent image stitching and AI dr

Sep 29, 2022

A facial recognition/detection app with Angular using Microsoft's Face API

A facial recognition/detection app with Angular using Microsoft's Face API

Deja-Vu Overview Deja-Vu is a client side application generated with Angular CLI version 13. The core function of this application is to detect, recog

Jul 30, 2022

Solve reCAPTCHA challenges by using offline speech recognition.

reCAPTCHA Solver Solve reCAPTCHA challenges by using offline speech recognition. It can be very useful when you want to do E2E tests with your applica

Nov 22, 2022

API4AI Samples: Face Detection and Recognition

 API4AI Samples: Face Detection and Recognition

API4AI is cloud-native computer vision & AI platform for startups, enterprises and individual developers. This repository contains sample mini apps that utilizes Facial Image Analysis API provided by API4AI.

May 24, 2022

🌠 Recognition platform built for developer endorsements

🌠 Recognition platform built for developer endorsements

Spekni Recognition platform built for developer endorsements Tech Stack 🎯 NextJS - UI framework β˜‘οΈ Vercel - Hosting and deployment πŸ”’ NextAuth.js: Gi

Aug 8, 2022

project using three.js and mediapipe

project using three.js and mediapipe

three.js-with-mediapipe project using three.js and mediapipe KOR λ―Έλ””μ–΄νŒŒμ΄ν”„μ™€ three jsλ₯Ό μ΄μš©ν•œ ν”„λ‘œμ νŠΈ μž…λ‹ˆλ‹€. ν•΄λ‹Ή μ½”λ“œ μž‘λ™μ„ μœ„ν•΄μ„œλŠ” μ˜μƒμ„ λ„£μ–΄μ£Όκ±°λ‚˜, videoκ°€ μ•„λ‹Œ cameraμ‚¬μš©ν•˜λ„λ‘ μˆ˜μ •ν•˜μ—¬μ•Ό

Sep 20, 2022

This fictive project was created to showcase my current skills using Three.js and GSAP.

This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Nov 22, 2022
Owner
Liad Yosef
Frontend Architect @ Duda
Liad Yosef
Hand gesture recognition with React.js, Tensorflow.js and Fingerpose

Hand gesture recognition with React.js, Tensorflow.js and Fingerpose

null 6 Oct 21, 2022
Planets fact site with animated solar system built with ReactJS.

Frontend Mentor - Planets fact site Table of contents Overview Intro The challenge Links My process Built with Features Setup Useful resources Overvie

null 70 Nov 19, 2022
A javascript solar (jalali) datepicker for HTML.

jdatepicker A Javascript solar (jalali) datepicker for HTML. Installation Install via NPM: npm install jdatepicker Install via CDN <script src="https:

Habibullah Mohammadi 11 Sep 15, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 5 Oct 3, 2022
Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

Text Engraving & Extrusion Text Engraving & Extrusion demo is implemented using Three.js, with Typescript and webpack5. Used THREE-CSGMesh as the core

Jiahong Li 3 Oct 12, 2022
three.js examples. if you are first in learning three.js , this will give you much help.

three-projected-material Three.js Material which lets you do Texture Projection on a 3d Model. Installation After having installed three.js, install i

null 22 Nov 2, 2022
App that allows you to control and watch YouTube videos using hand gestures. Additionally, app that allows you to search for videos, playlists, and channels.

YouTube Alternative Interaction App An app I made with Edward Wu that allows you to search and watch videos from YouTube. Leverages Google's YouTube D

Aaron Lam 2 Dec 28, 2021
College project done for the CG Artwork lecture in 2022. Used HTML for the indexes and mainly JavaScript (using to THREE.js). Ended with the final A grade (17.3 in scale grade).

CG Artwork Project 2022 This project was done by a group of 3 in 2022 with an educational purpose for the CG Artwork lecture in Instituto Superior TΓ©c

filipe_neves 3 Sep 19, 2022
Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap βœ¨πŸ‘Œ

⚠️ IMPORTANT UPDATE: July 13th, 2022 Hi, this is Oz Ramos and I wanted to quickly explain what happened to this project and what I plan to do moving f

Oz 36 Nov 22, 2022
Three JS Crash kursi 2022 (Amaliyot asosida)

Video kurs: https://www.youtube.com/watch?v=NL2Cv8N1Skg Kursdagi presentatsiya: https://bit.ly/3aRRf9M Loyiha demosi: https://harmonious-puppy-4ea920.

Javohir Hakimov 5 Oct 28, 2022