<!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='three.js-master/examples/js/loaders/STLLoader.js'></script> <script src="library/clipper.js"></script> <script src="src/utils.js"></script> <script src="src/box.js"></script> <script src="src/printer.js"></script> <script src="src/paths.js"></script> <script src="src/gcode.js"></script> <script src="src/slicer.js"></script> <script src="src/slice.js"></script> <style> canvas {border: 1px solid black;} </style> </head> <body> <canvas id="3d-preview" height="400" width="400"></canvas> <canvas id="canvas" width="400" height="400"></canvas> <script> var USER_SETTINGS, PRINTER_SETTINGS, doodleBox, gcode; function init () { "use strict"; var scene = createScene(); var localIp = location.hash.substring(1); //doodleBox = new D3D.Box(localIp); var printer = new D3D.Printer().updateConfig(USER_SETTINGS).updateConfig(PRINTER_SETTINGS["ultimaker"]); var loader = new THREE.STLLoader(); loader.load('models/pokemon/pikachu.stl', function (geometry) { //var geometry = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1); //var geometry = new THREE.SphereGeometry(10, 20, 10); //var geometry = new THREE.TorusGeometry(20, 10, 30, 30); /* var geometry = (function () { "use strict"; var circle = new THREE.Shape(); circle.absarc(0, 0, 10, 0, Math.PI*2, false); var hole = new THREE.Path(); hole.absarc(0, 0, 5, 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: 10, bevelEnabled: false, steps: 1 }); geometry.applyMatrix(matrix); return geometry; })(); */ var material = new THREE.MeshPhongMaterial({color: 0x00ff00, wireframe: false}); var mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = -Math.PI/2; mesh.scale.x = mesh.scale.y = mesh.scale.z = 1; mesh.position.x = 60; mesh.position.z = 60; mesh.updateMatrix(); scene.add(mesh); var slicer = new D3D.Slicer().setMesh(mesh.geometry, mesh.matrix); //var canvas = document.getElementById("canvas"); //var context = canvas.getContext("2d"); //var img = slicer.drawPaths(printer, 0, 1); //context.drawImage(img, 0, 0); gcode = slicer.getGCode(printer); }); } function createScene () { var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({canvas: document.getElementById("3d-preview"), antialias: true}); renderer.setClearColor(0xffffff, 1); var camera = new THREE.PerspectiveCamera(75, renderer.domElement.width/renderer.domElement.height, 1, 10000); scene.add(camera); var light = new THREE.AmbientLight(0x404040); scene.add(light); var directionalLight = new THREE.PointLight(0xffffff, 0.5); camera.add(directionalLight); applyMouseControls(renderer, camera, new THREE.Vector3(100, 0, 100), 1000); function applyMouseControls (renderer, camera, center, maxDistance) { var distance = 20; var rotX = 0; var rotY = 0; var moveCamera = false; function updateCamera () { camera.position.set( Math.cos(rotY)*Math.sin(rotX)*distance, Math.sin(rotY)*distance, Math.cos(rotY)*Math.cos(rotX)*distance ).add(center); camera.lookAt(center); } $(renderer.domElement).on("mousedown", function (e) { moveCamera = true; }).on("wheel", function (e) { var event = e.originalEvent; event.preventDefault(); distance = THREE.Math.clamp(distance - event.wheelDelta, 1, maxDistance); updateCamera(); }); $(window).on("mouseup", function (e) { moveCamera = false; }).on("mousemove", function (e) { var event = e.originalEvent; if (moveCamera === true) { rotX = (rotX - event.webkitMovementX/100) % (2*Math.PI); rotY = THREE.Math.clamp(rotY + event.webkitMovementY/100, -Math.PI/2, Math.PI/2); updateCamera(); } }); updateCamera(); } (function animate () { requestAnimationFrame(animate); renderer.render(scene, camera); })(); return scene; } //loadSettings; (function () { 'use strict'; var loadedItems = 0; function loaded () { loadedItems ++; if (loadedItems === 2) { init(); } } $.ajax({ url: 'settings/user_settings.json', dataType: 'json', success: function (response) { USER_SETTINGS = response; loaded(); } }); $.ajax({ url: 'settings/printer_settings.json', dataType: 'json', success: function (response) { PRINTER_SETTINGS = response; loaded(); } }); })(); </script> </body> </html>