a flying quadcopter in three.js
Tags: fpv, three, javascript, drone
Published: 2022-01-13 15:43:33

What's up **HACKERS**?

I've gotten into flying fpv drones recently 

{% youtube qUN-754-oms %} 

_my very first cute DVRs montage here_

So i got curious if i could quickly put something that resembles flying a quad, in browser, myself. 

First i kinda hoped THREE.js just has QUADCOPTER CAMERA CONTROLS in `/examples/` but no chance :( 

Don't get me wrong, there's a whole ton of good quadcopter simulators [Liftoff being my favourite](https://www.liftoff-game.com/) the journey is the reward tho, so if you have a similar itch or just curious - you're welcome to this insane journey of mine  

### WORK IN PROGRESS DEMO VIDEO HERE
{% youtube 9gAUaamdoeQ %} 

### Things i think i'll need

- renderer: Gotta be THREE.js This (and unity) are all i know
- 3d physics engine: [Cannon.js](https://schteppe.github.io/cannon.js/) and [Ammo.js](https://github.com/kripken/ammo.js/) seem pretty inactive in recent years. Perhaps the boys just GOT IT DONE, and it's perfect like that. I don't know. In my search for a "more recent" development i have picked [Oimo.js](https://github.com/lo-th/Oimo.js/) 

### The very high-level architecture of this whole thing
If you have read my best-seller "match three game tutorial" series, you know there's an update() loop for rendering the graphics. With physics engine we would essentially have two separate update loops: loop one would update rigid body physics calculations, loop two would just display them as meshes on screen (duh) 

Upforce of fans, tilting - all gonna become applied forces in physics engine, yaw is just angular velocity on OY for example.

Oh, and we need to implement controls. Luckily for me [gamepad api](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) also applies to any RC radio you could connect to a PC for playing a sim, so my [
LiteRadio 2 SE Radio](https://betafpv.com/products/literadio-2-se-radio-transmitter) works (as it should) 

### What i've put together in a weekend 

Is available [here](https://three-drone.netlify.app/) Keyboard controls are difficult to wrestle with, and your gamepad axis most probably gonna be inverted (my xbox ones are) so ehh.. GOOD LUCK i guess?  Also: REMEMBER THE VIDEO, remember HOW GOOD I WAS? Exactly. It's possible, just git good or something. 

### Things i'd like to do next:
- Pitch and roll act like some super-stable mode right now, i'd like them to be more like AIR/ACRO, i.e. rotate the quad. Thing is - with angular velocities on Z and X axis it just gets real weird, so i'm still kinda working on it
- sounds would be good, duh 
- forking [https://noclip.website/](https://noclip.website/) so i can fly around GTA III map, and GTA: SA map, and .. DARK SOULS map (if i want to) 
- getting source somewhere public 
- writing one more of these once at least one of the steps is done 
- controls settings so you can invert any axis you want for your radio/gamepad 

### The thing i'm most proud of

The propellers are spinning, man, Looks awesome. More throttle - MORE SPIN, gee soo cool

Hit me up if you have any questions, ANY questions, i mean it! I'll try to answer them all.

_for example_: 

Q: HEY ROMAN, WHATS UP WITH [PIANO ROCKER](https://store.steampowered.com/app/1771240/Piano_Rocker/?beta=1)?
A: SOON