2e:null 2f:["$","title",null,{"children":"IFC4 bath tub example: Constructive Solid Geometry with JSCAD and X3DOM | Andreas Plesch | Observable"}] 34:T4aa,x3delement={ return html`

`; }35:T418,md` ## Idea ## JSCAD (https://www.openjscad.org/) has good Constructive Solid Geometry (CSG) modelling capability and also build in export to X3D (http://www.x3dom.org). Using both it is possible to combine powerful geometric modelling and a rich, easy to use 3d declarative environment. The IFC4 standard makes extensive use of CSG. http://standards.buildingsmart.org/IFC/RELEASE/IFC4/ADD2_TC1/HTML/link/bath-csg-solid.htm is provided as an example of how to represent a bath tub. Let's translate the the description first into JSCAD, and then into X3D. ## Documentation ## JSCad has relatively good, but a bit out of date documentation: https://github.com/jscad/csg.js/blob/v0.7.0/docs/api.md X3DOM also had relatively good, but somewhat incomplete documentation: https://www.x3dom.org/examples/ buildingSMART International Ltd. has the extensive Industry Foundation Classes IFC4 ISO standard: http://standards.buildingsmart.org/IFC/RELEASE/IFC4/ADD2_TC1/HTML/ ## The bath tub Here is the IFC4 XML relevant to the bath tub geometry. `36:T428,md` \`\`\`xml \`\`\` `37:[] 32:{"id":"2d55105c64c9d8a5","slug":"ifc4-bath-tub-example-constructive-solid-geometry-with-jsc","title":"IFC4 bath tub example: Constructive Solid Geometry with JSCAD and X3DOM","thumbnail":"8f6082cd5b1615d2fee48efc219ffb42b2807e4ea79b346261e3921a055e61f6","access_level":"public","create_time":"$D2019-07-19T01:38:06.870Z","update_time":"$D2019-07-20T13:27:17.278Z","view_time":null,"first_public_time":"$D2019-08-07T20:34:30.815Z","has_unpublished_edits":null,"fork":{"id":"b93b3cb42e0fbd92","slug":"constructive-solid-geometry-with-jscad-and-x3dom","title":"Constructive Solid Geometry with JSCAD and X3DOM","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":481,"publish_version":481,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"IFC4 bath tub example: Constructive Solid Geometry with JSCAD and X3DOM","cells":[{"id":0,"value":"md`# IFC4 bath tub example: Constructive Solid Geometry with JSCAD and X3DOM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`*expand cell above to see declarative description of holding scene*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`We can see that it is defined as the difference between *Block* and an *Extrusion* of a rounded rectange.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`### The Block\n\nThe block has dimensions of 2000 by 800 by 800. The IFC4 xml defines the unit as millimetres.\n\nThe equivalent JSCAD object is a scaled cuboid, and X3D's default unit is meters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"IfcBlock = {\n const XLength = 2000/1000;\n const YLength = 800/1000;\n const ZLength = 800/1000;\n const halfLength = XLength/2;\n const halfWidth = YLength/2;\n const halfDepth = ZLength/2;\n return csg.cube({radius: [halfLength, halfWidth, halfDepth]}).translate([halfLength, halfWidth, halfDepth])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`\nIfcBlock has the lower, left, close corner at the origin while csg.cube is centered at the origin. So we need to translate by the cube by half dimensions to reproduce the Ifc position. Also csg.cube expects half dimensions to construct the block.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`### The Extruded Area Solid\n\nThe second solid is an extrusion of a 2d area. It will subtracted from the *Block*. The profile to be extruded is a rounded rectangle with dimensions of 1800 by 600, and rounding circle radius of 200 at the four corners. The depth of the extrusion is 700. Before extruding the rounded rectangle is translated by 1000, 400, 100 to place the resulting solid inside the block.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md `#### The rounded rectangle\n\nThe equivalent JSCAD geometry is roundedRectangle which has appropriate generation options:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"IfcRoundedRectangleProfileDef = cag.roundedRectangle({radius: [1.800/2, 0.600/2], roundRadius: 0.2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`\nAgain, the jscad function expects half dimensions and is centered. The IFC object is also centered, so no more adjustments needed.\n*note*: the IFC xml does not have a resolution for the roundness of the corners, implying that it should be perfectly round.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`### The extrusion\n\nThe equivalend JSCAD solid is generated by the extrude method. Since the profile is located in the IFC xml before the extrusion, we need to also translate the rectangle. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"IfcExtrudedAreaSolid = IfcRoundedRectangleProfileDef.translate([1,0.4,0.1]).extrude({offset:[0, 0, 0.700]})//t5.translate([1.0, 0.4, 0.1]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md`## The Difference\n\nThe bath tub is the difference between the Block and the Extrusion. The equivalent JSCAD operation is subtract:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"bath = IfcBlock.subtract(IfcExtrudedAreaSolid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`## Converting to X3D and placing into the X3D scene\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// this is the jscad x3d exporter; it has no options but works fine\nsceneX3D=x3d.serialize(bath.rotate([0,0,0],[1,0,0],90))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`Since X3D has a Y is up convention and jscad and IFC a Z is up convention we need to rotate around the x-axis by 90 degrees before converting to X3D format. Alternatively, the converted scene could be rotated by a Transform node wrapper in the X3D.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// this url is referenced above in the X3D scene, as the source of an Inline node\n// Unfortunately, modifying it seems to confuse x3dom, so a reactive x3dom reload is then needed\nobjectUrl = URL.createObjectURL(new Blob(sceneX3D), { type: 'model/x3d+xml' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"jscad = require('https://bundle.run/@jscad/csg@0.7.0');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"csg=jscad.CSG","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"cag=jscad.CAG","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"x3d=require('https://bundle.run/@jscad/x3d-serializer@0.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"//x3dom = require('https://5d2e2559e49b098d04d0e2cd--x3dom.netlify.com/x3dom-full.js\nx3dom = require('https://x3dom.org/download/dev/x3dom-full.js').catch(() => window.x3dom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"reloader = {\n x3dom.reload();\n return x3delement;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"