See all sides

A series of products are being created to auction off to raise money for charity Amnesty International. They are being 3D printing, so a series of STL files have been produced for this production process to take place.

I was handed these STL files, and asked for a prototype of how they could be used to display the products on a website.

With a brief that was invariably going to evolve - along with what features need to be showcased. Rather than iterate through a series of pre-rendered images (which would give wider browser support - but lockdown transitions and what is displayed to the images rendered), I opted to use ThreeJS and a custom STL parser to load and display the 3d files directly, paired with references of materials and textures (which will be produced by the 3d artist for production). When used in production would fallback to the pre-rendered image method, when WebGL is not supported.

Using the ThreeJS scene allows for further aesthetic subtleties, with the likes of dynamic lighting based on mouse positioning, which gives fluid shadows and stage appearance as the user interacts - which appealed to the design audience for which the products are intended.

Your browser does not support WebGL.
Try browsing on that does for all content.

The prototype utilises dat.GUI to create a version which gives the art directors on the project freedom to have direct simple controls to experiment with the setup of the positioning and colouring of each of the 3 lights in each scene and the positioning and rotation of the models of each scene independently - which can be used for the likes of step animations for displaying key features. With these selected settings easily translated into the build.

Double Depth

Each of the models are comprised of 2 layers, with an internal model within the outer shell. This needed to be demonstrated, with the internal model encapsulated at the correct position throughout all steps of interaction.

A slider controls the opacity of the outer shell, and reveals the model within it.

Containing both of the models within one child element keeps them both synced up in their positions, while using switches of visibility and depth sorting keeps the frames per second of the scene around 60fps for smooth visuals.

My role

Upon receiving the raw STL files, all elements of the prototype were designed and built by me in the space of 8-hours. Along with working at converting and testing the STL files at various polycounts to find a balance between detail and performance that was satisfactory for the prototype stage.

The prototype was used to demonstrate the intended interaction with the client, and I am currently going into building the final production version of this site, based on the learnings from this prototype, with browser support being covered using the fallback outlined above, textures produced by the 3D artists along with base lighting positions, intensities and colours.