{"id":1703,"date":"2023-08-28T13:02:06","date_gmt":"2023-08-28T13:02:06","guid":{"rendered":"https:\/\/www.pycheung.com\/weblog\/?p=1703"},"modified":"2023-08-28T13:02:09","modified_gmt":"2023-08-28T13:02:09","slug":"interactive-exploded-assembly-drawing-of-3d-printed-ice-cream-machine","status":"publish","type":"post","link":"https:\/\/www.pycheung.com\/weblog\/post\/1703","title":{"rendered":"Interactive exploded assembly drawing of 3D printed ice cream machine"},"content":{"rendered":"\n<iframe src=\"https:\/\/pycheung.com\/explodedview\/\" width=\"100%\" height=\"600px\" style=\"height:80vh;border:0\" border=\"0\"><\/iframe>\n\n\n\n<p>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 &#8211; I still think their underwater demo is quite impressive, <a href=\"https:\/\/www.pycheung.com\/weblog\/post\/158\">I tried a bit here sketchup to web<\/a>. 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.<\/p>\n\n\n\n<p>I first learnt to appreciate <a href=\"https:\/\/www.designingbuildings.co.uk\/wiki\/Exploded_view\">exploded view<\/a> 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 <a href=\"https:\/\/www.pycheung.com\/weblog\/post\/1637\">designed and 3D printed an ice cream machine recently<\/a> , 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.<\/p>\n\n\n\n<p>The idea is to make something that interpolates between two states:<\/p>\n\n\n\n<ol><li>an exploded state to show the parts and<\/li><li>assembled to show how it is designed to operate.<\/li><\/ol>\n\n\n\n<h4>Exploded 3D views: What others did?<\/h4>\n\n\n\n<ul><li><a href=\"https:\/\/aps.autodesk.com\/blog\/view-each-floor-using-vertical-explode\">Autodesk online viewer<\/a><\/li><li><a href=\"https:\/\/www.food4rhino.com\/en\/app\/explodedview\">Rhino explodedview<\/a> within Rhino3D environment<\/li><li><a href=\"https:\/\/docs.unrealengine.com\/4.26\/en-US\/Resources\/Templates\/CollabViewer\/SetUpExplode\/\">Unreal exploded view<\/a> within Unreal environment, possibly accessible online in a webgl export or web stream<\/li><li><a href=\"https:\/\/www.opencascade.com\/components\/web-3d-viewer-component\/\">Opencascade web viewer<\/a><\/li><li>Some uses center of mass to separate each piece on <a href=\"https:\/\/discourse.threejs.org\/t\/read-models-and-explode-obj-file\/2783\/4\">threejs forum<\/a>, and <a href=\"https:\/\/devdojo.com\/axiome\/exploded-view-of-a-3d-model-using-react-three-fiber\"># Exploded view of a 3D model using React-Three-Fiber<\/a> (blender export as gltf)<\/li><\/ul>\n\n\n\n<p>I am thinking about this a bit more like an exploded axonometric in architectural presentation, similar to the drawing of <a rel=\"noreferrer noopener\" href=\"https:\/\/www.archdaily.com\/887666\/fallahogey-studio-mcgarry-moon-architects\/5a6817f7f197ccbe77000119-fallahogey-studio-mcgarry-moon-architects-exploded-axonometric\" data-type=\"URL\" data-id=\"https:\/\/www.archdaily.com\/887666\/fallahogey-studio-mcgarry-moon-architects\/5a6817f7f197ccbe77000119-fallahogey-studio-mcgarry-moon-architects-exploded-axonometric\" target=\"_blank\">Fallahogey Studio by McGarry-Moon architects<\/a> considering how the lines, distances, parts, and labels can be controlled.<\/p>\n\n\n\n<h4>What I set out to explore<\/h4>\n\n\n\n<p><strong>Ambient occlusion<\/strong> &#8211; 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 <a href=\"https:\/\/pycheung.com\/checker\/room\/\">here<\/a>, 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&#8217;s implementation.<\/p>\n\n\n\n<p><strong>Line control<\/strong> &#8211; Exploded axonometric in architectural presentations have CAD-like outlines that are not wireframe of a mesh. Gkjohnson has <a href=\"https:\/\/gkjohnson.github.io\/threejs-sandbox\/conditional-lines\/\">a way to do it from mesh inputs<\/a>. 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.<\/p>\n\n\n\n<p><strong>Line style<\/strong> &#8211; Dashed lines and clipped lines when the model is &#8216;assembled&#8217;. 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.<\/p>\n\n\n\n<p><strong>Control over how things get exploded<\/strong> &#8211; 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.<\/p>\n\n\n\n<p><strong>Drawing labels and position of labels<\/strong> &#8211; The text dot elements are exported separately as json with python extract and store the position, text and secondary text per element.<\/p>\n\n\n\n<p><strong>One click export as video<\/strong> &#8211; For my own use at the moment, not in the online version &#8211; basically an easy way to script the animation with easing curves and compile each frame into a video.<\/p>\n\n\n\n<p>If are interested in exploring something similar in your own website to showcase your own model and design, please contact me via <a href=\"mailto:eric@pycheung.com\">email<\/a> or <a href=\"https:\/\/www.twitter.com\/pycweblog\">X twitter<\/a>. Love to hear your thoughts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211; I still think their underwater&#8230;<\/p>\n<div class=\"royalwp-readmore-wrap\"><a href=\"https:\/\/www.pycheung.com\/weblog\/post\/1703\" class=\"royalwp-readmore\">Explore more <i class=\"far fa-hand-point-right\"><\/i><\/a><\/div>\n","protected":false},"author":2,"featured_media":1730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[154],"tags":[182,183],"_links":{"self":[{"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/posts\/1703"}],"collection":[{"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/comments?post=1703"}],"version-history":[{"count":24,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/posts\/1703\/revisions"}],"predecessor-version":[{"id":1735,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/posts\/1703\/revisions\/1735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/media\/1730"}],"wp:attachment":[{"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/media?parent=1703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/categories?post=1703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pycheung.com\/weblog\/wp-json\/wp\/v2\/tags?post=1703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}