OpenJsCad/servodemo.html
2012-02-16 18:13:55 +01:00

227 lines
8.1 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>
<link rel="stylesheet" href="openjscad.css" type="text/css">
<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 demo: servo motor</title>
</head>
<body onload="onload()">
<h1>OpenJsCad demo: servo motor</h1>
<div id="viewer"></div>
<h2>Source code</h2>
Below is the OpenJsCad script for this demo. To build your own models, create a .jscad script
and use the <a href="processfile.html"><b>OpenJsCad parser</b></a>. For more information see the
<a href="index.html">OpenJsCad documentation</a>.
<br><br>
<textarea id="code" style="height: 500px">
// This demo intends to show how to use properties and connectors.
// The servoMotor() function constructs the shape of a standard servo
// It also defines a property for the cutout shape, and a connector property
// which can be used to correctly attach the motor to a surface.
//
// By using connectors, we don't need to know the actual orientation of each
// object. Instead we just attach the two objects by attaching their connectors.
//
// The cutout shape is automatically transformed with every transformation of
// the servo. We can simply subtract it from an object to make space for the servo
// motor.
function main(params)
{
// the servo motor solid:
var servo = servoMotor();
// the plate:
var plate = CSG.cube({radius: [40,40,4]});
// Define a Connector on the plate, at the place where we want to attach the servo:
plate.properties.servoConnector = new CSG.Connector(
[0, 0, 4], // point
[0, 0, 1], // axis: pointing upwards
[2.5, 1.1, 0] // normal: use some random vector in the z plane
);
// Do some random rotations:
plate = plate.rotateX(25);
plate = plate.rotateZ(10);
// now we really don't know the orientation of the plane anymore!
// Still we can perfectly align the servo motor to the plane at the servoConnector
// point that we decided on earlier:
servo = servo.connectTo(
servo.properties.servomotor.surfaceConnector, // the servo's pre defined Connector
plate.properties.servoConnector, // the connector on the surface
false, // we don't want to mirror; the Connector's axes should point in the same direction
0 // normalrotation; we could use it to rotate the servo in the plane
);
// Construct the result; use the parameters set by the end user:
var result = new CSG();
if(params.cutout != 0) plate = plate.subtract(servo.properties.servomotor.cutout);
if(params.showplate != 0) result = result.union(plate);
if(params.showservo != 0) result = result.union(servo);
if(params.showcutout != 0) result = result.union(servo.properties.servomotor.cutout.setColor(0,0.8,0));
return result;
}
// Here we define the user editable parameters:
function getParameterDefinitions() {
return [
{ name: 'showservo', caption: 'Show servo:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
{ name: 'showplate', caption: 'Show plate:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
{ name: 'showcutout', caption: 'Show cutout:', type: 'choice', values: [0, 1], default: 0, captions: ["No", "Yes"]},
{ name: 'cutout', caption: 'Subtract the servo cutout shape from the plate:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
];
}
// The servoMotor() function constructs the shape of a standard '3003' servo
// Returns a CSG solid. The solid has the following additional properties:
// .properties.servomotor.cutout: a CSG solid that can be used to create a cutout for the servo motor (including screw holes)
// .properties.servomotor.surfaceConnector: a CSG.Connector that can be used to attach the servo motor to a surface
function servoMotor()
{
var width = 20;
var length = 40.5;
var h1 = 26.5;
var h2 = 29;
var h4 = 35.9;
var l1 = 55.4;
var w1 = 17.8;
var holeradius = 2.1;
var holex1 = 2 * 2.54;
var holey1 = 9.5 * 2.54;
var cutoutmargin = 1;
var shaftradius = 3;
var shafty = 9.25;
var shafttop = 43;
var cyl2radius = 7;
var cyl2height = 2;
var resolution = 16; // for all circular objects
// result: this is the solid in which we will store the servomotor
var result = CSG.cube({radius:[width/2, length/2, h4/2]});
// cutout: this is the solid for the cutout. It is never rendered directly,
// but it will be returned as a property of the resulting solid.
// it can be used to cutout the shape of the servo motor and screw holes
// from another solid
var cutout = CSG.cube({radius:[width/2+cutoutmargin, length/2+cutoutmargin, h4/2+cutoutmargin]});
// add a 'bottomface' property. Since the cube already has predifined connectors at each face,
// we can just copy the 5th:
result.properties.servomotor = new CSG.Properties();
result.properties.servomotor.bottomface = result.properties.cube.facecenters[5];
// get the z coordinate of the bottom face:
var bottomz = result.properties.servomotor.bottomface.point.z;
// the tabs at the end containing the screw holes:
var cube2 = CSG.cube({radius:[w1/2, l1/2, (h2-h1)/2]});
cube2 = cube2.translate([0, 0, (h2-h1)/2 + bottomz + h1]);
result = result.union(cube2);
// create the cylinders for cutting out the screw holes:
for(var hole = 0; hole < 4; hole++)
{
var xoffset = (hole & 1)? holex1 : -holex1;
var yoffset = (hole & 2)? holey1 : -holey1;
var cylstart = new CSG.Vector3D([xoffset, yoffset, bottomz+h2]);
var cylend = new CSG.Vector3D([xoffset, yoffset, bottomz]);
var cutoutcylinder = CSG.cylinder({start: cylstart, end: cylend, radius: holeradius, resolution: resolution});
// create the screw hole in the tabs:
result = result.subtract(cutoutcylinder);
// And also add the cutout cylinder to the cutout shape:
cutout = cutout.union(cutoutcylinder);
}
// cylinder at top:
var p1 = new CSG.Vector3D([0, shafty, bottomz+h4]);
p2 = p1.plus(new CSG.Vector3D([0, 0, cyl2height]));
var cyl = CSG.cylinder({start: p1, end: p2, radius: cyl2radius, resolution: resolution});
result = result.union(cyl);
// make the entire motor grey:
result = result.setColor(0.2,0.2,0.2);
// create the shaft:
p1 = new CSG.Vector3D([0, shafty, bottomz+h4]);
p2 = p1.plus(new CSG.Vector3D([0, 0, cyl2height]));
var shaft = CSG.cylinder({start: [0, shafty, bottomz+h4], end: [0, shafty, bottomz+shafttop], radius: shaftradius, resolution: resolution});
shaft = shaft.setColor(1,1,1);
result = result.union(shaft);
// add the cutout solid to the properties:
result.properties.servomotor.cutout = cutout;
// Add a Connector to facilitate proper alignment of the servo motor to a surface
// The connector's point is at the x/y center of the box, in the bottom plane of the tabs
// The connector's axis points towards the top of the box
// The connector's normal points towards one of the tabs at the side
result.properties.servomotor.surfaceConnector = new CSG.Connector(
[0, 0, bottomz+h1], // point
[0, 0, 1], // axis
[0, 1, 0] // normal
);
return result;
}
</textarea><br>
<input type="submit" value="Update" onclick="updateSolid(); return false;">
<br><br>
</body>
</html>