Modeler — CSG modeling with React
Screenshot

Modeler is a CSG modeling library for React, and a cli helper tool.

It is built from two packages: modeler-csg - the main modeling library, and modeler-cli.

modeler-csg is a custom React reconciler designed to work with react-three-fiber:

const React = require("react");
const ReactDOM = require("react-dom");
const { Canvas } = require("react-three-fiber");
const { Model } = require("modeler-csg");

ReactDOM.render(
  <Canvas>
    <ambientLight color={0x888888} />
    <spotLight position={[0, 10, 10]} />

    <Model>
      <subtract>
        <cube />
        <sphere radius={1.3} />
      </subtract>
    </Model>
  </Canvas>,
  document.getElementById("root")
);

modeler-cli provides a quick live-reloading preview, and offline STL export.

For more information and examples go to github: szymonkaliski/modeler.

DAG and Tree Representations of Code
  • modeler:
    <Union>
  <Path closed={true}>
    <Point x={0}  y={0} />
    <Point x={10} y={20} />
    <Point x={10} y={30} />
    <Point x={9}  y={42} />
  </Path>
  <Circle r={10} x={0} y={0}/>
</Union>
    notice that parents impact children: Union calculates over Path and Circle, in "normal" code representation that would be:
    union(
  path({ closed: true, points }),
  circle({ r: 10, x: 0, y: 0 })
)