29 / 32
Cadara: a browser-based CAD app built in two weeks
I've just put out the first "release" of Cadara, a browser-based CAD app at https://cadara.app/. It's built with three.js and react-three for the 3D viewport, opencascade.js as the CAD kernel, and a vibe-ported version of isotope — the 2D sketcher from cadmium, a now-abandoned take at a similar project I was heavily involved with — as the 2D solver. The whole thing came together in exactly two weeks, with me and AI. It already does the core modelling operations (new, join, cut, intersect), shell, a feature history you can double-click into to edit features, sketches that show their own history when edited, variables powered by mathjs, and a very crude SVG editor tucked inside the sketch editor. Since the release I've been fixing the bugs people have hit, and have added an orthographic default camera with a perspective toggle, a basic SVG workspace, and local filesystem API support so you can work directly in local files like a desktop app.
Description
Cadara (https://cadara.app/) is a CAD application that runs in the browser. The first release is now up, and it's the product of exactly two weeks of work by me and AI.
How it's built
- 3D viewport: three.js with react-three
- CAD kernel: opencascade.js
- 2D solver: a vibe-ported version of isotope, the 2D sketcher from cadmium — a now-abandoned take at a similar project that I was very involved with
What's in it
The main modelling toolbar covers new, join, cut and intersect. I haven't given that part of the UI much thought yet, so it's going to change soon. There's a shell operation too. One thing that came up in testing is that shell defaults to creating a "new" body, so you have to pick "intersect" to just leave a shell — which makes sense once you realise what we expect shell to do is really those two operations at once.
There's a feature history at the bottom of the screen; double-click it to edit a feature. Editing a sketch shows its history as well. The left-hand panel lists the objects — that'll also have to change at some point, though I have no idea how yet. Inside the sketch editor there's a VERY crude implementation of an SVG editor, hiding behind the weird icons.
Variables live in the left side panel and are backed by mathjs — you create a variable, give it an expression, and it shows the result. I'm adding an equals sign between the two so it's clearer which is which.
There's a keyboard button at the top right with the keymap in it.
Known rough edges and fixes
Only Chrome is tested so far, though I want to support Safari too. Edge selection isn't very visually clear — picking was a pure PITA to get working at all, and I still don't have a good handle on how to colour selected geometry versus everything else.
A nasty one turned up early: if you rolled the history back a couple of steps and then refreshed, the steps "in the future" were lost. That's bad, so I fixed it straight away. I've since fixed all the reported issues, plus made a billion changes around reference geometry.
Since then
The camera is now orthographic by default, with an option to switch it to perspective. There's a basic SVG workspace. And there's local filesystem API support, so you can work in local files like you would in a normal desktop app — it updates the file after any operation, if you give it access. It's under the file button in the upper left.