<!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> <script src="script/utils.js"></script> <script src="script/box.js"></script> <script src="script/printer.js"></script> <script src="script/slicer.js"></script> <script src="gcode/testgcode.js"></script> <script src="gcode/easterbunny.js"></script> </head> <body> <canvas id="3d-preview" height="480" width="720"></canvas> <canvas id="canvas" width="200" height="200"></canvas> <script> var localIp = location.hash.substring(1); var doodleBox = new D3D.Box(localIp); doodleBox.onload = function () { "use strict"; var gcode = slicer.getGcode(doodleBox.printer); var print = $(document.createElement("button")).text("Print").on("click", function () { doodleBox.print(gcode); }); var stop = $(document.createElement("button")).text("Stop").on("click", function () { doodleBox.stop(); }); $("body").append(print, stop); }; 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); var material = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}); var geometry = new THREE.TorusGeometry(20, 10, 20, 20); //var geometry = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1); //var geometry = new THREE.SphereGeometry(5, 32, 32); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); var slicer = new D3D.Slicer(geometry); /*var slices = slicer.slice(20, 0.2); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); for (var layer = 0; layer < slices.length; layer ++) { var slice = slices[layer]; for (var i = 0; i < slice.length; i ++) { var shape = slice[i]; context.beginPath(); for (var j = 0; j < shape.length; j ++) { var point = shape[(j % shape.length)]; context.lineTo((point.x-100) * 3 + 100, (point.y-100) * 3 + 100); } context.closePath(); context.strokeStyle = "rgb(" + Math.round(Math.random()*255) + ", " + Math.round(Math.random()*255) + ", " + Math.round(Math.random()*255) + ")"; context.stroke(); } }*/ (function animate () { requestAnimationFrame(animate); renderer.render(scene, camera); })(); </script> </body> </html>