diff -r d26669bf424e -r 098335a1d510 stlviewer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/stlviewer.js	Tue Apr 04 00:47:22 2017 +0200
@@ -0,0 +1,199 @@
+$( function() {
+    $( "#sortable1 li" ).draggable({
+        helper: "clone",
+        containment:"document"
+        });
+    $( "#sortable2" ).droppable({
+        accept: "#sortable1 li",
+        drop: function( event, ui ) {
+            ui.draggable.clone(false).appendTo($(this));
+            for (i =0; i<10; i++) clear_scene();
+            window.setTimeout(update_scene,500);
+        }
+    });
+    $( "#sortable2" ).sortable({
+        placeholder: "ui-state-highlight",
+        start: clear_scene,
+        stop: function() {
+            for (i =0; i<10; i++) clear_scene();
+            window.setTimeout(update_scene,500)
+        }
+    });
+    $( "#sortable2" ).disableSelection();
+} );
+
+function clear_scene() {
+    scene.children.forEach(function(v){
+        if(v.stlfile === true) {
+            v.material.dispose();
+            v.geometry.dispose();
+            scene.remove(v);
+        }
+        //scene.remove(object);
+    });
+}
+
+function update_scene() {
+    var cylinders = [];
+    $("#sortable2 li").each(function(idx, e){
+        cylinders.push($(e).attr('key'));
+    });
+    if (cylinders.length < 2) return;
+
+    // fetch new objects list
+    $.ajax({
+        url: "#",
+        method: 'post',
+        dataType: 'json',
+        data: {
+            action: 'calculate',
+            cylinders: cylinders
+        },
+        success: function(data) {
+            //console.log(data);
+            // remove all meshes
+            clear_scene();
+            // append the objects with positioning
+            for (i = 0; i<data.objects.length; i++) {
+                var obj = data.objects[i];
+                if (obj[5] == "") {
+                    // spacer
+                    filename = "stl/spacer_" + obj[4][0] + '.stl';
+                } else {
+                    // cylinder
+                    filename = "stl/cylinder_" + obj[5] + '.stl';
+                }
+                position = [data.scale3d * 0.01 * obj[0], 0, 0];
+                loadSTL(filename, null, position);
+            }
+
+        }
+    });
+}
+
+function loadSTL(filename, material, position, rotation, scale) {
+    //console.log(filename, position);
+    var loader = new THREE.STLLoader();
+    loader.load( filename, function ( geometry ) {
+        if (!material)
+            var material = new THREE.MeshPhongMaterial( {
+                color: 0xff5533, specular: 0x111111, shininess: 200 } );
+        var mesh = new THREE.Mesh( geometry, material );
+        mesh["stlfile"] = true;
+        if (!position) mesh.position.set( 0, -0.25, 0 ); else 
+            mesh.position.set( position[0], position[1], position[2] );
+        if (!rotation) mesh.rotation.set( 0, 0, 0 ); else 
+            mesh.rotation.set( rotation[0], rotation[1], rotation[2] );
+        if (!scale) mesh.scale.set( 0.01, 0.01, 0.01 ); else 
+            mesh.scale.set( scale[0], scale[1], scale[2] );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        scene.add( mesh );
+
+    } );
+
+}
+
+function init() {
+    container = document.createElement( 'div' );
+    document.body.appendChild( container );
+
+    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
+    camera.position.set( 0.5, 0.35, 2 );
+
+    cameraTarget = new THREE.Vector3( 0, -0.25, 0 );
+
+    scene = new THREE.Scene();
+    scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
+
+    var controls = new THREE.OrbitControls(camera);
+
+    // Ground
+
+    var plane = new THREE.Mesh(
+        new THREE.PlaneBufferGeometry( 40, 40 ),
+        new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+    );
+    plane.rotation.x = -Math.PI/2;
+    plane.position.y = -0.5;
+    scene.add( plane );
+
+    plane.receiveShadow = true;
+
+    // Lights
+
+    scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+
+    addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+    //addShadowedLight( 0.5, 1, -1, 0xffaa00, 1 );
+    // renderer
+
+    renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setClearColor( scene.fog.color );
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.renderReverseSided = true;
+
+    container.appendChild( renderer.domElement );
+
+    window.addEventListener( 'resize', onWindowResize, false );
+
+}
+
+function addShadowedLight( x, y, z, color, intensity ) {
+
+    var directionalLight = new THREE.DirectionalLight( color, intensity );
+    directionalLight.position.set( x, y, z );
+    scene.add( directionalLight );
+
+    directionalLight.castShadow = true;
+
+    var d = 5;
+    directionalLight.shadow.camera.left = -d;
+    directionalLight.shadow.camera.right = d;
+    directionalLight.shadow.camera.top = d;
+    directionalLight.shadow.camera.bottom = -d;
+
+    directionalLight.shadow.camera.near = 1;
+    directionalLight.shadow.camera.far = 20;
+
+    directionalLight.shadow.mapSize.width = 1024;
+    directionalLight.shadow.mapSize.height = 1024;
+
+    directionalLight.shadow.bias = -0.005;
+
+}
+
+function onWindowResize() {
+
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+function animate() {
+
+    requestAnimationFrame( animate );
+
+    //render();
+    renderer.render( scene, camera );
+    //stats.update();
+
+}
+
+function render() {
+    var timer = Date.now() * 0.0005;
+    camera.position.x = Math.cos( timer ) * 3;
+    camera.position.z = Math.sin( timer ) * 3;
+    camera.lookAt( cameraTarget );
+    renderer.render( scene, camera );
+}
\ No newline at end of file