This is nice and easy. And you can expand it as you need.
Mavlink is communication protocol used by many autopilot including the very famous ardupilot.
Three.js is a very famous corss-browser JavaScript library used to develop animated 3D computer graphics in web browser using WebGL.
If we combine these two things together we get Mavlink3DMap, this is a simple static site that receives parsed mavlink messages and create correspondent vehicles and set their position and orientation.
SITL or a real vehicle sends Mavlink messages received by a UDP listener socket. the UDP socket redirects these messages to the static web page via websocket connection.
The 3D Map create a vehicle with a camera attached to each vehicle. The main screen shows 4 view ports -that you can change easily- each view port has a world camera that you can move using mouse.
P & O buttons used to switch between cameras. If there is SITL connected to the map then it will have its own camera and you can switch to it using P & W. then you can control it using W, S , A , D. You can press R to reset camera orientation.
The image shows 4 view ports the top left is from a world camera, then the top right is from a plane camera, the bottom left shows both a plane and a drone, then the bottom right is the drone camera.
The next image shows a quadcopter with a camera pointing forward. while the image below it shows a plane. These vehicles are defined automatically in the world as mavlink messages are received by the static webpage.
Different vehicles should have different SYSID_THISMAV
Running the simulation is very easy. you need to run udp2websocket.js using node. and use http-server to run the static website. That is it.
Then you need to run simulators or redirect data from a real vehicles. running SITL could be like the following sample:
sim_vehicle.py -j4 -v ArduPlane -M --map --console --instance 80 --out=udpout:127.0.0.1:14550 --out=udpout:192.168.1.139:16450
Port 16450 is used by the 3DMapView and port 14550 I keep it for QGC.
Your are welcome to join to enhance this simulator.
