Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement