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

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

Oct 28, 2022

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

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

Jan 3, 2023

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,

Jan 7, 2023

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

Dec 29, 2022
Comments
  • Support all screen sizes & window resizing

    Support all screen sizes & window resizing

    In order to support all screen sizes I made the canvas the size of the browser window, ask the camera for the highest possible resolution and cover the canvas with the camera video output in a way that it's fully covered with minimum edges cutting. The the canvas is then sent to the AI instead of the camera stream so that the edge of the screen is always the same as the edge of the detector. I use the same canvas to show the camera output on screen, scaling down the width & height to a quarter. I also added a resize event listener that updates the necessary stuff and a loading element that shows up when things are loading.

    opened by einatsof 0
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 7 Dec 7, 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 72 Jan 1, 2023
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 4 Jan 2, 2023
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
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
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
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

COS 301 - 2022 4 Sep 29, 2022
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

Wali Ullah 3 Jul 30, 2022