Untitled

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.03 - Materials and light</title>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <script type="text/javascript" src="stats.js"></script>
    <script type="text/javascript" src="dat.gui.js"></script>
    <script type="text/javascript" src="TrackballControls.js"></script>

    <style>
        body{
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var controls = new function() {
            this.stairRotation = 15;
        };
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60,20);
        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;

        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15
        plane.position.y=0
        plane.position.z=0

        // add the plane to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -15;
        camera.position.y = 2;
        camera.position.z = 0;
        scene.position.x = -100
        scene.position.y = 100;

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        spotLight.castShadow = true;
        scene.add( spotLight );

        spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 1, 10, 100 );
        spotLight.castShadow = true;
        scene.add( spotLight );

        var nextX = 0;
        var nextY = 0;
        var nextZ = -0.8;
        var steps = 10;
        var rotation = 180/steps;
        var stairConstruction = new THREE.Object3D();
        for (var i = 0; i <= steps; i++) {
            var construction = getConstruction();
            var param = -0.7;
            nextX = nextX + param * Math.sin((degToRad(rotation)) * (i-1));
            nextY = nextY + param * Math.cos((degToRad(rotation)) * (i-1));
            console.log(nextY);

            construction.position.x = nextX;
            construction.position.y = nextZ;
            construction.position.z = nextY;
            construction.rotation.y = degToRad(rotation*i);
            stairConstruction.add(construction);
            nextZ = nextZ + 0.5;
        }

        stairConstruction.position.z =1.5;
        scene.add(stairConstruction);

        // track-ball camera controls
        var controls = new THREE.TrackballControls(camera);

        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        // render the scene
        render();

        function render() {
            renderer.render( scene, camera );
            requestAnimationFrame( render );
            controls.update();
        }
    });

    function getCylinder() {
        var bigCylinder = new THREE.Object3D();
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x323334});

        var cylinderGeometry = new THREE.CylinderGeometry(0.1,0.1,0.4);
        var cylinder = new THREE.Mesh(cylinderGeometry, cubeMaterial);

        cylinder.position.y=1.2;
        cylinder.position.z = 0.35;
        cylinder.castShadow=true;

        // add the sphere to the scene
        var cylinderGeometry2 = new THREE.CylinderGeometry(0.2,0.2,0.2);
        var cylinder2 = new THREE.Mesh(cylinderGeometry2, cubeMaterial);

        cylinder2.position.y = 0.9;
        cylinder2.position.z = 1;
        cylinder2.castShadow=true;
        bigCylinder.add(cylinder2);
        bigCylinder.add(cylinder);
        return bigCylinder;
    }

    function getConstruction() {
        var cubeGeometry = new THREE.CubeGeometry(1.5,0.1,0.75);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffa54f});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // position the cube
        cube.position.x=0;
        cube.position.y=1.1;
        cube.position.z=0;

        var bigCylinder = getCylinder();
        bigCylinder.position.z = -1;

        var connectingPlateGeo = new THREE.CubeGeometry(0.4, 0.1, 1);
        var connectingPlate = new THREE.Mesh(connectingPlateGeo, new THREE.MeshLambertMaterial({color: 0x323334}) )
        connectingPlate.position.z = -0.25;
        connectingPlate.position.y = 1;
        connectingPlate.castShadow = true;
        var construction = new THREE.Object3D();

        construction.add(cube);
        construction.add(bigCylinder);
        construction.add(connectingPlate);
        construction.add(new THREE.AxisHelper(5));

        return construction;
    }


    function degToRad(deg) {
        return Math.PI/180 * deg;
    }

</script>
</body>
</html>