426 lines
15 KiB
HTML
426 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html><head>
|
|
<script src="lightgl.js"></script>
|
|
<script src="csg.js"></script>
|
|
<script src="openjscad.js"></script>
|
|
<style>
|
|
|
|
body {
|
|
font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
pre, code, textarea {
|
|
font: 12px/20px Monaco, monospace;
|
|
border: 1px solid #CCC;
|
|
border-radius: 3px;
|
|
background: #F9F9F9;
|
|
padding: 0 3px;
|
|
color: #555;
|
|
}
|
|
pre, textarea {
|
|
padding: 10px;
|
|
width: 100%;
|
|
}
|
|
textarea {
|
|
height: 200px;
|
|
}
|
|
textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
canvas { cursor: move; }
|
|
|
|
</style>
|
|
<script>
|
|
|
|
var gProcessor=null;
|
|
|
|
// Show all exceptions to the user:
|
|
OpenJsCad.AlertUserOfUncaughtExceptions();
|
|
|
|
function onload()
|
|
{
|
|
gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
|
|
updateSolid();
|
|
}
|
|
|
|
function updateSolid()
|
|
{
|
|
gProcessor.setJsCad(document.getElementById('code').value);
|
|
}
|
|
</script>
|
|
<title>OpenJsCad</title>
|
|
</head>
|
|
<body onload="onload()">
|
|
<h1>OpenJsCad</h1>
|
|
Create an STL file for 3D printing using constructive solid modeling in Javascript.
|
|
<div id="viewer"></div>
|
|
<h2>Playground</h2>
|
|
Try it by entering some code below. Anything you enter will be lost as soon as this page is reloaded;
|
|
to build your own models you should instead store them in a .jscad file on your computer
|
|
and use the <a href="processfile.html"><b>OpenJsCad parser</b></a>.
|
|
<br><br>
|
|
<textarea id="code">
|
|
function main()
|
|
{
|
|
var resolution = 16; // increase to get smoother corners (will get slow!)
|
|
|
|
var cube1 = CSG.roundedCube({center: [0,0,0], radius: [10,10,10], roundradius: 2, resolution: resolution});
|
|
var sphere1 = CSG.sphere({center: [5, 5, 5], radius: 10, resolution: resolution });
|
|
var sphere2 = sphere1.translate([12, 5, 0]);
|
|
var sphere3 = CSG.sphere({center: [20, 0, 0], radius: 30, resolution: resolution });
|
|
|
|
var result = cube1;
|
|
result = result.union(sphere1);
|
|
result = result.subtract(sphere2);
|
|
result = result.intersect(sphere3);
|
|
return result;
|
|
}
|
|
</textarea><br>
|
|
<input type="submit" value="Update" onclick="updateSolid(); return false;">
|
|
<br>
|
|
<h1>About</h1>
|
|
This is intended to become a Javascript based alternative to <a href="http://www.openscad.org/">OpenSCAD</a>,
|
|
for 3D solid modeling.
|
|
CSG model is contructed using Javascript. For example:<br>
|
|
<pre>function main() {
|
|
var cube = CSG.cube();
|
|
return cube;
|
|
}</pre>
|
|
creates a cube with a radius of 1 and centered at the origin.
|
|
The code should always contain a main() function, returning a CSG solid.
|
|
<br><br>
|
|
To build your own models, create a .jscad file with your javascript code and parse the file using the
|
|
<a href="processfile.html">OpenJsCad parser</a>. When finished, click on Generate STL and save the result
|
|
in an .stl file, ready to be printed on your 3d printer.
|
|
<h2>License</h2>
|
|
Copyright (c) 2012 Joost Nieuwenhuijse.
|
|
Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c) 2011 Evan Wallace,
|
|
<a href="https://github.com/joostn/csg.js">extensively modified</a>, copyright (c) 2012 Joost Nieuwenhuijse.
|
|
Uses <a href="https://github.com/evanw/lightgl.js">lightgl.js</a> by Evan Wallace for WebGL rendering.
|
|
All code released under MIT license.
|
|
<br><br>
|
|
Contributions are welcome! It's all written in Javascript, so if you know how to use it you
|
|
know how to modify it as well.<br><br>
|
|
To contribute go to <a href="https://github.com/joostn/csg.js">CSG.js at GitHub</a>,
|
|
<a href="http://help.github.com/fork-a-repo/">create your own fork</a> and
|
|
<a href="http://help.github.com/send-pull-requests/">send me a pull request</a>.
|
|
<h2>Viewer navigation</h2>
|
|
Click and drag to rotate the model around the origin.<br>
|
|
Shift+Drag moves the model around.<br>
|
|
Alt+drag zooms (by changing the distance between camera and model).
|
|
|
|
<h2>Primitive solids</h2>
|
|
Currently the following solids are supported. The parameters are passed in an object; most
|
|
parameters are optional. 3D vectors can be passed in an array. If a scalar is passed
|
|
for a parameter which expects a 3D vector, it is used for the x, y and z value.
|
|
In other words: <code>radius: 1</code> will give <code>radius: [1,1,1]</code>.
|
|
<br><br>
|
|
All rounded solids have a 'resolution' parameter which controls tesselation. If resolution
|
|
is set to 8, then 8 polygons per 360 degree of revolution are used. Beware that rendering
|
|
time will increase dramatically when increasing the resolution. For a sphere the number of polygons
|
|
increases quadratically with the resolution used.
|
|
<br><br>
|
|
<pre>
|
|
// 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,
|
|
});
|
|
</pre>
|
|
|
|
<h2>CSG operations</h2>
|
|
The 3 standard CSG operations are supported. All CSG operations return a new solid; the source solids
|
|
are not modified:
|
|
<pre>
|
|
var csg1 = cube.union(sphere);
|
|
var csg2 = cube.intersect(sphere);
|
|
var csg3 = cube.subtract(sphere);
|
|
</pre>
|
|
|
|
<h2>Transformations</h2>
|
|
Solids can be translated, scaled and rotated. Multiple transforms can be combined into a single matrix transform:
|
|
<pre>
|
|
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);
|
|
</pre>
|
|
|
|
<h2>Mirroring</h2>
|
|
Solids can be mirrored in any plane in 3D space:
|
|
<pre>
|
|
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);
|
|
</pre>
|
|
|
|
<h2>Cutting by a plane</h2>
|
|
A solid can be cut by a plane; only the part on the back side is kept:
|
|
|
|
<pre>
|
|
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());
|
|
</pre>
|
|
|
|
|
|
<h2>Expansion and contraction</h2>
|
|
Expansion can be seen
|
|
as the 3D convolution of an object with a sphere. Contraction is the reverse: the area outside the solid
|
|
is expanded, and this is then subtracted from the solid.
|
|
<br><br>
|
|
Expansion and contraction are very powerful ways to get an object with nice smooth corners. For example
|
|
a rounded cube can be created by expanding a normal cube.
|
|
<br><br>
|
|
Note that these are expensive operations: spheroids are created around every corner and edge in the original
|
|
object, so the number of polygons quickly increases. Expansion and contraction therefore are only practical for simple
|
|
non-curved objects.
|
|
<br><br>
|
|
expand() and contract() take two parameters: the first is the radius of expansion or contraction; the second
|
|
parameter is optional and specififies the resolution (number of polygons on spherical surfaces, per 360 degree revolution).
|
|
<pre>
|
|
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);
|
|
</pre>
|
|
|
|
<h2>Using Properties</h2>
|
|
The 'property' property of a solid can be used to store metdata for the object,
|
|
for example the coordinate of a specific point of interest of the solid. Whenever
|
|
the object is transformed (i.e. rotated, scaled or translated), the properties
|
|
are transformed with it. So the property will keep pointing to the same point
|
|
of interest even after several transformations have been applied to the solid.
|
|
<br><br>
|
|
Properties can have any type, but only the properties of classes supporting
|
|
a 'transform' method will actually be transformed. This includes CSG.Vector3D,
|
|
CSG.Plane and CSG.Connector. In particular CSG.Connector properties (see below)
|
|
can be very useful: these can
|
|
be used to attach a solid to another solid at a predetermined location regardless of the
|
|
current orientation.
|
|
<br><br>
|
|
It's even possible to include a CSG solid as a property of another solid. This could
|
|
be used for example
|
|
to define the cutout cylinders to create matching screw holes for an object. Those 'solid properties'
|
|
get the same transformations as the owning solid but they will not be visible in the result
|
|
of CSG operations such as union().
|
|
<br><br>
|
|
Other kind of properties (for
|
|
example, strings) will still be included in the properties of the transformed
|
|
solid, but the properties will not get any transformation when the owning solid is transformed. <br><br>
|
|
All primitive solids have some predefined properties, such as the center point
|
|
of a sphere (TODO: document).
|
|
<br><br>
|
|
The solid resulting from CSG operations (union(), subtract(), intersect()) will get
|
|
the merged properties of both source solids. If identically named properties exist, only
|
|
one of them will be kept.
|
|
<pre>
|
|
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]);
|
|
</pre>
|
|
|
|
<h2>Connectors</h2>
|
|
The CSG.Connector class is intended to facilitate
|
|
attaching two solids to each other at a predetermined
|
|
location and orientation.
|
|
For example suppose we have a CSG solid depicting a servo motor
|
|
and a solid of a servo arm: by defining a Connector property for each of them, we
|
|
can easily attach the servo arm to the servo motor at the correct position
|
|
(i.e. the motor shaft) and orientation (i.e. arm perpendicular to the shaft)
|
|
even if we don't know their current position and orientation
|
|
in 3D space.<br><br>
|
|
In other words Connector give us the freedom to rotate and translate objects at will without the need
|
|
to keep track of their positions and boundaries. And if a third party library exposes connectors for
|
|
its solids, the user of the library does not have to know the actual dimensions or
|
|
shapes, only the names of the connector properties.
|
|
<br><br>
|
|
A CSG.Connector consist of 3 properties:<br>
|
|
<b>point</b>: a CSG.Vector3D defining the connection point in 3D space<br>
|
|
<b>axis</b>: a CSG.Vector3D defining the direction vector of the connection
|
|
(in the case of the servo motor example it would point in the direction of the shaft)<br>
|
|
<b>normal</b>: a CSG.Vector3D direction vector somewhat perpendicular to axis; this
|
|
defines the "12 o'clock" orientation of the connection.
|
|
<br><br>
|
|
When connecting two connectors, the solid is transformed such that the <b>point</b>
|
|
properties will be identical, the <b>axis</b> properties will have the same direction
|
|
(or opposite direction if mirror == true), and the <b>normal</b>s match as much as possible.
|
|
<br><br>
|
|
Connectors can be connected by means of two methods:<br>
|
|
A CSG solid's <b>connectTo()</b> function transforms a solid such that two connectors
|
|
become connected.<br>
|
|
Alternatively we can use a connector's <b>getTransformationTo()</b> method to obtain
|
|
a transformation matrix which would connect the connectors. This can be used if we
|
|
need to apply the same transform to multiple solids.
|
|
|
|
<pre>
|
|
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);
|
|
|
|
</pre>
|
|
|
|
<h2>Determining the bounds of an object</h2>
|
|
The getBounds() function can be used to retrieve the bounding box of an object.
|
|
getBounds() returns
|
|
an array with two elements specifying the minimum x,y,z coordinate and the maximum x,y,z coordinate:
|
|
|
|
<pre>
|
|
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);
|
|
</pre>
|
|
|
|
<h2>2D shapes</h2>
|
|
Two dimensional shapes can be defined through the Polygon2D class. Currently this requires the polygon to be convex
|
|
(i.e. all corners less than 180 degrees). Shapes can be transformed (rotation, translation, scaling).
|
|
To actually use the shape it needs to be extruded into a 3D CSG object through the extrude() function. extrude()
|
|
places the 2D solid onto the z=0 plane, and extrudes in the specified direction. Extrusion can be done with an optional
|
|
twist. This rotates the solid around the z axis (and not necessariy around the extrusion axis) during extrusion.
|
|
The total degrees of rotation is specified in the twistangle parameter, and twiststeps determine the number of steps
|
|
between the bottom and top surface.
|
|
<pre>
|
|
// 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
|
|
});
|
|
</pre>
|
|
|
|
</body>
|
|
</html> |