Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Introduction to Computer Graphics</title>
    <script src="js/three.js"></script>
	<script src="js/THREEx.KeyboardState.js"></script>
    <script>
	/**
	 * This sample demonstrates how to use Three.js to create a simple, interactive graphical scene.
	 * Some of the code has been adapted from the Three.js documentation and from Lee Stemkoski's Three.js "tutorials by example".
	 */
	function UpdatePosition(asteroid){
	asteroid.myMesh.position.x+=asteroid.velocity.x;
	asteroid.myMesh.position.y+=asteroid.velocity.y;
	asteroid.myMesh.position.z+=asteroid.velocity.z;
	}
	function BounceBox(asteroid){
	if(asteroid.myMesh.position.x>6 || asteroid.myMesh.position.x<-6){
			asteroid.velocity.x=asteroid.velocity.x*-1;
			}
			if(asteroid.myMesh.position.y>4 || asteroid.myMesh.position.y<-4){
			asteroid.velocity.y=asteroid.velocity.y*-1;
			}
			if(asteroid.myMesh.position.z>-16 || asteroid.myMesh.position.z<-40){
			asteroid.velocity.z=asteroid.velocity.z*-1;
			}
	}
	function Collision(position1,position2,r){
	//calculate the distancew the objects are appart and compare it to the distance their surfaces would be appart if they were only just touching
	if((((positiopn1.x-position2.x)^2+(position1.y-position2.y)^2+(position1.z-position2.z)^2)^0.5) <= r){
	return true;
	}else{
	return false;
	}
	}
    window.onload = function() {
		//define world
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth-10,  window.innerHeight);
        document.body.appendChild( renderer.domElement );
        var scene = new THREE.Scene();
		//setup camera
        var camera = new THREE.PerspectiveCamera(
            35,             // Field of view
            800 / 600,      // Aspect ratio
            0.1,            // Near plane
            10000           // Far plane
        );
        camera.position.set( 0, 0, 5 );
        camera.lookAt( scene.position );
		var keyboard = new THREEx.KeyboardState();
		renderer.setClearColorHex( 0x000000, 1 );
		//setup lighting conditions
		var light = new THREE.PointLight( 0xFFFFFF );
        light.position.set( 0, 0, 0 );
		scene.add(light);
		var light1 = new THREE.PointLight( 0xFFFFFF );
        light1.position.set( 0, 0, -49 );
		scene.add(light1);
		var light2 = new THREE.PointLight( 0xFFFFFF );
        light2.position.set( 0, 0, 49 );
		scene.add(light2);
		//render backimages
		//milky way
		var MwayGeometry = new THREE.PlaneGeometry(35,25,1,1);
		var MwayTexture = new THREE.ImageUtils.loadTexture( 'images/milkyway.jpg' );
		var MwayMaterial = new THREE.MeshLambertMaterial( { map:MwayTexture } );
		myMway = new THREE.Mesh( MwayGeometry,MwayMaterial );
		myMway.position.set(0,0,-50);
		scene.add(myMway);
		//asteroid
		var asteroid = new Object();
		asteroid.velocity = new Object();
		asteroid.velocity.x =0.1;
		asteroid.velocity.y =0.1;
		asteroid.velocity.z =0.1;
		var sphereGeometry = new THREE.IcosahedronGeometry(1,-2);
		var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
		var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
		var cubeMaterial = new THREE.MeshLambertMaterial( { map:crateTexture } );
		asteroid.myMesh = new THREE.Mesh( sphereGeometry,cubeMaterial );
		asteroid.myMesh.position.set(-1,1,-20);
		scene.add(asteroid.myMesh);
		//make spacecraft
		var cubeGeometry = new THREE.CubeGeometry(1,1,1);
		var myObject =  new THREE.Mesh( cubeGeometry,cubeMaterial );
		myObject.position.set(0,0,-5);

		scene.add(myObject);
		function update() {
			//move asteroids
			asteroid.myMesh.rotation.x+= 0.05;
			asteroid.myMesh.rotation.y+= 0.05;
			asteroid.myMesh.rotation.z+= 0.05;
			//move the asteroid about
			UpdatePosition(asteroid);
			BounceBox(asteroid);
			//move spacecraft
			//MOVEMENT CONTROLLS
			if(keyboard.pressed("left")){
			myObject.position.y+=0.1;
			}else if(keyboard.pressed("right")){
			myObject.position.y-=0.1;
			}else if(keyboard.pressed("G")){
			myObject.position.x-=0.1;
			}else if(keyboard.pressed("J")){
			myObject.position.x+=0.1;
			}else if(keyboard.pressed("T")){
			myObject.position.z-=0.1;
			}else if(keyboard.pressed("U")){
			myObject.position.z+=0.1;
			}
			//ROTATION CONTROLLS
			if(keyboard.pressed("W")){
			myObject.rotation.x+=0.05;
			}else if(keyboard.pressed("S")){
			myObject.rotation.x-=0.05;
			}else if(keyboard.pressed("A")){
			myObject.rotation.y-=0.05;
			}else if(keyboard.pressed("D")){
			myObject.rotation.y+=0.05;
			}else if(keyboard.pressed("Q")){
			myObject.rotation.z-=0.05;
			}else if(keyboard.pressed("E")){
			myObject.rotation.z+=0.05;
			}
			//CAMERA MOVEMENT
			if(keyboard.pressed("up")){
			camera.position.y+=0.1;
			}else if(keyboard.pressed("down")){
			camera.position.y-=0.1;
			}else if(keyboard.pressed("left")){
			camera.position.x-=0.1;
			}else if(keyboard.pressed("right")){
			camera.position.x+=0.1;
			}else if(keyboard.pressed("Z")){
			camera.position.z-=0.1;
			}else if(keyboard.pressed("X")){
			camera.position.z+=0.1;
			}
			camera.lookAt( myObject.position);
		}

		//Render Loop
		function render() {
			//Call the update function
			update();
			//Re-draw the scene
			renderer.render(scene, camera);
			//Re-call the render function when the next frame is ready to be drawn
			requestAnimationFrame(render);
		}
		requestAnimationFrame(render);

    };
    </script>
</head>
<body>

</body>
</html>