Untitled

<!DOCTYPE html>
<html>

    <head>
        <title>Robot Scene</title>
        <script type="text/javascript" src="../libs/three.js"></script>
        <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="../libs/stats.js"></script>
        <script type="text/javascript" src="../libs/dat.gui.js"></script>
        <script type="text/javascript" src="../libs/keypress.js"></script>
        <style>
            body{
                /* set margin to 0 and overflow to hidden, to go fullscreen */
                margin: 0;
                overflow: hidden;
            }

            #robotFacing-output
            {
                font-size: 18px;
               color: rgb(57, 252, 253);
               line-height: 48px;
               background-color: rgb(5,2,26);
               display: block;
               vertical-align: middle;
               width: 135px;
               font-family: helvetica;
               left: 80px;
               position: fixed;
            }


        </style>
    </head>
    <body>

        <div id="Stats-output">
        </div>
        <div id="robotFacing-output">
            Robot facing: N
        </div>
        <!-- WebGL Output goes here -->
        <div id="WebGL-output">
        </div>

        <!-- 3D Computer Graphics Robot Scene -->
        <script type="text/javascript">
            // Variable to store the 3D robot
            var robotGroup;

            // Array of and current direction robot can face in
            var directions = ['N','E','S','W'];
            var currentDirection = 0;

            //Variables to control strobe speed
            var counter = 0;
            var strobeSpeed = 5;

            //Variable to make camera accesible
            var camera;
            var focalLength = 35;

            $(function() {

                // Introduction message
                alert('Welcome to Rave Robot! \n - W,A,S,D to move around \n - F to focus camera on robot \n - Up/Down to zoom camera \n Have fun!');

                var stats = initStats();

                // 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.
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1500);

                // create a render and set the size
                var renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xEEEEEE, 1.0);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMapEnabled = true;

                //Creating the location texture cube for realistic surroundings
                var textureCube = createCubeMap("space");
                var shader = THREE.ShaderLib[ "cube" ];
                shader.uniforms[ "tCube" ].value = textureCube;
                var material = new THREE.ShaderMaterial({
                    fragmentShader: shader.fragmentShader,
                    vertexShader: shader.vertexShader,
                    uniforms: shader.uniforms,
                    depthWrite: false,
                    side: THREE.BackSide
                });

                material.reflectivity = 5;
                material.recieveShadow = true;

                var cubeMesh = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), material);
                scene.add(cubeMesh);


                //Creating material that shines
                var shinyMaterial = new THREE.MeshPhongMaterial({});
                shinyMaterial.envMap = textureCube;

                // create a cube
                var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
                var cube = new THREE.Mesh(cubeGeometry, shinyMaterial);
                cube.castShadow = true;

                // position the cube
                cube.position.x = -8;
                cube.position.y = 3;

                // add the cube to the scene
                scene.add(cube);
                //Creating shiny sphere and adding to the scene
                var shinySphere = new THREE.Mesh(new THREE.SphereGeometry(10, 15, 15), shinyMaterial);
                shinySphere.rotation.y = -0.5;
                shinySphere.position.x = 50;
                shinySphere.position.y = 12;
                shinySphere.castShadow = true;
                scene.add(shinySphere);

                //Creating group to hold all the robots componenets
                robotGroup = new THREE.Object3D();
                robotGroup.position.x = 10;
                scene.add(robotGroup);

                //Creating material to be used for robot
                var robotBlackMaterial = new THREE.MeshLambertMaterial({color: 0x000000});
                var robotYellowMaterial = new THREE.MeshLambertMaterial({color: 0xFAF139});

                //Creating geometry to be used for robot
                var robotGeometry = new THREE.CubeGeometry(1,1,1);
                var robotLegGeometry = new THREE.CylinderGeometry(1,1,10);
                var robotKneckGeometry = new THREE.CylinderGeometry(1,1,3);
                var robotArmGeometry = new THREE.CylinderGeometry(1,1,4);
                var robotForearmGeometry = new THREE.CylinderGeometry(1,1,6);
                var robotElbowGeometry = new THREE.SphereGeometry(1.3);
                var robotHandGeometry = new THREE.SphereGeometry(2);
                var robotGreyMaterial = new THREE.MeshPhongMaterial({});
                    robotGreyMaterial.envMap = textureCube;

                 //Creating robot feet
                 var robotFeet = [];

                 for(var i = 0; i < 2; i++)
                 {
                     robotFeet[i] = new THREE.Mesh(robotGeometry, robotBlackMaterial);
                     robotFeet[i].castShadow = true;
                     robotFeet[i].scale.set(4,1,8);

                    if(i === 0)
                    {
                        robotFeet[i].position.x = 5;
                        robotFeet[i].position.y = 1;
                    }
                    if(i === 1)
                    {
                        robotFeet[i].position.x = 15;
                        robotFeet[i].position.y = 1;
                    }
                    robotGroup.add(robotFeet[i]);
                 }

                   //Creating robot legs
                 var robotLegs = [];

                 for(var i = 0; i < 2; i++)
                 {
                     robotLegs[i] = new THREE.Mesh(robotLegGeometry, robotGreyMaterial);
                     robotLegs[i].castShadow = true;
                     robotLegs[i].position.z = 2;
                     robotLegs[i].position.y = 6;
                    if(i === 0)
                    {
                        robotLegs[i].position.x = 5;
                    }
                    if(i === 1)
                    {
                        robotLegs[i].position.x = 15;
                    }

                    robotGroup.add(robotLegs[i]);
                 }

                 //Creating the robot body and adding to robot group
                 var robotBody = new THREE.Mesh(robotGeometry, robotBlackMaterial);
                 robotBody.scale.set(13,15,3);
                 robotBody.castShadow = true;
                 robotBody.position.x = 10;
                 robotBody.position.y = 18;
                 robotBody.position.z = 2;

                 robotGroup.add(robotBody);

                 //Creating the robots kneck and adding to robot group
                 var robotKneck = new THREE.Mesh(robotKneckGeometry, robotGreyMaterial);
                 robotKneck.castShadow = true;
                 robotKneck.position.x = 10;
                 robotKneck.position.z = 2;
                 robotKneck.position.y = 26;

                 robotGroup.add(robotKneck);

                 //Creating the robots arms
                 var robotArms = [];
                 var robotForearms = [];
                 var robotElbows = [];
                 var robotHands = [];

                 // Creating orbit groups for the rave animation
                 var leftArmRotationGroup = new THREE.Object3D();
                 leftArmRotationGroup.position.y = 23;
                 leftArmRotationGroup.position.z = 2;
                 leftArmRotationGroup.position.x = -0.5;
                 robotGroup.add(leftArmRotationGroup);

                 var rightArmRotationGroup = new THREE.Object3D();
                 rightArmRotationGroup.position.y = 23;
                 rightArmRotationGroup.position.z = 2;
                 rightArmRotationGroup.position.x = 20.5;
                 robotGroup.add(rightArmRotationGroup);

                 // Creating the robots arms
                 for(var i = 0; i < 2; i++)
                 {
                     robotArms[i] = new THREE.Mesh(robotArmGeometry, robotGreyMaterial);
                     robotForearms[i] = new THREE.Mesh(robotForearmGeometry, robotGreyMaterial);
                     robotElbows[i] = new THREE.Mesh(robotElbowGeometry, robotGreyMaterial);
                     robotHands[i] = new THREE.Mesh(robotHandGeometry, robotBlackMaterial);
                     robotArms[i].rotation.z =  -0.5 * Math.PI;
                     robotArms[i].position.y = 23;
                     robotForearms[i].position.y = -3.5;
                     robotElbows[i].position.y = 23;
                     robotHands[i].position.y = -8;
                     robotArms[i].position.z = 2;
                     robotElbows[i].position.z = 2;

                     if(i === 0)
                     {
                         robotArms[i].position.x = 2;
                         robotElbows[i].position.x = -0.5;
                         leftArmRotationGroup.add(robotForearms[i]);
                         leftArmRotationGroup.add(robotHands[i]);
                     }
                     if(i === 1)
                     {
                        robotArms[i].position.x = 18;
                        robotElbows[i].position.x = 20.5;
                        rightArmRotationGroup.add(robotForearms[i]);
                        rightArmRotationGroup.add(robotHands[i]);
                     }

                     robotGroup.add(robotArms[i]);
                     robotGroup.add(robotElbows[i]);
                 }

                 //Creating rotate group for the head for rave animation
                 var robotHeadRotateGroup = new THREE.Object3D();
                 robotHeadRotateGroup.position.x = 10;
                 robotHeadRotateGroup.position.y = 31;
                 robotHeadRotateGroup.position.z = 2;
                 robotGroup.add(robotHeadRotateGroup);

                 var robotHead = new THREE.Mesh(robotGeometry,robotBlackMaterial);

                 robotHead.castShadow = true;
                 robotHead.scale.set(8,8,3);

                 robotHeadRotateGroup.add(robotHead);

                 // Creating a group to hold facial features
                 var robotFace = new THREE.Object3D();

                 var robotFaceBase = new THREE.Mesh(robotGeometry, robotYellowMaterial);
                 robotFaceBase.scale.set(7,7,1);
                 robotFaceBase.position.z = -1.5;
                 robotFace.add(robotFaceBase);

                 var robotMouth = new THREE.Mesh(robotGeometry, robotBlackMaterial);
                 robotMouth.scale.set(5,1,1);
                 robotMouth.position.y = -2;
                 robotMouth.position.z = -1.9;
                 robotFace.add(robotMouth);

                 var robotEyes = [];

                 for(var i=0; i < 2; i++)
                 {
                     robotEyes[i] = new THREE.Mesh(robotGeometry, robotBlackMaterial);
                     robotEyes[i].scale.set(2,2,1);
                     robotEyes[i].position.y = 1;
                     robotEyes[i].position.z = -1.9;

                     if(i === 0)
                     {
                        robotEyes[i].position.x = -1.5;
                     }
                     if(i === 1)
                     {
                         robotEyes[i].position.x = 1.5;
                     }

                     robotFace.add(robotEyes[i]);
                 }

                 robotHeadRotateGroup.add(robotFace);

                 //Creating the robots chest panel
                 var robotChest = new THREE.Object3D();

                 var robotChestPanel = new THREE.Mesh(robotGeometry, robotYellowMaterial);
                 robotChestPanel.scale.set(12,14,1);
                 robotChestPanel.position.x = 10;
                 robotChestPanel.position.y = 18;
                 robotChestPanel.position.z = 0.5;
                 robotChest.add(robotChestPanel);

                 robotGroup.add(robotChest);


                // position and point the camera to the center of the scene
                camera.position.x = 40;
                camera.position.y = 80;
                camera.position.z = -60;
                camera.lookAt(robotHead.position);

                // *** LIGHTING ***

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

                // Light for the rave animation
                var robotLight = new THREE.SpotLight(0xffffff);
                robotLight.position.set(20,50,-20);
                robotLight.castShadow = true;
                robotLight.intensity = 0;

                robotGroup.add(robotLight);

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

                // add spotlight to light robot face
                var spotLightFace = new THREE.SpotLight(0xffffff);
                spotLightFace.position.set(80,50,-60);
                spotLightFace.castShadow = true;
                spotLightFace.intensity = 1;
                scene.add(spotLightFace);

                // Light orbiting the ball and sphere
                var lightColor = "#e80d5a";
                var light = new THREE.SpotLight(lightColor);
                light.position.x = 120;
                light.position.y = 30;
                light.position.z = 20;
                light.castShadow = true;
                light.shadowCameraNear = 2;
                light.shadowCameraFar = 200;
                light.shadowCameraFov = 130;
                light.distance = 100;
                light.intensity = 3;
                scene.add(light);

                //Rotation group for light
                var lightRotationGroup = new THREE.Object3D();
                lightRotationGroup.position.y = 30;
                lightRotationGroup.position.x = 10;
                lightRotationGroup.add(light);
                scene.add(lightRotationGroup);


                // add a small sphere simulating the light
                var sphereLight = new THREE.SphereGeometry(0.2);
                var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});
                var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
                sphereLightMesh.position = light.position;
                scene.add(sphereLightMesh);

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

                // Setting the variables to be controlled using the GUI
                var controls = new function() {
                    this.rotationSpeed = 0.02;
                    this.lightColor = lightColor;
                    this.intensity = light.intensity;
                    this.robotSpeed = 1,
                    this.rave = false;
                    this.spotlight = true;
                    this.robotLight = false;
                };

                // Creating a GUI controls panel, and settings controls
                var gui = new dat.GUI();
                gui.add(controls, 'rotationSpeed', 0, 0.5);

                gui.addColor(controls, 'lightColor').onChange(function(e) {
                    light.color = new THREE.Color(e);
                });

                gui.add(controls, 'intensity', 0, 5).onChange(function(e) {
                    light.intensity = e;
                });

                gui.add(controls, 'robotSpeed', 1, 5);

                gui.add(controls, "spotlight").listen();

                gui.add(controls, 'robotLight').listen();

                gui.add(controls, "rave");

                // call the render function
                var clock = new THREE.Clock();
                var angle = 0;
                var lightAngle = 0;


            render();

                // Gets called multiple times a second to provide scene animation
                function render() {

                    stats.update();
                    // rotate the cube around its axes
                    cube.rotation.x += controls.rotationSpeed;
                    cube.rotation.y += controls.rotationSpeed;
                    cube.rotation.z += controls.rotationSpeed;

                    // rotate the cube around its axes
                    shinySphere.rotation.x += controls.rotationSpeed;
                    shinySphere.rotation.y += controls.rotationSpeed;
                    shinySphere.rotation.z += controls.rotationSpeed;

                    if(controls.rave)
                    {
                        controls.spotlight = false;
                        controls.robotLight = true;

                        counter++;
                        leftArmRotationGroup.rotation.x += controls.rotationSpeed;
                        rightArmRotationGroup.rotation.x -= controls.rotationSpeed;
                        robotHeadRotateGroup.rotation.y += controls.rotationSpeed;

                        if(counter >= strobeSpeed)
                        {
                           light.color = new THREE.Color(randomColour());
                           robotLight.color = new THREE.Color(randomColour());
                           counter = 0;
                        }


                         light.intensity = 5;
                         controls.rotationSpeed = 0.1;
                    }

                    if(controls.spotlight)
                    {
                        spotLightFace.intensity = 1;
                    }
                    else
                    {
                         spotLightFace.intensity = 0;
                    }

                    if(controls.robotLight)
                    {
                        robotLight.intensity = 3;
                    }
                    else
                    {
                         robotLight.intensity = 0;
                    }

                     // move the light
                    lightAngle += 0.01;
                    light.position.x = 20 +(10 * (Math.sin(lightAngle)));
                    light.position.z = (10 * (Math.cos(lightAngle)));
                    lightRotationGroup.position = light.position;

                    var delta = clock.getDelta();

                    // render using requestAnimationFrame
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                }

                function initStats() {

                    var stats = new Stats();

                    stats.setMode(0); // 0: fps, 1: ms

                    // Align top-left
                    stats.domElement.style.position = 'absolute';
                    stats.domElement.style.left = '0px';
                    stats.domElement.style.top = '0px';

                    $("#Stats-output").append(stats.domElement);

                    return stats;


                }

                // Keyboard interactions
                //
                //
                // Moves the robot backward in whatever direction it facing
                var keypress = new window.keypress.Listener();

                keypress.simple_combo("s", function() {

                    var facing = directions[currentDirection];

                    // Switch to determine how to animate robot based on direction facing
                    switch(facing)
                    {

                        case 'N':
                             robotGroup.position.z += controls.robotSpeed;
                        break;

                        case 'E':
                              robotGroup.position.x += controls.robotSpeed;
                            break;

                        case 'S':
                              robotGroup.position.z -= controls.robotSpeed;
                            break

                        case 'W':
                              robotGroup.position.x -= controls.robotSpeed;
                            break;

                        default:
                            robotGroup.position.z += controls.robotSpeed;
                            break;

                    }

                });

                // Moves the robot forward in whatever direction it facing
                keypress.simple_combo("w", function() {

                    var facing = directions[currentDirection];

                    // Switch to determine how to animate robot based on direction facing
                    switch(facing)
                    {

                        case 'N':
                             robotGroup.position.z -= controls.robotSpeed;
                        break;

                        case 'E':
                              robotGroup.position.x -= controls.robotSpeed;
                            break;

                        case 'S':
                              robotGroup.position.z += controls.robotSpeed;
                            break

                        case 'W':
                              robotGroup.position.x += controls.robotSpeed;
                            break;

                        default:
                            robotGroup.position.z -= controls.robotSpeed;
                            break;

                    }


                });
                 // A press fires rotation to the left of 1/4 radian to ensure robot always remains on axis z, x
                keypress.simple_combo("a", function() {

                    robotGroup.rotation.y += 1.57;
                    // Incremenet the current direction variable, if higher than array length, loop
                    currentDirection++;

                    if(currentDirection > directions.length-1)
                    {
                        currentDirection = directions.length - directions.length;
                    }

                     var facing = directions[currentDirection];
                     $('#robotFacing-output').text('Robot facing: ' + facing);

                });
                 // D press fires rotation to the right of 1/4 radian to ensure robot always remains on axis z, x
                keypress.simple_combo("d", function() {

                    robotGroup.rotation.y -= 1.57;

                    // Incremenet the current direction variable, if higher than array length, loop
                    currentDirection = currentDirection-1;

                    if(currentDirection < directions.length-directions.length)
                    {
                        currentDirection = directions.length - 1;
                    }

                     var facing = directions[currentDirection];
                     $('#robotFacing-output').text('Robot facing: ' + facing);

                });
                 // Q press fires rotation to the left of 1/4 radian to ensure robot always remains on axis z, x
                keypress.simple_combo("q", function() {

                    robotGroup.rotation.y += 1.57;
                    // Incremenet the current direction variable, if higher than array length, loop
                    currentDirection++;

                    if(currentDirection > directions.length-1)
                    {
                        currentDirection = directions.length - directions.length;
                    }

                     var facing = directions[currentDirection];
                     $('#robotFacing-output').text('Robot facing: ' + facing);

                });

                 // E press fires rotation to the right of 1/4 radian to ensure robot always remains on axis z, x
                keypress.simple_combo("e", function() {

                    robotGroup.rotation.y -= 1.57;

                    // Incremenet the current direction variable, if higher than array length, loop
                    currentDirection = currentDirection-1;

                    if(currentDirection < directions.length-directions.length)
                    {
                        currentDirection = directions.length - 1;
                    }

                     var facing = directions[currentDirection];
                     $('#robotFacing-output').text('Robot facing: ' + facing);

                });


                  // zoom the camera up
                keypress.simple_combo("up", function() {

                    focalLength++;

                    camera.setLens(focalLength);
                    camera.updateProjectionMatrix();

                });

                   // zoom the camera out
                keypress.simple_combo("down", function() {

                    focalLength = focalLength - 1;

                    camera.setLens(focalLength);
                    camera.updateProjectionMatrix();

                });

                   // zoom the camera out
                keypress.simple_combo("f", function() {

                    var vector = robotGroup.position;

                    camera.lookAt(vector);

                });

                // creats 3D environement cube map
                 function createCubeMap(name) {

                    var path = "../assets/textures/cubemap/" + name + "/";
                    var format = '.jpg';
                    var urls = [
                        path + 'posx' + format, path + 'negx' + format,
                        path + 'posy' + format, path + 'negy' + format,
                        path + 'posz' + format, path + 'negz' + format
                    ];

                    var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
                    return textureCube;
                }

                // Gets a random hexidecimal colour
                function randomColour()
                {
                    return "#" + Math.random().toString(16).slice(2, 8);


                }


            });

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