Basic 6-Axis Gyro Visualizer
Overview:
This project originally started as an experiment to see whether or not it would be possible for me to develop a real-time three-dimensional tracking system for various controlled aircraft or quadcopters. The code in the GitHub is only half of the overall project. While the code for visualizing has been uploaded, the values for pitch, roll, and yaw need to provided by another file. In this example, a Serial connection is used.
Box Model Set-up:
Requirements:
- A 6-Axis Accelerometer/Gyroscope (UART, SPI, I2C, Wireless, etc.)
- A Serial USB connection between your Accelerometer and PC
- A Chromium-based browser (Chrome, Edge, Opera) to open this file. Safari, Firebox, and others are not supported
Clone this repo. That's it! Launch the file and connect your device. If it does not work, see troubleshooting below.
Due to the many acclerometers and programming options available, make sure your serial messages are in this general format!
serial.log("PRY:");
serial.log(pitch);
serial.log(",");
serial.log(roll);
serial.log(",");
serial.log(yaw\n);
//(Example Serial print) PRY:-34.2,12.4,-76.9 (no spaces + new line for each entry)
Customizing:
The linked GitHub file contains a default purple prism to use. If you want to use a custom gltf/glb mode, replace this:
const geometry = new THREE.BoxGeometry(3, 2, 1);
const material = new THREE.MeshNormalMaterial();
const model = new THREE.Mesh(geometry, material);
scene.add(model);
model.position.set(0, 0, 0);
with this:
const loader = new THREE.GLTFLoader();
let model;
loader.load("your_file_path.glb_or_.gltf", function(gltf) { // do not change gltf inside the function
model = gltf.scene;
model.scale.set(1.0, 1.0, 1.0);
model.position.set(0, 0, 0);
scene.add(model);
}, undefined, function(error) {
console.error("Error loading model:", error);
});
You must also use a localHost server instead of opening the file directly with the browser. If you're opening the file directly in your browser (i.e., the path starts with file://), the loader might not work due to CORS restrictions. This easiest way is to use Python. In your terminal, run
python -m http.server
and visit
http://localhost:8000
in your browser. Refresh, navigate through the directory to the correct file, and use the sliders to fine-tune as needed.
Exporting:
The software allows gathered data to be exported in a CSV format for a variety of use cases, including flight analysis, debugging, real-time feedback, and even building a dataset for training models to fly on their own. After your flight is over, press the "Export" button in the bottom left and it will automatically download. 20,000 of the last entries will be exported by default.
Troubleshooting Tips:
Custom model isn't showing up:
- Make sure the gltf/glb model has a valid path in the loader
- Right-click -> Inspect -> Console. If there is a CORS error, make sure you are using a LocalHost server instead the default browser option
- Use the 'Lighting' slider to make sure the lighting adjustment is around 1.0-1.5
- Use the 'Scale' slider and slowly increase or decrease the model size
Gyro Values are not showing up:
- Make sure your device shows up in a serial port and is able to connect successfully
- Make sure your device is at the appropraite baud rate (default is 115200, change if necessary)
- Make sure the values are being sent in the exact format shown
Device not showing up on 'Connect':
- Check if you are using a Chromium-based browser (Chrome, Edge, Opera). Safari, Firebox, and others are not supported
- Make sure your device is at the appropraite baud rate (default is 115200, change if necessary)
- Really hard to catch, it has happened several times. Your cable may be power-only (not data), use a different cable
Model gliches out or jumps around:
- Make sure there are no long wires, loud 'noises', or vibrations around
- In your second script (one interpreting values), remove wait() or delay() functions and replace with a timer. Around 10ms should work best
- Use one of the provided filtering options or implement a custom filter to reduce jumps being sent