3D Model created for the CanSat competition. It shows images taken from different heights by probe and detects a flight trajectory. Map also contains charts with data received from the probe.
-
JS Libraries:
- Three.js (building model)
- OrbitControlls.js (rotating a model)
- Chart.js (showing charts)
-
CSS Libraries:
- loading io (loading spinner)
-
Tools:
- Gulp
- Webpack
- Eslinter
- Prettier
-
Database:
- Firestore
The main task of Model 3D is to show the pictures coming from Image finder algorithm. It works perfect with the use of three.js. Thanks the config about coordinates of red rectangle coming from database, there is automatically building a line showing the flight trajectory. It is possible to select a second from the free fall of probe and see some data, which were collected and the CanSat position at this time.
Example map with real collected data and images.
Model symbolizing our falling probe.
Depending on the size of using device, charts can appear on the right side or under the map. Each chart represents some part of data collected by CanSat. It is possible to hover the part of diagram and see more detailed informations about data from specific part of time.
There also appears a vertical line which is resposnsible for showing current selected time.
On the top of the page is located a switcher, thanks what user is able to see both photos coming from Image Finder and Segmentation on the map.
One of charts basing on real collected data.
Mateusz Iwaniuk as a member of Project Trailblazer Team.