WebGL Polygon Build
We initially built a simple prototype as a proof of concept to ensure we were leveraging the proper technology. We loaded our sample .OBJ file onto our site through the Three.js library and leveraged WebGL to display the image. This did not include a texture or a background. We specifically tested ambient/directional lighting, positioning, scaling, controls and rotation.
Structuring a backend for the world’s foremost super-nerds
With our prototype fully built we began structuring our own custom ecosystem for the build. The team was tasked with using a Drupal 8 install as the backend CMS for the client, however we created a Rest API for data requests and rendered them on a decoupled front end. This framework leveraged Node.js, React, Redux for managing states and a webpack architecture.
Connecting the 360º panoramic interiors with the outside world.
As our camera could rotate in our outdoor scenes the team had to develop a custom way to calculate an animated curve from the camera to the point of interest. In order to accomplish this we calculated the least number of points we could use to connect the two areas without clipping through a designed ‘safe zone’ in the scene. Through leveraging the planes the camera moved on and the vector direction the point of interest was facing we were able to properly drive the camera through an animation.
Direct linking and Site Structure
The site was constructed as a single page application preventing us from leveraging different URLs throughout the site that users could be directly pointed to. In order to direct users deeper than the homepage we leverage React routing.
NASA Technologies Interactive Map
An additional ask for an interactive map was received that would appear in the NASA Headquarters scene. This map was requested to display all technology for each state if the state was clicked by the user. The requested functionality would require a new approach that we had previously not tested. We were able to generate a .FBX file that lived within the panoramic scene that included subdivisions allowing for interactivity. Each subdivision was then associated with the proper content.