ESTCube-2 Visualization
Magnus Karlson, Adrian Kirikal, Hei Chun Shum
Description
Project idea is to make ESTCube 2 visualization, where user can interact with it. User can rotate the model and there are different buttons, what will direct user vision to the selected option.
Information
Project is implemented in frontend framework called Vue. Project uses graphics libary Three.js. Main focus of this project is to introduce ESTCube 2 to people, who want to know more about it. User can view the model from different angles and also highlight most important components of the ESTCube 2, so it will give small describe of the component and also will highlight it in the model itself.
Problems and solutions
The model for ESTCube-2 was provided by a member of the ESTCube team. However it lacked any materials and the topology was not that good so quite a bit of time was spent on cleaning up the model. Also when reading the exported model in ThreeJS, there appeared a lot of overlapping faces which did not show in blender and caused very visible z fighting and flickering. This was mostly solved by removing more complex geometry from the model.
At first the description panel for component highlighting was a plane in ThreeJS onto which the text was rendered. This lacked basic text formatting tools though and it was hard to position it directly into the corner of the page. The plane was then changed for a simple html overlay which solved all of the problems.
Workplan
- Find 3D model of ESTCube 2. ✓
- Place model in the 3D world. ✓
- Add materials for model. ✓
- Make it interactive. ✓
- Add possibility to highlight different components. ✓
- Add texts what describe different components. ✓
User Features
- Possibility to change viewpoint.
- Possibility to rotate object with mouse.
- Possibility to zoom in with mousewheel.
- Possibility to highlight different components.
Images
First version
Updated version. (User interface updates)
Final version