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="TrackballControl.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 () {

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

        var nextX = 0;
        var nextY = 0;
        var nextZ = 0;
        for (var i = 1; i <= 3; i++) {
            var construction = getConstruction();
            construction = moveConstruction(construction, nextX, nextY, nextZ)
            construction.rotateY(degToRad(30*i));
            scene.add(construction);
            nextX = -(nextX + 2 + Math.cos(-degToRad(30) * i));
            nextY = nextY + 2 + Math.sin(-degToRad(30) * i);

        }

        // construction = getConstruction();
        // construction.rotation.y = -30 * (Math.PI/180);
        // construction.position.z = 0.7;
        // construction.position.x = -0.4
        // construction.position.y = 2
        // scene.add(construction);

        // 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.5,0.5,3);
        var cylinder = new THREE.Mesh(cylinderGeometry, cubeMaterial);

        cylinder.position.y=2;
        cylinder.castShadow=true;

        // add the sphere to the scene


        var cylinderGeometry2 = new THREE.CylinderGeometry(0.6,0.6,1);
        var cylinder2 = new THREE.Mesh(cylinderGeometry2, cubeMaterial);

        cylinder2.position.y=3;
        cylinder2.castShadow=true;

        // add the sphere to the scene
        bigCylinder.add(cylinder);
        bigCylinder.add(cylinder2);
        return bigCylinder;
    }

    function getConstruction() {
        var cubeGeometry = new THREE.CubeGeometry(4,0.5,2);
        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=3;
        cube.position.z=0.6;

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

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

        // construction.add(cube);
        construction.add(bigCylinder);
        construction.add(connectingPlate);

        return construction;
    }

    function moveConstruction(obj, x, y, z) {
        obj.position.x = x;
        obj.position.y = y;
        obj.position.z = z;
        return obj;
    }

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

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