ModelViewer = function() {
    var container;
    var camera, scene, cameraTarget, renderer, controls, object;
    var width, height;

    this.init = function(containerId) {
        container = document.getElementById(containerId);

        if (document.defaultView && document.defaultView.getComputedStyle) {
            width  = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('width'));
            height = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('height'));
        } else {
            width  = parseFloat(container.currentStyle.width);
            height = parseFloat(container.currentStyle.height);
        }


        camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
        camera.position.set(-2, 2, 0.8);
        camera.lookAt(new THREE.Vector3(0, 3, 0));

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x000000, 0.001);


        var grid = new THREE.GridHelper( 30, 70 );
        grid.position.set(30/70,-0.5,30/70);
        scene.add( grid );

        // Lights

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 1, 1, 1 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0x002288 );
        light.position.set( -1, -1, -1 );
        scene.add( light );


        scene.add( new THREE.AmbientLight( 0xf0f0f0 ));
        scene.background = new THREE.Color( 0x000000 );

        // renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor( scene.fog.color );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( width, height );
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.renderReverseSided = false;

        container.appendChild(renderer.domElement);

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', this.render ); // add this only if there is no animation loop (requestAnimationFrame)
        // controls.enableDamping = true;
        // controls.dampingFactor = 0.25;
        controls.enableZoom = true;

    };

    this.loadStl = function(model) {
        var loader = new THREE.STLLoader();
        loader.load(model, function (geometry) {
            var material = new THREE.MeshPhongMaterial({color: 0xaaaaaa, shininess:200,  specular: 0x333333, shading: THREE.FlatShading});

            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(0, 0.5, 0);
            mesh.rotation.set(Math.PI, 0, 0);
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            scene.add(mesh);

            renderer.render(scene, camera);
        });
    };

    this.animate = function() {

        requestAnimationFrame( this.animate );

        controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

        this.render();
    };

    this.render = function() {
        renderer.render(scene, camera);
    };
};