Interactive exploded assembly drawing of 3D printed ice cream machine
Web access to 3D content has come a long way since VRML in the 1990s and later 3D with libraries like papervision/pv3d in flash – I still think their underwater demo is quite impressive, I tried a bit here sketchup to web. More recently there has been much improvement in 3D support in browsers with libraries like three.js and babylon.js making it a lot easier to display and visualise 3D content online.
I first learnt to appreciate exploded view from my architectural education in the early 2000s, as a drawing to help visually communicate how different parts fit together in a design. So, how about an explored drawing in a 3D context online? I designed and 3D printed an ice cream machine recently , and since I have a digital model in Rhino3D already perhaps it is a good opportunity to try putting together a way to take it into a web context. I set out to create an exploded view as a way to share it online, making it more accessible to others who want to showcase their models embeded on a website.
The idea is to make something that interpolates between two states:
- an exploded state to show the parts and
- assembled to show how it is designed to operate.
Exploded 3D views: What others did?
- Autodesk online viewer
- Rhino explodedview within Rhino3D environment
- Unreal exploded view within Unreal environment, possibly accessible online in a webgl export or web stream
- Opencascade web viewer
- Some uses center of mass to separate each piece on threejs forum, and # Exploded view of a 3D model using React-Three-Fiber (blender export as gltf)
I am thinking about this a bit more like an exploded axonometric in architectural presentation, similar to the drawing of Fallahogey Studio by McGarry-Moon architects considering how the lines, distances, parts, and labels can be controlled.
What I set out to explore
Ambient occlusion – SSAO is well known in three.js with many different implementations, although I wondered if there is a good option for speed that works with React without memory leaks. I previously used the original one from threejs here, but was unable to achieve the look I envisioned. The one avaliable in r3f postprocessing looks good but I got memory leaks when I changed the uniforms in the material. Therefore in this project I decided to try out n8’s implementation.
Line control – Exploded axonometric in architectural presentations have CAD-like outlines that are not wireframe of a mesh. Gkjohnson has a way to do it from mesh inputs. It adds the lines as extra geometry objects, so I thought we can simply draw it in and export the lines required as well from Rhino3D without processing the lines in js.
Line style – Dashed lines and clipped lines when the model is ‘assembled’. There is already a dashed line material in three.js, but to achieve the slider-driven clipped lines I had to put together a custom vertex and fragment shader on a shader material. All dashed lines share the same material, I used geometry attributes for the clipping lines with different length.
Control over how things get exploded – The idea here is to specify the transform for the exploded view using curve/lines (blue) to control the path of the animation. In addition, lines (magenta) to control the rotation axis and rotation angle for the gears.
Drawing labels and position of labels – The text dot elements are exported separately as json with python extract and store the position, text and secondary text per element.
One click export as video – For my own use at the moment, not in the online version – basically an easy way to script the animation with easing curves and compile each frame into a video.