OpenJsCad

Playground

About

function main() {
  var cube = CSG.cube(); 
  return cube;
}

Why use OpenJsCad?

• Runs in your browser, no need to install any software.
• You can create parametric models with user editable parameters: parameters can be changed in the browser window, without the need to edit the source script. See the Gears demo for example!
• JavaScript is an extremely flexible language, supporting dynamic arrays, object oriented programming, closures, anonymous functions and more
• Solids are stored in variables. This allows for example conditional cloning of objects, something which is nearly impossible in OpenSCAD.
• Properties and Connectors (see below) make it very easy to attach objects to each other at predetermined points, even if you don't know the actual orientation or size.
• Extensive built in support for 2D and 3D math (classes for Vector2D, Vector3D, Plane, Line3D, Line2D)

Viewer navigation

Demos

• Involute Gears
• Parametric S hook

License

Primitive solids

// a cube:
var cube = CSG.cube({
  center: [0, 0, 0],
  radius: [1, 1, 1]
});

// a sphere:
var sphere = CSG.sphere({
  center: [0, 0, 0],
  radius: 2,            // must be scalar
  resolution: 32
});

// a cylinder:
var cylinder = CSG.cylinder({
  start: [0, -1, 0],
  end: [0, 1, 0],
  radius: 1,
  resolution: 16
});

// like a cylinder, but with spherical endpoints:
var roundedCylinder = CSG.roundedCylinder({
  start: [0, -1, 0],
  end: [0, 1, 0],
  radius: 1,
  resolution: 16
});

// a rounded cube:
var cube = CSG.roundedCube({
  center: [0, 0, 0],
  radius: 1,
  roundradius: 0.2,
  resolution: 8,
});

CSG operations

var csg1 = cube.union(sphere);
var csg2 = cube.intersect(sphere);
var csg3 = cube.subtract(sphere);

Transformations

var cube = CSG.cube();

// translation:
var cube2 = cube.translate([1, 2, 3]);

// scaling:
var largecube = cube.scale(2.0);
var stretchedcube = cube.scale([1.5, 1, 0.5]);

// rotation:
var rotated1 = cube.rotateX(-45); // rotate around the X axis
var rotated2 = cube.rotateY(90);  // rotate around the Y axis
var rotated3 = cube.rotateZ(20);  // rotate around the Z axis

// combine multiple transforms into a single matrix transform:
var m = new CSG.Matrix4x4();
m = m.multiply(CSG.Matrix4x4.rotationX(40));
m = m.multiply(CSG.Matrix4x4.rotationZ(40));
m = m.multiply(CSG.Matrix4x4.translation([-.5, 0, 0]));
m = m.multiply(CSG.Matrix4x4.scaling([1.1, 1.2, 1.3]));

// and apply the transform:
var cube3 = cube.transform(m);

Mirroring

var cube = CSG.cube().translate([1,0,0]);

var cube2 = cube.mirroredX(); // mirrored in the x=0 plane
var cube3 = cube.mirroredY(); // mirrored in the y=0 plane
var cube4 = cube.mirroredZ(); // mirrored in the z=0 plane

// create a plane by specifying 3 points:
var plane = CSG.Plane.fromPoints([5,0,0], [5, 1, 0], [3, 1, 7]);

// and mirror in that plane:
var cube5 = cube.mirrored(plane);

Cutting by a plane

var cube = CSG.cube({radius: 10});

// create a plane by specifying 3 points:
var plane1 = CSG.Plane.fromPoints([5,0,0], [7, 1, 0], [3, 1, 7]);

// or by specifying a normal and a point on the plane:
var plane2 = CSG.Plane.fromNormalAndPoint([3, 1, 2], [5, 0, 0]);

// and cut by the plane:
var part1 = cube.cutByPlane(plane2);

// or if we need the other half of the cube:
var part2 = cube.cutByPlane(plane2.flipped());

Expansion and contraction

var cube1 = CSG.cube({radius: 1.0});
var cube2 = CSG.cube({radius: 1.0}).translate([-0.3, -0.3, -0.3]);
var csg = cube1.subtract(cube2);
var rounded = csg.expand(0.2, 8); 

Using Properties

var cube = CSG.cube({radius: 1.0});
cube.properties.aCorner = new CSG.Vector3D([1, 1, 1]);
cube = cube.translate([5, 0, 0]);
cube = cube.scale(2);
// cube.properties.aCorner will now point to [12, 2, 2],
// which is still the same corner point 

// Properties can be stored in arrays; all properties in the array
// will be transformed if the solid is transformed:
cube.properties.otherCorners = [
  new CSG.Vector3D([-1, 1, 1]),
  new CSG.Vector3D([-1, -1, 1])
];

// and we can create sub-property objects; these must be of the 
// CSG.Properties class. All sub properties will be transformed with
// the solid:
cube.properties.myProperties = new CSG.Properties();
cube.properties.myProperties.someProperty = new CSG.Vector3D([-1, -1, -1]);

Connectors

var cube1 = CSG.cube({radius: 10});
var cube2 = CSG.cube({radius: 4});

// define a connector on the center of one face of cube1
// The connector's axis points outwards and its normal points
// towards the positive z axis:
cube1.properties.myConnector = new CSG.Connector([10, 0, 0], [1, 0, 0], [0, 0, 1]);

// define a similar connector for cube 2:
cube2.properties.myConnector = new CSG.Connector([0, -4, 0], [0, -1, 0], [0, 0, 1]);

// do some random transformations on cube 1:
cube1 = cube1.rotateX(30);
cube1 = cube1.translate([3.1, 2, 0]);

// Now attach cube2 to cube 1:
cube2 = cube2.connectTo(
  cube2.properties.myConnector, 
  cube1.properties.myConnector, 
  true,   // mirror 
  0       // normalrotation
);

// Or alternatively:
var matrix = cube2.properties.myConnector.getTransformationTo(
  cube1.properties.myConnector, 
  true,   // mirror 
  0       // normalrotation
);
cube2 = cube2.transform(matrix);

var result = cube2.union(cube1);

Determining the bounds of an object

var cube1 = CSG.cube({radius: 10});
var cube2 = CSG.cube({radius: 5});

// get the right bound of cube1 and the left bound of cube2:
var deltax = cube1.getBounds()[1].x - cube2.getBounds()[0].x;

// align cube2 so it touches cube1:
cube2  = cube2.translate([deltax, 0, 0]);

return cube1.union(cube2);

2D shapes

// Create a shape; argument is an array of 2D coordinates
// The shape must be convex, can be specified in clockwise or in counterclockwise direction 
var shape2d=new CSG.Polygon2D([[0,0], [5,0], [3,5], [0,5]]);

// Do some transformations:
shape2d=shape2d.translate([-2, -2]);
shape2d=shape2d.rotate(20);
shape2d=shape2d.scale([0.2, 0.2]);

// And extrude. This creates a CSG solid:
var extruded=shape2d.extrude({
  offset: [0.5, 0, 2],   // direction for extrusion
  twistangle: 180,       // top surface is rotated 180 degrees 
  twiststeps: 100        // create 100 slices
});

2D Paths

var path = new CSG.Path2D([[10,10], [-10,10]], /* closed = */ false);
var anotherpath = new CSG.Path2D([[-10,-10]]);
path = path.concat(anotherpath);
path = path.appendPoint([10,-10]);
path = path.close(); // close the path

// of course we could simply have done:
// var path = new CSG.Path2D([[10,10], [-10,10], [-10,-10], [10,-10]], /* closed = */ true);

// Extrude the path by following it with a rectangle (upright, perpendicular to the path direction)
// Returns a CSG solid
//   width: width of the extrusion, in the z=0 plane
//   height: height of the extrusion in the z direction
//   resolution: number of segments per 360 degrees for the curve in a corner
//   roundEnds: if true, the ends of the polygon will be rounded, otherwise they will be flat
var csg = path.rectangularExtrude(3, 4, 16, true);
return csg;

Interactive parametric models

{
  name: 'width',
  type: 'float',                      // or 'text' or 'int'
  default: 1.23,                      // optional, sets the initial value
  caption: 'Width of the thingy:',    // optional, displayed left of the input field
                                      // if omitted, the 'name' is displayed (i.e. 'width')
}

{
  name: 'shape',
  type: 'choice',
  values: ["TRI", "SQU", "CIR"],               // these are the values that will be supplied to your script
  captions: ["Triangle", "Square", "Circle"],  // optional, these values are shown in the listbox
                                               // if omitted, the items in the 'values' array are used
  caption: 'Shape:',                           // optional, displayed left of the input field
  default: "SQU",                              // optional, default selected value
                                               // if omitted, the first item is selected by default
}

function main(params)
{
  // custom error checking:
  if(params.width <= 0) throw new Error("Width should be positive!");
  
  if(params.shape == "TRI")
  {
    // do something
  }
}

function getParameterDefinitions() {
  return [
    {
      name: 'width', 
      type: 'float', 
      default: 10,
      caption: "Width of the cube:", 
    },
    {
      name: 'height', 
      type: 'float', 
      default: 14,
      caption: "Height of the cube:", 
    },
    {
      name: 'depth', 
      type: 'float', 
      default: 7,
      caption: "Depth of the cube:", 
    },
    {
      name: 'rounded', 
      type: 'choice',
      caption: 'Round the corners?',
      values: [0, 1],
      captions: ["No thanks", "Yes please"], 
      default: 1,
    },
  ];
}

function main(params) {
  var result;
  if(params.rounded == 1)
  {
    result = CSG.roundedCube({radius: [params.width, params.height, params.depth], roundradius: 2, resolution: 32});
  }
  else
  {
    result = CSG.cube({radius: [params.width, params.height, params.depth]});
  }
  return result;
}

Miscellaneous

var cube1 = CSG.cube({radius: 10});
cube1 = cube1.setColor(0.5, 0, 0);

var cube2 = CSG.cube({radius: 10});
cube2 = cube2.setColor(0, 0.5, 0);
cube2 = cube2.translate([5,1,4]);

var result = cube1.subtract(cube2);
// the resulting solid will have faces with 2 different colors

2D and 3D Math

// --------- Vector3D ---------------------
var vec1 = new CSG.Vector3D(1,2,3);       // 3 arguments
var vec2 = new CSG.Vector3D( [1,2,3] );   // 1 array argument
var vec3 = new CSG.Vector3D(vec2);        // cloning a vector
// vector math. All operations return a new vector, the original is unmodified!
vec.negated()
vec.abs()
vec.plus(othervector)
vec.minus(othervector)
vec.times(3.0)
vec.dividedBy(-5)
vec.dot(othervector)
vec.lerp(othervector, t)  // linear interpolation (0 <= t <= 1)
vec.length()
vec.lengthSquared()       // == vec.length()^2
vec.unit()
vec.cross(othervector)    // cross product: returns a vector perpendicular to both
vec.distanceTo(othervector)
vec.distanceToSquared(othervector)  // == vec.distanceTo(othervector)^2
vec.equals(othervector)
vec.multiply4x4(matrix4x4)   // right multiply by a 4x4 matrix

// --------- Vector2D ---------------------
var vec1 = new CSG.Vector2D(1,2);       // 2 arguments
var vec2 = new CSG.Vector2D( [1,2] );   // 1 array argument
var vec3 = new CSG.Vector2D(vec2);      // cloning a vector
// vector math. All operations return a new vector, the original is unmodified!
vec.negated()
vec.abs()
vec.plus(othervector)
vec.minus(othervector)
vec.times(3.0)
vec.dividedBy(-5)
vec.dot(othervector)
vec.lerp(othervector, t)  // linear interpolation (0 <= t <= 1)
vec.length()
vec.unit()
vec.normal()              // returns a 90 degree clockwise rotated vector
vec.distanceTo(othervector)
vec.equals(othervector)
vec.multiply4x4(matrix4x4)   // right multiply by a 4x4 matrix
vec.toVector3D(z)         // convert to a vector3D by adding a z coordinate
vec.angleDegrees()        // returns the angle of the vector: [1,0] = 0 degrees, [0, 1] = 90 degrees, etc
vec.angleRadians()        // ditto in radians
var vec = CSG.Vector2D.fromAngleDegrees(degrees);  // returns a vector at the specified angle
var vec = CSG.Vector2D.fromAngleRadians(radians);  // returns a vector at the specified angle

// --------- Matrix4x4 ---------------------
var m1 = new CSG.Matrix4x4();          // unity matrix
var m2 = new CSG.Matrix4x4( [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] );
  // elements are passed in row order
var result = m1.plus(m2); 
var result = m1.minus(m2);
var result = m1.multiply(m2);
// matrix vector multiplication (vectors are padded with zeroes to get a 4x1 vector):
var vec3d = m1.rightMultiply1x3Vector(vec3d);  // matrix * vector 
var vec3d = m1.leftMultiply1x3Vector(vec3d);   // vector * matrix
var vec2d = m1.rightMultiply1x2Vector(vec2d);  // matrix * vector 
var vec2d = m1.leftMultiply1x2Vector(vec2d);   // vector * matrix
// common transformation matrices:
var m = CSG.Matrix4x4.rotationX(degrees);      // matrix for rotation about X axis
var m = CSG.Matrix4x4.rotationY(degrees);      // matrix for rotation about Y axis
var m = CSG.Matrix4x4.rotationZ(degrees);      // matrix for rotation about Z axis
var m = CSG.Matrix4x4.translation(vec3d);      // translation
var m = CSG.Matrix4x4.scaling(vec3d);          // scale
var m = CSG.Matrix4x4.mirroring(plane);        // mirroring in a plane; the argument must be a CSG.Plane
// matrix transformations can be concatenated:
var transform = CSG.Matrix4x4.rotationX(20).multiply(CSG.Matrix4x4.rotationY(30));
// Use a CSG solid's transform() method to apply the transformation to a CSG solid

// ------------ Plane --------------------------
// a 3D plane is represented by a normal vector (should have unit length) and a distance from the origin w 
// the plane passes through normal.times(w)
var plane1 = new CSG.Plane(normal, w);         
// Or we can construct a plane from 3 points:
var plane2 = CSG.Plane.fromPoints(p1, p2, p3);
// Or from a normal vector and 1 point:
var plane3 = CSG.Plane.fromNormalAndPoint(normal, point);
// Flip a plane (front side becomes back side):
var plane4 = plane3.flipped();
// Apply transformations (rotation, scaling, translation):
var transformed = plane3.transformed(matrix4x4);  // argument is a CSG.Matrix4x4
// Intersection of plane and 3d line:
var point = plane3.intersectWithLine(line);        // argument is CSG.Line3D, returns a CSG.Vector3D
// Intersection of 2 planes:
var line = plane3.intersectWithPlane(plane);       // argument is another CSG.Plane, returns a CSG.Line3D
// Distance to point:
var w = signedDistanceToPoint(point);             // argument is CSG.Vector3D, returns a float (positive
                                                  //    if in front of plane, negative if in back)

// ------------ Line3D --------------------------
// A line in 3d space is represented by a point and a direction vector.
// Direction should be a unit vector. Point can be any point on the line:
var line = new CSG.Line3D(point, direction);      // argumenst are CSG.Vector3D
// or by giving two points:
var line = CSG.Line3D.fromPoints(p1, p2);         // argumenst are CSG.Vector3D
var point = intersectWithPlane(plane);            // == plane.intersectWithLine(this)
var line2 = line.reverse();                       // same line but reverse direction
var line2 = line.transform(matrix4x4);            // for rotation, scaling, etc
var p = line.closestPointOnLine(point);           // project point onto the line
var d = line.distanceToPoint(point);