added 'first steps' tutorial and rubrics for all files in api folder

docs/api/cameras/Camera.rst

@@ -1,7 +1,14 @@
 Camera - Base class for camera types
 ------------------------------------
 
-.. js:class:: Camera()
+.. rubric:: Constructor
+
+.. class:: Camera()
 
     Base class for camera types
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/cameras/OrthographicCamera.rst

@@ -1,7 +1,14 @@
 OrthographicCamera - Camera using an orthographic projection
 ------------------------------------------------------------
 
-.. js:class:: OrthographicCamera()
+.. rubric:: Constructor
+
+.. class:: OrthographicCamera()
 
     Camera using an orthographic projection
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/cameras/PerspectiveCamera.rst

@@ -1,7 +1,14 @@
 PerspectiveCamera - Camera using a perspective projection
 ---------------------------------------------------------
 
-.. js:class:: PerspectiveCamera()
+.. rubric:: Constructor
+
+.. class:: PerspectiveCamera()
 
     Camera using a perspective projection
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Face3.rst

@@ -1,7 +1,14 @@
 Face3 - Three-sided face
 ------------------------
 
-.. js:class:: Face3()
+.. rubric:: Constructor
+
+.. class:: Face3()
 
     Three-sided face
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Face4.rst

@@ -1,7 +1,13 @@
 Face4 - Four-sided face
 -----------------------
 
-.. js:class:: Face4()
+.. rubric:: Constructor
+.. class:: Face4()
 
     Four-sided face
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Geometry.rst

@@ -1,7 +1,14 @@
 Geometry - Base class for geometry types
 ----------------------------------------
 
-.. js:class:: Geometry()
+.. rubric:: Constructor
+
+.. class:: Geometry()
 
     Base class for geometry types
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Matrix3.rst

@@ -1,7 +1,14 @@
 Matrix3 - A 3x3 matrix
 ----------------------
 
-.. js:class:: Matrix3()
+.. rubric:: Constructor
+
+.. class:: Matrix3()
 
     A 3x3 matrix
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Matrix4.rst

@@ -1,7 +1,14 @@
 Matrix4 - A 4x4 Matrix
 ----------------------
 
-.. js:class:: Matrix4()
+.. rubric:: Constructor
+
+.. class:: Matrix4()
 
     A 4x4 Matrix
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Object3D.rst

@@ -1,7 +1,14 @@
 Object3D - Base class for scene graph objects
 ---------------------------------------------
 
-.. js:class:: Object3D()
+.. rubric:: Constructor
+
+.. class:: Object3D()
 
     Base class for scene graph objects
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Projector.rst

@@ -1,7 +1,14 @@
 Projector - Utilities for projecting primitives between spaces
 --------------------------------------------------------------
 
-.. js:class:: Projector()
+.. rubric:: Constructor
+
+.. class:: Projector()
 
     Utilities for projecting primitives between spaces
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Quaternion.rst

@@ -1,7 +1,14 @@
 Quaternion - Implementation of a quaternion
 -------------------------------------------
 
-.. js:class:: Quaternion()
+.. rubric:: Constructor
+
+.. class:: Quaternion()
 
     Implementation of a quaternion
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Ray.rst

@@ -1,7 +1,14 @@
 Ray - Representation of a ray in space
 --------------------------------------
 
-.. js:class:: Ray()
+.. rubric:: Constructor
+
+.. class:: Ray()
 
     Representation of a ray in space
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Rectangle.rst

@@ -1,7 +1,14 @@
 Rectangle - Represents a 2D rectangle
 -------------------------------------
 
-.. js:class:: Rectangle()
+.. rubric:: Constructor
+
+.. class:: Rectangle()
 
     Represents a 2D rectangle
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Spline.rst

@@ -1,7 +1,14 @@
 Spline - Represents a spline
 ----------------------------
 
-.. js:class:: Spline()
+.. rubric:: Constructor
+
+.. class:: Spline()
 
     Represents a spline
-    
+   
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/UV.rst

@@ -1,7 +1,14 @@
 UV - Represents a texture coordinate
 ------------------------------------
 
-.. js:class:: UV()
+.. rubric:: Constructor
+
+.. class:: UV()
 
     Represents a texture coordinate
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Vector2.rst

@@ -1,7 +1,14 @@
 Vector2 - 2D vector
 -------------------
 
-.. js:class:: Vector2()
+.. rubric:: Constructor
+
+.. class:: Vector2()
 
     2D vector
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Vector3.rst

@@ -1,7 +1,14 @@
 Vector3 - 3D vector
 -------------------
 
-.. js:class:: Vector3()
+.. rubric:: Constructor
+
+.. class:: Vector3()
 
     3D vector
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Vector4.rst

@@ -1,7 +1,14 @@
 Vector4 - 4D vector
 -------------------
 
-.. js:class:: Vector4()
+.. rubric:: Constructor
+
+.. class:: Vector4()
 
     4D vector
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/core/Vertex.rst

@@ -1,7 +1,14 @@
 Vertex - Represents a vertex in space
 -------------------------------------
 
-.. js:class:: Vertex()
+.. rubric:: Constructor
+
+.. class:: Vertex()
 
     Represents a vertex in space
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/extras/core/Curve.rst

@@ -1,7 +1,15 @@
 Curve - Extensible curve object
-------------------------
+--------------------------------------
 
-.. js:class:: Curve()
+.. rubric:: Constructor
+
+.. class:: Curve()
 
     Extensible curve object
+
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)
     

docs/api/extras/core/CurvePath.rst

@@ -1,7 +1,14 @@
 CurvePath - Path with connected curves
-------------------------
+-------------------------------------------
 
-.. js:class:: CurvePath()
+.. rubric:: Constructor
+
+.. class:: CurvePath()
 
     A Path made with connected set of curves
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/extras/core/Path.rst

@@ -1,7 +1,14 @@
 Path - A CurvePath with a Drawing API
-------------------------
+-------------------------------------------
 
-.. js:class:: Path()
+.. rubric:: Constructor
+
+.. class:: Path()
 
     A CurvePath with convenience Drawing methods 
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/extras/core/Shape.rst

@@ -1,7 +1,14 @@
 Shape - A closed 2d path with holes
-------------------------
+----------------------------------------
 
-.. js:class:: Shape()
+.. rubric:: Constructor
+
+.. class:: Shape()
 
     A closed 2d Path with holes
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/extras/core/TextPath.rst

@@ -1,7 +1,14 @@
 TextPath - Class for turning Text to Shapes
-------------------------
+----------------------------------------------
 
-.. js:class:: TextPath()
+.. rubric:: Constructor
+
+.. class:: TextPath()
 
     Class for turning Text to Shapes
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/extras/core/index.rst

@@ -1,5 +1,5 @@
 Core Extras
-============
+=============
 
 .. toctree::
     Curve

docs/api/lights/AmbientLight.rst

@@ -1,7 +1,15 @@
 AmbientLight - An ambient light
 -------------------------------
 
+.. rubric:: Constructor
+
 .. class:: AmbientLight()
 
     An ambient light
+
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)
     

docs/api/lights/DirectionalLight.rst

@@ -1,7 +1,14 @@
 DirectionalLight - A directional light
 --------------------------------------
 
+.. rubric:: Constructor
+
 .. class:: DirectionalLight()
 
     A directional light
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/lights/Light.rst

@@ -1,7 +1,14 @@
 Light - Base class for light types
 ----------------------------------
 
+.. rubric:: Constructor
+
 .. class:: Light()
 
     Base class for light types
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/lights/PointLight.rst

@@ -1,7 +1,14 @@
 PointLight - A point light
 --------------------------
 
+.. rubric:: Constructor
+
 .. class:: PointLight()
 
     A point light
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/api/lights/SpotLight.rst

@@ -1,7 +1,14 @@
 SpotLight - A spotlight
 -----------------------
 
+.. rubric:: Constructor
+
 .. class:: SpotLight()
 
     A spotlight
-    
+    
+.. rubric:: Attributes
+
+.. rubric:: Method
+
+.. rubric:: Example(s)

docs/index.rst

@@ -16,7 +16,7 @@ Contents
     :maxdepth: 1
 
     changelog.rst
-    tutorial.rst
+    tutorials/index.rst
 
 API
 ---

docs/tutorial.rst

@@ -1,4 +0,0 @@
-Tutorial
-========
-
-tutorial

docs/tutorials/FirstSteps.rst

@@ -0,0 +1,103 @@
+First Steps
+====================
+
+Three.js scenes are very easy to setup and only require a few lines of code to initialize. Scenes are constructed using a few different types of objects: cameras, lights, and meshes.
+
+The first step in rendering a three.js scene is creating the WebGL renderer object. The following code creates an HTML canvas object 800x400 pixels, adds it to the document's body, and initializes a three.js scene.
+
+::
+
+	var renderer = new THREE.WebGLRenderer();
+	renderer.setSize( 800, 640 );
+	document.body.appendChild( renderer.domElement );
+	
+	var scene = new THREE.Scene();
+
+The second step is to define a camera which the renderer object will use in rendering.
+
+::
+
+	var camera = new THREE.Camera(
+		35,			// Field of view
+		800 / 640,	// Aspect ratio
+		.1,			// Near
+		10000		// Far
+	);
+	camera.position.set( -15, 10, 15 );
+
+The first parameter passed determines how wide the field of view is. The second parameter is the aspect ratio which is calculated by dividing the viewing area's width by its height. The third and fourth parameters specify cut-off points for objects in the camera's view. If an object's distance from the camera does not fall in the range between NEAR and FAR then that object is not rendered. The last line sets the camera's XYZ coordinates to -15, 10, and 15 respectively.
+
+Step three creates a white cube that is 5 units wide, tall and deep, adds the Lambert material, and adds it to the scene.
+
+::
+
+	var cube = new THREE.Mesh(
+		new THREE.CubeGeometry( 5, 5, 5 ),
+		new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
+	);
+	scene.addChild( cube );
+
+For the last step in setting up a scene we create a yellow light source and add it to the scene.
+
+::
+
+	var light = new THREE.PointLight( 0xFFFF00 );
+	light.position.set( 10, 0, 10 );
+	scene.addLight( light );
+
+Finally we render the scene which displays our scene through the camera's eye.
+
+::
+
+	renderer.render(scene, camera);
+
+Everything together in a working example with a minimal HTML template:
+
+::
+	
+	<!DOCTYPE html>
+	
+	<html>
+	
+	<head>
+		<title>Getting Started with Three.js</title>
+		
+		<script type="text/javascript" src="Three.js"></script>
+		<script type="text/javascript">
+		window.onload = function() {
+			
+				var renderer = new THREE.WebGLRenderer();
+				renderer.setSize( 800, 400 );
+				document.body.appendChild( renderer.domElement );
+				
+				var scene = new THREE.Scene();
+				
+				var camera = new THREE.Camera(
+					35,		// Field of view
+					800 / 400,	// Aspect ratio
+					.1,		// Near
+					10000		// Far
+				);
+				camera.position.set( -15, 10, 15 );
+				
+				var cube = new THREE.Mesh(
+					new THREE.CubeGeometry( 5, 5, 5 ),
+					new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
+				);
+				scene.addChild( cube );
+				
+				var light = new THREE.PointLight( 0xFFFF00 );
+				light.position.set( 10, 0, 10 );
+				scene.addLight( light );
+				
+				renderer.render(scene, camera);
+				
+		};
+		</script>
+	</head>
+	
+	<body></body>
+	
+	</html>
+
+That's how simple and easy three.js makes WebGL. Only 20 lines of Javascript to initialize and render a scene.

docs/tutorials/index.rst

@@ -0,0 +1,4 @@
+Tutorials
+===============
+.. toctree::
+    FirstSteps