claudiulodro/index.html

## index.html
<html>
	<head>
		<style>
			/* Make the render take up the entire screen. */
			canvas { width: 100%; height: 100% }
		</style>
		<script src="three.js"></script>
	</head>
	<body>
		<script>
			/**
			 * We're using a perspective camera.
      			 * This makes far things look smaller and close ones bigger.
      			 * Param 1: The field of view of the camera.
     			 * Param 2: The aspect ratio.
     			 * Param 3: Minimum distance from camera to render.
      			 * Param 4: Maximum distance from camera to render.
			 */
			var camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
			camera.position.z = 20; // Position the camera at 0, 0, 20.

			/**
      			 * Standard scene and renderer.
      			 */
     			 var scene = new THREE.Scene();
			 var renderer = new THREE.WebGLRenderer();
			 renderer.setSize( window.innerWidth, window.innerHeight );

     			 /**
      			  * Add the renderer to the DOM.
      			  * This creates a canvas that will have the rendered content.
      			  */
			document.body.appendChild( renderer.domElement );

			/**
       			 * ConeGeometry defines the shape of the cone.
			 * Param 1: Radius.
      			 * Param 2: Height.
      			 * Param 3: Number of radius segments.
      			 * Param 4: Number of height segments.
      			 */
      			var cone_geometry = new THREE.ConeGeometry( 5, 15, 50, 20 );

			/**
      			 * The mesh defines the cone's covering.
      			 * MeshBasicMaterial does not interact with light.
      			 */
			var cone_mesh = new THREE.MeshPhongMaterial({color:0xff0000});

			/**
      			 * Create the mesh and add it to the scene.
      			 */
			var cone = new THREE.Mesh( cone_geometry, cone_mesh );
      			scene.add( cone );

			/**
			 * Add the light.
			 * DirectionalLight is a light that goes in one direction.
			 * Set the position and rotation to get it pointed how you want.
      			 * Param 1: Light color.
      			 * Param 2: Light intensity.
      			 */
			var light = new THREE.DirectionalLight( 0x4444FF, 5 );
			light.position.x = 10;
			light.position.z = 20;
			scene.add( light );

			/**
			 * Rotate the cone if any key is held down.
			 * rotate() should go in the animate() function.
			 */
			var key_is_down = false;
			function rotate() {
				if ( key_is_down ) {
					cone.rotation.y += .1;
					cone.rotation.z += .1;
				}
			}
			document.addEventListener( 'keydown', function(){
				key_is_down = true;
			});
			document.addEventListener( 'keyup', function(){
				key_is_down = false;
			});

			/**
			 * Start and run the render loop.
			 */
			function animate() {
				requestAnimationFrame( animate );
				rotate();
				renderer.render( scene, camera );
			}
			animate();
		</script>
	</body>
</html>
	<html>
	<head>
	<style>
	/* Make the render take up the entire screen. */
	canvas { width: 100%; height: 100% }
	</style>
	<script src="three.js"></script>
	</head>
	<body>
	<script>
	/**
	* We're using a perspective camera.
	* This makes far things look smaller and close ones bigger.
	* Param 1: The field of view of the camera.
	* Param 2: The aspect ratio.
	* Param 3: Minimum distance from camera to render.
	* Param 4: Maximum distance from camera to render.
	*/
	var camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
	camera.position.z = 20; // Position the camera at 0, 0, 20.

	/**
	* Standard scene and renderer.
	*/
	var scene = new THREE.Scene();
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );

	/**
	* Add the renderer to the DOM.
	* This creates a canvas that will have the rendered content.
	*/
	document.body.appendChild( renderer.domElement );

	/**
	* ConeGeometry defines the shape of the cone.
	* Param 1: Radius.
	* Param 2: Height.
	* Param 3: Number of radius segments.
	* Param 4: Number of height segments.
	*/
	var cone_geometry = new THREE.ConeGeometry( 5, 15, 50, 20 );

	/**
	* The mesh defines the cone's covering.
	* MeshBasicMaterial does not interact with light.
	*/
	var cone_mesh = new THREE.MeshPhongMaterial({color:0xff0000});

	/**
	* Create the mesh and add it to the scene.
	*/
	var cone = new THREE.Mesh( cone_geometry, cone_mesh );
	scene.add( cone );

	/**
	* Add the light.
	* DirectionalLight is a light that goes in one direction.
	* Set the position and rotation to get it pointed how you want.
	* Param 1: Light color.
	* Param 2: Light intensity.
	*/
	var light = new THREE.DirectionalLight( 0x4444FF, 5 );
	light.position.x = 10;
	light.position.z = 20;
	scene.add( light );

	/**
	* Rotate the cone if any key is held down.
	* rotate() should go in the animate() function.
	*/
	var key_is_down = false;
	function rotate() {
	if ( key_is_down ) {
	cone.rotation.y += .1;
	cone.rotation.z += .1;
	}
	}
	document.addEventListener( 'keydown', function(){
	key_is_down = true;
	});
	document.addEventListener( 'keyup', function(){
	key_is_down = false;
	});

	/**
	* Start and run the render loop.
	*/
	function animate() {
	requestAnimationFrame( animate );
	rotate();
	renderer.render( scene, camera );
	}
	animate();
	</script>
	</body>
	</html>