DEV Community

Cover image for a flying quadcopter in three.js
Roman Guivan
Roman Guivan

Posted on

a flying quadcopter in three.js

What's up HACKERS?

I've gotten into flying fpv drones recently

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

Things i think i'll need

  • renderer: Gotta be THREE.js This (and unity) are all i know
  • 3d physics engine: Cannon.js and 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

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 also applies to any RC radio you could connect to a PC for playing a sim, so my
LiteRadio 2 SE Radio
works (as it should)

What i've put together in a weekend

Is available here 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/ 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?
A: SOON

Top comments (1)

Collapse
 
david_knight_a5d17892d28b profile image
David Knight • Edited

Nice job! I like the spinning props!
I was working on a similar project to simulate the flying of an FPV drone for dropping loitering munitions on military targets. Use the arrow keys and asdx and ew to control the camera (rotate up and down). use spacebar to drop the munition. I added some "slop" to the movements to make them more realistic, like banking-into turns and leaning forward to move forward. jsfiddle.net/dknight0/tvc9onzu/