Component Data on a 3D Viewer
From my work inside the client's own team
A third party system that knows nothing but geometry, and component data spread across several secured interfaces. A click on the visible part leads to stock, supply and reusability.
Services Used
The situation
A 3D viewer was to be embedded into a web application so that clicking a visible component opens its data. The viewer was a third party system with its own API and knew nothing but geometry. The component data was spread across several REST interfaces, each secured through OAuth2, each with its own data model.
The solution
Built in Vue.js, with a mediating layer between the application and the viewer so that both sides know the same state. The actual work was in the hit mapping. Through its API the viewer supplies coordinates for what currently sits where, and those coordinates shift with every zoom level. We therefore passed the zoom level to the viewer, calculated the returned coordinates against the pointer position and derived the component that was hit. The same mouse movement hits an assembly in the overall view and the individual screw in the close view, without a static click map having to be maintained. Composite components got a layer of their own: clicking one opens not the data sheet but the parts list, with the path to every individual part.
For each part the application then brings together what lives in the various interfaces: stock levels, sources of supply through the dealer network, and the compatibility matrix, meaning which other products the same part is built into. That last piece of information decides whether a part is reused or procured anew. Every source came with its own token handling and its own field names, which were normalised onto a common model.
The result
A viewer that only showed shape became the entry point into the parts data. From the visible component to stock, supply and reusability it is two clicks, and the mapping works across every zoom level without ever being maintained by hand.