mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-05 06:03:24 +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
145 lines
3.3 KiB
HTML
145 lines
3.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<script src="library/jquery.js"></script>
|
|
<script src="library/three.js"></script>
|
|
<script src="library/stl_loader.js"></script>
|
|
|
|
<script src="src/utils.js"></script>
|
|
<script src="src/box.js"></script>
|
|
<script src="src/slicerworker.js"></script>
|
|
|
|
<title>Doedel Drie Dee || Webworker Test</title>
|
|
<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, slicerWorker;
|
|
|
|
|
|
function init () {
|
|
"use strict";
|
|
var scene = createScene();
|
|
|
|
var localIp = location.hash.substring(1);
|
|
doodleBox = new D3D.Box(localIp);
|
|
|
|
var slicer = new D3D.SlicerWorker();
|
|
|
|
slicer.setSettings(USER_SETTINGS, PRINTER_SETTINGS["ultimaker"]);
|
|
|
|
var loader = new THREE.STLLoader();
|
|
loader.load("models/pokemon/pikachu.stl", function (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);
|
|
|
|
slicer.setMesh(mesh);
|
|
slicer.slice();
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
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> |