Scene Objects
Creating the scene</b>
To actually be able to display anything with Three.js, we need three things:
1- A scene,
2- A camera, and 
3- A renderer so we can render the scene with the camera.	



Object3D ->
Scene
Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.
Constructor
Scene()
Create a new scene object.
Properties
#
.fog
A fog instance defining the type of fog that affects everything rendered in the scene. Default is null.
#
.overrideMaterial
If not null, it will force everything in the scene to be rendered with that material. Default is null.
#
.autoUpdate
Default is true. If set, then the renderer checks every frame if the scene and its objects needs matrix updates. When it isn't, then you have to maintain all matrices in the scene yourself.
Methods
Source
src/scenes/Scene.js

Fog
This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.
Constructor
Fog( hex, near, far )
The hex parameter is passed to the Color constructor to set the color property. Hex can be a hexadecimal integer or a CSS-style string.
Properties
#
.name
Default is the empty string.
#
.color
Fog color. Example: If set to black, far away objects will be rendered black.
#
.near
The minimum distance to start applying fog. Objects that are less than 'near' units from the active camera won't be affected by fog.
Default is 1.
#
.far
The maximum distance at which fog stops being calculated and applied. Objects that are more than 'far' units away from the active camera won't be affected by fog.
Default is 1000.
Methods
#
.clone ()
Returns a copy of this.
Source
src/scenes/Fog.js

FogExp2
This class contains the parameters that define exponential fog, i.e., that grows exponentially denser with the distance.
Constructor
FogExp2( hex, density)
The hex parameter is passed to the Color constructor to set the color property. Hex can be a hexadecimal integer or a CSS-style string.
Properties
#
.name
Default is the empty string.
#
.color
Fog color. Example: If set to black, far away objects will be rendered black.
#
.density
Defines how fast the fog will grow dense.
Default is 0.00025.
Methods
#
.clone ()
Returns a copy of this.
Source
src/scenes/FogExp2.js


<script>
 
 	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera( 75, 
		window.innerWidth / window.innerHeight, 0.1, 1000 );
		
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth /2, window.innerHeight/2 );
	document.body.appendChild( renderer.domElement );	
		
</script>

We have now set up the scene, our camera and the renderer.		

Camera
There are a few different cameras in Three.js but we used, for now, a PerspectiveCamera. 	
In the PerspectiveCamera() method: 
The first attribute is the field of view. 
The second one is the aspect ratio. The width of the element divided by the height, or  the image looks squished.
The next two attributes are the near and far clipping plane. What that means, is that objects further away from the camera than the value of far or closer than near won't be rendered. 

renderer
Next up is the renderer. This is where the magic happens. 
In addition to the WebGLRenderer we use here, Three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.
In addition to creating the renderer instance, we also need to set the size 
at which we want it to render our app. It's a good idea to use the width and height of the area we want to fill with our game - in this case, the width and height of the browser window. 
For performance intensive games, you can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2, for half the resolution. This does not mean that the game will only fill half the window, but rather look a bit blurry and scaled up.
Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.			

Time now to add objects: 
<script>
	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );
		
	camera.position.z = 5;
</script>

To create a cube, we need:
1- Geometry: BoxGeometry an object that contains all the points (vertices) and fill (faces) of the cube. We'll explore this more in the future. In addition to the geometry, we need a:

2- Material to color it. Three.js comes with several materials, but we'll stick to the MeshBasicMaterial for now. All materials take an object of properties which will be applied to them. To keep things very simple, we only supply a color attribute of 0x00ff00, which is green. This works the same way that colors work in CSS or Photoshop(hex colors). The third thing we need: 

3- Mesh an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.

By default, when we call scene.add( cube ), the thing we add will be added to the coordinates (0,0,0). 
At the coordinates (0,0,0) both the camera and the cube are inside each other. To avoid this, we simply move the camera out a bit.

Rendering the scene
If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. 

This is because we're not actually rendering anything yet. For that, we need what's called a render loop.

<script>
       function render() {
           requestAnimationFrame( render );
           renderer.render( scene, camera );
       }
 	render();
</script>
		
This will create a loop that causes the renderer to draw the scene 60 times per second.
If you're new to writing games in the browser, you might say "why don't we just create a setInterval?  The thing is - we could, but requestAnimationFrame has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.	

Animating the cube
If you insert all the code above, you should see a green box. Let's make it all a little more interesting by rotating it. Add the following right above the renderer.render( scene, camera ) call in your render function:

<script>
	function render() {
		requestAnimationFrame( render );
		cube.rotation.x += 0.1;
		cube.rotation.y += 0.1;
		renderer.render( scene, camera );
			
	}
	render();

</script>

This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the game / app is running has to go through the render loop. 

You can of course call other functions from there, so that you don't end up with a render function that's hundreds of lines. </p>		


Congratulations! You have now completed your first Three.js application. It's simple, you have to start somewhere.

The full code is available in the right. Play around with it to get a better understanding of how it works.

The result the application is running on the top right.