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:

1. an exploded state to show the parts and
2. 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.

If are interested in exploring something similar in your own website to showcase your own model and design, please contact me via email or X twitter. Love to hear your thoughts.