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