JS
Researching good options for JS I just found THREE.js that is a powerful tool for 3D rendering web, in the project we hope to have a ground stations that is going to be powered by web app so I think that for this project is a good option.
So for init a project with THREE.js what we are going to do is first of all install al dependencies.
You can always use a boilerplate to improve times in your project, so its what we are going to do, we will use this boilerplate from github:
This guy does really good boilerplates for 3D projects, this one is very organized and very clean, if you want more details about it, I suggest you to enter to his github.
So first of all, clone its repository into a new directory.
After these steps you are going to see something like this in your localhost:8080 ...
So until this point we have a boilerplate that is going to be useful for rapid prototyping the next steps is to change the 3D obj that is being rendered and put some object near to our final project such as a rocket or drone.
In my case I am going to use a rocket and I am going to change the background color to Black, and we are going to delete the land.
If you look into the code you'll realize that is very intuitive what the code does.. check it out.
We can see that src is divided by objects, scene, and finally we have entry.js that is similar to index.js in this case. This app has webpack what make you have hot reloading. and of course is well documented.
Something important to take in count is that in THREE.js exists something at least for me "new". and is that in THREE.js we can upload .json objects, of course is not the only way to display objects in THREE.js but is a new one way to do it. Actually there is not a lot of webpages of 3D objects free download that already supports .json files. but you can check it out this one..
I think that clara.io is the only one that I found that offer your .json files to download and actually if you see the webpage the .json files are by the name of THREE.js
Now that we have everything installed its time to code, so what we need to do is add our model, add this model to the scene, change the names of scenes, and finally add this new scene to our entry.js
of course at the end of this gitbook you will find my repository if you want to download the final project! :)
what we get doing this in our localhost:8080 is this...
What I found using .json files is that are not good at all... but its ok for the moment of course you can use .obj that are better. I downloaded this model from clara.io
I also already change camera direction in entry.js, and what we finally need is to use our XDK to rotate this object!
The way that we use to acquire data is from a backend using nodeJS, Hapi.js, and mongoDB but for further information you need to go here in backend section.. --> HTTP
For rotate and object with THREE.js there are a lot of ways but what we need to use is Quaternions because we want to avoid Gimbal Lock. So we need to read documentation in order to know how to do that, and actually detect the point in the code when we can add some rotation to the object.
So having both problems resolved we are going to apply some rotation with XDK data. but first of all we need to bring that data to our application so we are going to fetch data from the backend that we had local mounted.
Basically with 12 lines of code we complement what we had before and we can make our object rotate, of course this is quite simple because our backend is already configured for just give us this 4 variables of XDK quaternion, as you can see there is 2 ways to rotate the object and if you want to use the other way you just need to comment out what is already commented and comment 35 line.
So here is the result of all this code...
What is important here is that the input of this rotation is of course our XDK, using the IMU, and magnetometer we make a sensor fusion in order to get orientation. This orientation in fact are quaternions that are send to our backend and we fetch (GET) this backend for this values in real-time.
So thats all in Frontend, until now. there are a lot of new features that we are going to add to this project , such as display values in screen, functions for calibrate sensors, a better UI. and finally algorithms for flight machines such as PID's with Quaternions and control Roll during launchs, etc. at least for now this one is the first step.
My github Source Code
Find the source code here!
Full video here!
Last updated
