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

`; }35:[] 32:{"id":"b93b3cb42e0fbd92","slug":"constructive-solid-geometry-with-jscad-and-x3dom","title":"Constructive Solid Geometry with JSCAD and X3DOM","thumbnail":"00dfe606f83a5fe28daaf90c8599fac348b311f03144fb45a034958967144177","access_level":"public","create_time":"$D2019-07-16T17:46:22.944Z","update_time":"$D2023-04-18T22:20:06.027Z","view_time":null,"first_public_time":"$D2019-07-16T23:12:55.757Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":312,"publish_version":null,"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":5,"collection":{"id":"fad18253ee738559","slug":"x3dom","title":"x3dom","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"type":"notebook","body":{"title":"Constructive Solid Geometry with JSCAD and X3DOM","cells":[{"id":0,"value":"md`# 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":"md`\n## Idea ##\n\nJSCAD (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.\n\nAs an example let's generate more complex geometry with only a few lines, and place it in a viewer which natively supports nice mouse navigation, backgrounds, and much more. For demonstration purposes let's also animate the generated geometry with a few lines in the scene description.\n\n## Documentation ##\n\nJSCad has relatively good, but a bit out of date documentation:\n\nhttps://github.com/jscad/csg.js/blob/v0.7.0/docs/api.md\n\nX3DOM also had relatively good, but somewhat incomplete documentation:\n\nhttps://www.x3dom.org/examples/\n\n## Code\n\nThe code below is self explanatory\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"roundedCube=csg.roundedCube({radius: 1.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"sphere=csg.sphere({radius: 2}).setColor([1,1,0,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sphere2=csg.sphere({radius: 1.3}).setColor([1,1,0,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"cube2=csg.cube({size: 2.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"logo=roundedCube.subtract(sphere).union(sphere2.intersect(cube2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"screw = cag.circle({r: 1, fn: 8}).translate([1,0,0]).extrude({offset: [0,0,10], twistangle: -2000, twiststeps: 50}).scale(0.3).rotate([0,0,0], [1,0,0], 90).translate([0, 3.5, 0]).setColor([1,0,0.1])\n","pinned":true,"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(logo.union(screw))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"a=sceneX3D[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"a.normalize()","pinned":true,"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":true,"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').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":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"