mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-22 13:37:58 +01:00
e75db6d5bd
created web worker implementation added class D3D.SlicerWorker converts geometry to bufferGeometry sends bufferGeometry to worker in worker bufferGeometry gets converted back to geometry
182 lines
4.5 KiB
HTML
182 lines
4.5 KiB
HTML
<!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="library/stl_loader.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/slicer.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 = 100;
|
|
mesh.position.z = 100;
|
|
|
|
//scene.add(mesh);
|
|
|
|
mesh.updateMatrix();
|
|
var slicer = new D3D.Slicer().setMesh(mesh.geometry, mesh.matrix);
|
|
|
|
var mesh = new THREE.Mesh(slicer.geometry, material);
|
|
scene.add(mesh);
|
|
|
|
//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 () {
|
|
var loadedItems = 0;
|
|
function loaded () {
|
|
loadedItems ++;
|
|
if (loadedItems === 2) {
|
|
init();
|
|
}
|
|
}
|
|
|
|
loadSettings("settings/user_settings.json", function (data) {
|
|
USER_SETTINGS = data;
|
|
loaded();
|
|
});
|
|
loadSettings("settings/printer_settings.json", function (data) {
|
|
PRINTER_SETTINGS = data;
|
|
loaded();
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |