default/stlviewer.js

$( 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",
        forcePlaceholderSize: true,
        connectWith: '#sortable1',
        start: clear_scene,
        stop: function() {
            for (i =0; i<10; i++) clear_scene();
            window.setTimeout(update_scene,500);
        }
    });
    c = $("<li key='10'>").html("Steel, 10ℓ");
    $( "#sortable2" )
        .disableSelection()
        .append(c.clone())
        .append(c.clone());

    $("#clearselected").click(function(){
        $( "#sortable2 li" ).remove();
        for (i =0; i<10; i++) clear_scene();
    });
    update_scene();

    $(".listcontainer")
        .mouseout(function() {controls.enabled = true})
        .mouseover(function() {controls.enabled = false});

    $("#image2d").click(function() {
        var img = $("#image2d").clone();
        //img.css('width', '100%');
        img.css('margin', '0 auto');
        $("<div>")
            .append(img)
            .dialog({
                modal: true,
                draggable: false,
                resizable: false,
                title: "2D Layout view",
                height: window.innerHeight,
                width: window.innerWidth,
                buttons: {
                    Close: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
    });
} );

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();
            var content = "<h2>Material:</h2><ul>";
            var weight = 0.0;
            var length = 0;
            var volume = 0;
            // append the objects with positioning
            for (i = 0; i<data.objects.length; i++) {
                var obj = data.objects[i];
                content += "<li>";
                if (obj[5] == "") {
                    // spacer
                    filename = "stl/spacer_" + obj[4][0] + '.stl';
                    material = 'm_spacer';
                    content += "Spacer: " + obj[4][0] + " (" + obj[4][1] + "mm)"
                } else {
                    // cylinder
                    filename = "stl/cylinder_" + obj[5] + '.stl';
                    material = 'm_cylinder';
                    content += "Cylinder: " + obj[4][4] + " (" + obj[4][0] + "mm)"
                    weight += obj[4][3];
                    volume += obj[4][2];
                    if (obj[4][1] > length) length = obj[4][1];
                }
                position = [data.scale3d * 0.01 * (obj[0] - data.offset), 0, 0];
                loadSTL(filename, material + "", position);
                content += "</li>"
            }

            content += "</ul><br/>Total cylinder weight: " + Math.ceil(weight) + " kg<br/>";
            content += "Total cylinder volume: " + Math.floor(volume) + " ℓ<br/>";
            content += "Max cylinder length: " + Math.ceil(length / 10) + " cm<br/>" 

            $("#infocontainer").html(content);

            $("#image2d").attr('src', 'data:image/png;base64,' + data.image);

        }
    });
}

function loadSTL(filename, material, position, rotation, scale) {
    //console.log(filename, position);
    var loader = new THREE.STLLoader();
    loader.load( filename, function ( geometry ) {
        if (material == 'm_spacer') material = m_spacer;
            else if (material == 'm_cylinder') material = m_cylinder;

        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.getElementById( 'rendercontainer' );
    //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 );

    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 = false;

    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 );
}