2015-04-24 16:12:48 +02:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Doedel Drie Dee || Slice Test</title>
|
|
|
|
|
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>-->
|
|
|
|
|
<script src="library/jquery.js"></script>
|
|
|
|
|
<script src="library/three.js"></script>
|
2015-04-28 16:08:56 +02:00
|
|
|
<script src="library/cal.js"></script>
|
2015-04-30 18:26:34 +02:00
|
|
|
<script src="library/clipper.js"></script>
|
2015-04-24 16:12:48 +02:00
|
|
|
|
2015-04-24 21:32:39 +02:00
|
|
|
<script src="src/utils.js"></script>
|
|
|
|
|
<script src="src/box.js"></script>
|
|
|
|
|
<script src="src/printer.js"></script>
|
|
|
|
|
<script src="src/slicer.js"></script>
|
2015-04-24 16:12:48 +02:00
|
|
|
|
|
|
|
|
<script src="gcode/testgcode.js"></script>
|
|
|
|
|
<script src="gcode/easterbunny.js"></script>
|
|
|
|
|
|
2015-04-28 16:08:56 +02:00
|
|
|
<style>
|
|
|
|
|
canvas {border: 1px solid black;}
|
|
|
|
|
</style>
|
2015-04-24 16:12:48 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-04-28 16:08:56 +02:00
|
|
|
<canvas id="3d-preview" height="400" width="400"></canvas>
|
|
|
|
|
<canvas id="canvas" width="400" height="400"></canvas>
|
2015-04-24 16:12:48 +02:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var localIp = location.hash.substring(1);
|
|
|
|
|
var doodleBox = new D3D.Box(localIp);
|
|
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
var gcode;
|
2015-04-24 16:12:48 +02:00
|
|
|
doodleBox.onload = function () {
|
2015-04-30 18:26:34 +02:00
|
|
|
doodleBox.printer.config["printer.bottomFlowRate"] = 1.0;
|
|
|
|
|
doodleBox.printer.config["printer.layerHeight"] = 0.3;
|
|
|
|
|
doodleBox.printer.config["printer.retraction.enabled"] = false;
|
2015-04-24 16:12:48 +02:00
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
gcode = slicer.getGcode(doodleBox.printer.config);
|
2015-04-24 16:12:48 +02:00
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
|
var context = canvas.getContext("2d");
|
|
|
|
|
|
|
|
|
|
function drawPolygons (paths, color) {
|
|
|
|
|
context.fillStyle = color;
|
|
|
|
|
context.strokeStyle = color;
|
|
|
|
|
context.beginPath();
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < paths.length; i ++) {
|
|
|
|
|
var path = paths[i];
|
|
|
|
|
|
|
|
|
|
context.moveTo((path[0].X- 100) * 8.0 + 200, (path[0].Y- 100) * 8.0 + 200);
|
|
|
|
|
|
|
|
|
|
for (var j = 0; j < path.length; j ++) {
|
|
|
|
|
var point = path[j];
|
|
|
|
|
context.lineTo((point.X- 100) * 8.0 + 200, (point.Y- 100) * 8.0 + 200);
|
|
|
|
|
}
|
|
|
|
|
context.closePath();
|
|
|
|
|
}
|
|
|
|
|
context.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//for (var layer = 0; layer < gcode.length; layer ++) {
|
|
|
|
|
var layer = 0;
|
|
|
|
|
var slice = gcode[layer];
|
|
|
|
|
|
|
|
|
|
console.log(gcode.length);
|
|
|
|
|
|
|
|
|
|
drawPolygons(slice.outerLayer, "red");
|
|
|
|
|
drawPolygons(slice.innerLayer, "green");
|
|
|
|
|
drawPolygons(slice.fill, "blue");
|
|
|
|
|
//}*/
|
2015-04-24 16:12:48 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var scene = new THREE.Scene();
|
|
|
|
|
|
|
|
|
|
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById("3d-preview")});
|
|
|
|
|
renderer.setClearColor(0xffffff, 1);
|
|
|
|
|
|
|
|
|
|
var camera = new THREE.PerspectiveCamera(75, renderer.domElement.width/renderer.domElement.height, 1, 10000);
|
|
|
|
|
|
|
|
|
|
applyMouseControls(renderer, camera, 1000);
|
|
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
var geometry = (function () {
|
|
|
|
|
var circle = new THREE.Shape();
|
|
|
|
|
circle.absarc(0, 0, 20, 0, Math.PI*2, false);
|
|
|
|
|
|
|
|
|
|
var hole = new THREE.Path();
|
|
|
|
|
hole.absarc(0, 0, 10, 0, Math.PI*2, true );
|
|
|
|
|
|
|
|
|
|
circle.holes.push(hole);
|
|
|
|
|
|
|
|
|
|
var matrix = new THREE.Matrix4();
|
|
|
|
|
matrix.makeRotationX(Math.PI*1.5);
|
|
|
|
|
|
|
|
|
|
var geometry = new THREE.ExtrudeGeometry(circle, {
|
|
|
|
|
amount: 1,
|
|
|
|
|
bevelEnabled: false,
|
|
|
|
|
steps: 1
|
|
|
|
|
});
|
|
|
|
|
geometry.applyMatrix(matrix);
|
|
|
|
|
|
|
|
|
|
return geometry;
|
|
|
|
|
})();
|
|
|
|
|
|
2015-04-28 14:11:41 +02:00
|
|
|
var material = new THREE.MeshLambertMaterial({color: 0x000000, wireframe: true});
|
2015-04-30 18:26:34 +02:00
|
|
|
//var geometry = new THREE.TorusGeometry(40, 20, 10, 10);
|
2015-04-24 16:12:48 +02:00
|
|
|
//var geometry = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1);
|
2015-04-30 18:26:34 +02:00
|
|
|
//var geometry = new THREE.SphereGeometry(10, 10, 10);
|
2015-04-24 16:12:48 +02:00
|
|
|
var mesh = new THREE.Mesh(geometry, material);
|
|
|
|
|
scene.add(mesh);
|
|
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
var slicer = new D3D.Slicer().setGeometry(geometry);
|
|
|
|
|
|
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
|
var context = canvas.getContext("2d");
|
|
|
|
|
|
|
|
|
|
var slicer = new D3D.Slicer().setGeometry(geometry);
|
|
|
|
|
//slicer.draw(1, context);
|
|
|
|
|
|
|
|
|
|
/*
|
2015-04-28 18:10:16 +02:00
|
|
|
(function () {
|
|
|
|
|
var slicer = new D3D.Slicer().setGeometry(geometry);
|
|
|
|
|
var slices = slicer.slice(200, 0.2);
|
2015-04-30 18:26:34 +02:00
|
|
|
slices.shift();
|
2015-04-28 18:10:16 +02:00
|
|
|
//var slices = slicer.slice(1, 1);
|
2015-04-24 16:12:48 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
CAL.Scene.setCanvas(document.getElementById("canvas"));
|
2015-04-28 16:08:56 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
//error at layer 0;
|
|
|
|
|
//maybe because of geomety
|
2015-04-30 18:26:34 +02:00
|
|
|
var layer = 0;
|
2015-04-28 16:08:56 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
var shapes = [];
|
2015-04-24 16:12:48 +02:00
|
|
|
|
|
|
|
|
var slice = slices[layer];
|
|
|
|
|
|
2015-04-30 18:26:34 +02:00
|
|
|
//downloadFile("slice.json", JSON.stringify(slice));
|
|
|
|
|
|
2015-04-24 16:12:48 +02:00
|
|
|
for (var i = 0; i < slice.length; i ++) {
|
2015-04-28 16:08:56 +02:00
|
|
|
var shape = new CAL.Shape({shapeColor: false});
|
|
|
|
|
shapes.push(shape);
|
2015-04-24 16:12:48 +02:00
|
|
|
|
2015-04-28 16:08:56 +02:00
|
|
|
for (var j = 0; j < slice[i].length; j ++) {
|
|
|
|
|
var point = slice[i][j];
|
2015-04-30 18:26:34 +02:00
|
|
|
shape.addPoint(new CAL.Vector(point.X, point.Y));
|
2015-04-24 16:12:48 +02:00
|
|
|
}
|
2015-04-28 16:08:56 +02:00
|
|
|
}
|
|
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
for (var i = 0; i < shapes.length; i ++) {
|
|
|
|
|
var shape = shapes[i];
|
2015-04-28 16:08:56 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
shape.draw(CAL.Scene.context);
|
|
|
|
|
CAL.Scene.context.strokeStyle = "#FF0000";
|
2015-04-28 16:08:56 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
for (var j = 0; j < shape.points.length; j ++) {
|
|
|
|
|
var normal = shape.getNormal(j).scale(20);
|
|
|
|
|
var point = shape.points[j];
|
2015-04-28 16:08:56 +02:00
|
|
|
|
2015-04-28 18:10:16 +02:00
|
|
|
normal.draw(CAL.Scene.context, point.x, point.y);
|
|
|
|
|
}
|
2015-04-24 16:12:48 +02:00
|
|
|
}
|
2015-04-28 18:10:16 +02:00
|
|
|
})();
|
2015-04-30 18:26:34 +02:00
|
|
|
*/
|
2015-04-24 16:12:48 +02:00
|
|
|
|
|
|
|
|
(function animate () {
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
|
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
