roundedCube=csg.roundedCube({radius: 1.5})
sphere=csg.sphere({radius: 2}).setColor([1,1,0,0])
sphere2=csg.sphere({radius: 1.3}).setColor([1,1,0,0])
cube2=csg.cube({size: 2.1})
logo=roundedCube.subtract(sphere).union(sphere2.intersect(cube2))
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])
// this is the jscad x3d exporter; it has no options but works fine
sceneX3D=x3d.serialize(logo.union(screw))
a=sceneX3D[0]
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
// this url is referenced above in the X3D scene, as the source of an Inline node
// Unfortunately, modifying it seems to confuse x3dom, so a reactive x3dom reload is then needed
objectUrl = URL.createObjectURL(new Blob(sceneX3D), { type: 'model/x3d+xml' })
jscad = require('https://bundle.run/@jscad/csg@0.7.0');
csg=jscad.CSG
cag=jscad.CAG
x3d=require('https://bundle.run/@jscad/x3d-serializer@0.2.0')
x3dom = require('https://5d2e2559e49b098d04d0e2cd--x3dom.netlify.com/x3dom-full.js').catch(() => window.x3dom)
stylesheet = html`<link rel='stylesheet'
href='https://x3dom.org/download/dev/x3dom.css' ></link>`
reloader = {
x3dom.reload();
return x3delement;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
