openscad-playground/README.md

OpenSCAD Playground

Open the Demo

This is wrapping the headless WASM build of OpenSCAD (done by @DSchroer) into a lots of pretty React components, slapping in a Monaco editor (of VS Code fame), an STL viewer and a few tricks (of course, it's using the experimental Manifold support we've added recently, to make it super fast).

Enjoy!

An earlier iteration of this offered more control over the features that are enabled. This will come soon too.

Licenses: see LICENSES.

Features

• Automatic preview on edit (F5), and full rendering on Ctrl+Enter (or F6). Using a trick to force $preview=true.
• Syntax highlighting
• Ships with many standard SCAD libraries (can browse through them in the UI)
• Autocomplete of imports
• Autocomplete of symbols / function calls (pseudo-parses file and its transitive imports)
• Responsive layout (but editing on iOS is still a pain, will address that soon). On small screens editor and viewer are stacked onto each other, while on larger screens they can be side-by-side

Roadmap

• Bundle some official demos!
• Drag and drop of files (SCAD, STL, etc) and Zip archives. For assets, auto insert the corresponding import.
• Proper PWA w/ File opening / association to *.scad files
• Setup OPENSCADPATH env var w/ Emscripten.
• Customizer support. Probably by adding --export-json or --export-format=customizer-json to OpenSCAD.
• Mobile (iOS) editing support: switch to https://www.npmjs.com/package/react-codemirror ?
• Proper Preview rendering: have OpenSCAD export the preview scene to a rich format (e.g. glTF, with some parts being translucent when prefixed w/ % modifier) and display it using https://modelviewer.dev/ maybe)

Building

Prerequisites:

• wget
• GNU make
• npm

Local dev:

make public
npm start
# http://localhost:4000/

Local prod (test both the different inlining and serving under a prefix):

make public
npm run start:prod
# http://localhost:3000/dist/

Deployment (edit "homepage" in `package.json` to match your deployment root!):

```bash
make public
npm build

rm -fR ../ochafik.github.io/openscad2 && cp -R dist ../ochafik.github.io/openscad2 
# Now commit and push changes, wait for site update and enjoy!