2b:null 2c:["$","title",null,{"children":"Constructive Solid Geometry with JSCAD (V2) and X3DOM | Andreas Plesch | Observable"}] 31:T431,x3delement={ return html`

`; }32:[] 2f:{"id":"5e363eb6419587c4","slug":null,"title":"Constructive Solid Geometry with JSCAD (V2) and X3DOM","thumbnail":"fdd91f7ce4c05fab295b28c709561ea941aef374632e0d546c889048b301beb6","access_level":"public","create_time":"$D2023-04-18T21:12:27.889Z","update_time":"$D2023-04-19T02:17:24.611Z","view_time":null,"first_public_time":"$D2023-04-18T21:12:27.889Z","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":0,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":356,"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":0,"collection":null,"type":"notebook","body":{"title":"Constructive Solid Geometry with JSCAD (V2) and X3DOM","cells":[{"id":0,"value":"md`# Constructive Solid Geometry with JSCAD (V2) and X3DOM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$31","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 good documentation here:\n\nhttps://openjscad.xyz/guide.html\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.roundedCuboid({radius: 1.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"sphere=colors.colorize([1,1,0], csg.sphere({radius: 2}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sphere2=colors.colorize([1,1,0],csg.sphere({radius: 1.3}))","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":319,"value":"logo=op.union(op.subtract(roundedCube, sphere), op.intersect(sphere2, cube2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"screw = trafo.scale([0.3, 0.3, 0.3], \n ex.extrudeLinear({height: 10, twistangle: -2000, twiststeps: 50}, \n trafo.translate([1,0,0], csg.circle({r: 1, segments: 8}))))//.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({unit: 'meter'}, sphere)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"x3dmat = sceneX3D[0]//.replace(\"\",\"\\n \")\n ","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([x3dmat], { 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('@jscad/modeling@2.11.0');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"csg=jscad.primitives","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"colors=jscad.colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":" op = jscad.booleans","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"trafo=jscad.transforms","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"ex=jscad.extrusions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"x3d=import('https://cdn.skypack.dev/@jscad/x3d-serializer@2.4.3?min')","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"