var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xeeeeee, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        var webglContainer = document.getElementById('webgl-container');
        webglContainer.appendChild(renderer.domElement);



         // window resize handler
        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            render();
        }

        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        var grid = new THREE.GridHelper(40, 1);

         // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = -0.05;
        plane.position.z = 0;
        scene.add(plane);

         // ---- 3D CONTENT CREATION -----------------------------------------------------

        var mechParts = [];


        function loadMech()
        {

            loadMechPart('torso');
            loadMechPart('head');
            loadMechPart('base');
            loadMechPart('arm');
            loadMechPart('leg');

            console.log(mechParts['torso']);

        }





        function loadMechPart(part)
        {
            var geo;
            var mat;

            var loader = new THREE.OBJLoader();
            geo = loader.load('assets/'+part+'.obj', function (geometry, materials ) {

            mat = new THREE.MeshLambertMaterial({ color: 0xa65e00 });

            geometry.traverse( function(child) {
                if (child instanceof THREE.Mesh) {
                    // apply custom material
                    child.material = mat;
                }
            });

            geometry.name = part;
            geometry.position.x  = 0;
            geometry.position.y  = 0;
            geometry.position.z  = 0;

            geometry.scale.set(1, 1, 1);
            scene.add(geometry);
            console.log(geometry);
            mechParts[part] = geometry;


        });

        }



        loadMech();

         // ---- END OF 3D CONTENT CREATION ---------------------------------------------

         // position and point the camera to the center of the scene

        function initCamera()
        {
            camera.position.x = 4.5;
            camera.position.y = 10;
            camera.position.z = 17;
            camera.rotation.x = -0.1;
            camera.rotation.y = 0.52;
            camera.rotation.z = 0.05;

        }

        initCamera();


         // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x222222);
        scene.add(ambientLight);

         // add spotlight
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-80, 70, 90);
        scene.add(spotLight);

         // add GUI control elements
        var guiControls = new function () {
            this.showAxes = true;
            this.showGrid = false;
            this.showPlane = true;
            this.asWireframes = false;
            this.animated = true;
            this.withShadow = false;
            this.withFog = false;
        }

        var gui = new dat.GUI({
            autoPlace: false
        });
        var guiContainer = document.getElementById('gui-container');
        guiContainer.appendChild(gui.domElement);
        gui.add(guiControls, 'showAxes').onChange(function (e) {
            showAxes = e;
            if (showAxes) {
                scene.add(axes);
            } else {
                scene.remove(axes);
            }
            render();
        });
        gui.add(guiControls, 'showGrid').onChange(function (e) {
            showGrid = e;
            if (showGrid) {
                scene.add(grid);
            } else {
                scene.remove(grid);
            }
            render();
        });
        gui.add(guiControls, 'showPlane').onChange(function (e) {
            showPlane = e;
            if (showPlane) {
                scene.add(plane);
            } else {
                scene.remove(plane);
            }
            render();
        });
        gui.add(guiControls, 'asWireframes').onChange(function (e) {
            asWireframes = e;
            // TODO: for all material.wireframe = asWireframes;
            mat.wireframe = asWireframes;
            render();
        });
        gui.open();

         // init and call render function
        function render() {
            renderer.render(scene, camera);
            /*
            console.log("camera.position.x: ", camera.position.x);
            console.log("camera.position.y: ", camera.position.y);
            console.log("camera.position.z: ", camera.position.z);
            console.log("camera.rotation.x: ", camera.rotation.x);
            console.log("camera.rotation.y: ", camera.rotation.y);
            console.log("camera.rotation.z: ", camera.rotation.z);
            */
        }
        initAnim(true);
        initShadow(false);
        initFog(false);
        render();
        setShadow(false);
        setFog(false);
        animate();

         // animate the 3D objects
        function initAnim(value) {
            if (value) {
                gui.add(guiControls, 'animated').onChange(function (e) {
                    animated = e;
                    if (animated) animate();
                });
            }
        }

        var step = 0;
        var scalingStep = 0;

        function animate() {
            if (guiControls.animated) {
                // DO ANIMATING 3D ELEMENTS

                // request re-rendering
                requestAnimationFrame(animate);
            }
            render();
        }

         // shadow cast on plane
        function initShadow(value) {
            // SET receiveShadow AND castShadow FLAGS OF 3D ELEMENTS WITH SHADOW
            plane.receiveShadow = value;
            spotLight.castShadow = value;
            renderer.shadowMapEnabled = value;
            if (value) {
                gui.add(guiControls, 'withShadow').onChange(function (e) {
                    withShadow = e;
                    setShadow(withShadow);
                });
            }
        }

        function setShadow(value) {
            if (value) {
                renderer.shadowMapAutoUpdate = true;
            } else {
                renderer.shadowMapAutoUpdate = false;
                renderer.clearTarget(spotLight.shadowMap);
            }
            render();
        }

         // fog
        var fog;

        function initFog(value) {
            if (value) {
                fog = new THREE.Fog(0xeeeeee, 0.0000001, 150);
                scene.fog = fog;
                gui.add(guiControls, 'withFog').onChange(function (e) {
                    withFog = e;
                    setFog(withFog);
                });
            }
        }

        function setFog(value) {
            if (!fog) return;
            if (value) {
                fog.near = 0.000000001;
                fog.far = 150;
            } else {
                fog.near = 8000;
                fog.far = 8000;
            }
            render();
        }