Interactive 3D rendering of habitat

[granawkins]

Create a customized 3d rendering based on the current game configuration, which the user can orbit around and zoom into.

• Use the 3d renderings created by Bryan Versteeg. We currently have the greenhouse as .OBJ, which works well.

• ThreeJS is a free, fully-featured JS library that integrates fine with Vue. There is a Vue-specific implementation, troisJS, but it only works with Vue 3, and we're currently using Vue2.

• Implement the scene as a Vue Component with a library of vanilla-js modules (camera, controller, etc.). This component and all the modules go in 'frontend/src/threejs'. Add the scene to a boilerplate dashboard panel, components/panels/ThreeDPanel.vue.

The scene layout is determined by from gameConfig

• pv array, 0 - 5,000 panels
• crew quarter: sam, small, medium, large
• greenhouse: sam, small, medium, large

by default:

• airlock
• storage: air, water, nutrient, food, power

supported but inactive:

• isru
• fabrication
• wind turbines, radioisotope generator
• mobility
• communication: radio, lab equipment

[granawkins]

Checkpoints for first launch:

• Sky: Mars skybox (current)
• Ground: jmars image, maybe map topography
• Models: airlock, crew quarters (x3), greenhouse (x3), solar
• Load models as required, cache after loaded. Clear cache on launch sim.
• Tooltip shows name on hover
• Optimize graphics: antialiasing, lighting, shadows, isActive === false,
• Expanded dashboard panel

[ezio-melotti]

This got implemented in:

• 106

• 108

• 288