Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #10441 from looeee/gh-pages

Added pages from Wiki to gh-pages manual branch
Mr.doob 8 years ago
parent
1dcfb71457 1a079b2ade
commit
ba1df58a90
13 changed files with 922 additions and 10 deletions
Split View Show Diff Stats
  1. 14 1
      docs/list.js
  2. 256 0
      docs/manual/buildTools/Testing-with-NPM.html
  3. 22 0
      docs/manual/introduction/Code-style-guide.html
  4. 8 8
      docs/manual/introduction/Creating-a-scene.html
  5. 53 0
      docs/manual/introduction/Creating-text.html
  6. 32 0
      docs/manual/introduction/Detecting-WebGL-and-browser-compatibility.html
  7. 57 0
      docs/manual/introduction/Drawing-lines.html
  8. 51 0
      docs/manual/introduction/FAQ.html
  9. 114 0
      docs/manual/introduction/How-to-run-thing-locally.html
  10. 135 0
      docs/manual/introduction/How-to-update-things.html
  11. 1 1
      docs/manual/introduction/Matrix-transformations.html
  12. 20 0
      docs/manual/introduction/Migration-guide.html
  13. 159 0
      docs/manual/introduction/Useful-links.html

+ 14 - 1
docs/list.js
View File 

@@ -3,7 +3,20 @@ var list = {
 
 	"Manual": {
 
 		"Introduction": [
 
 			[ "Creating a scene", "manual/introduction/Creating-a-scene" ],
 
-			[ "Matrix transformations", "manual/introduction/Matrix-transformations" ]
 
+			[ "Detecting WebGL and browser compatibility", "manual/introduction/Detecting-WebGL-and-browser-compatibility" ],
 
+			[ "Matrix transformations", "manual/introduction/Matrix-transformations" ],
 
+			[ "How to update things", "manual/introduction/How-to-update-things" ],
 
+			[ "Useful links", "manual/introduction/Useful-links" ],
 
+			[ "Drawing Lines", "manual/introduction/Drawing-lines" ],
 
+			[ "Creating Text", "manual/introduction/Creating-text" ],
 
+			[ "Code Style Guide", "manual/introduction/Code-style-guide" ],
 
+			[ "Migration Guide", "manual/introduction/Migration-guide" ],
 
+			[ "How to run things locally", "manual/introduction/How-to-run-thing-locally" ],
 
+			[ "FAQ", "manual/introduction/FAQ" ]
 
+		],
 
+
 
+		"Build Tools": [
 
+			[ "Testing with NPM", "manual/buildTools/Testing-with-NPM" ]
 
 		]
 
 	},

+ 256 - 0
docs/manual/buildTools/Testing-with-NPM.html
View File 

@@ -0,0 +1,256 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+		<div class="desc">
 
+			This article shows how to get three.js into a [link:https://nodejs.org/en/ node.js] environment so that you
 
+			can execute automated tests. Tests can be run on the command line, or by automated
 
+			CI tools like [link:https://travis-ci.org/ Travis].
 
+		</div>
 
+
 
+		<h2>The short version</h2>
 
+
 
+		<div>
 
+			If you're comfortable with node and npm,
 
+			<code>
 
+				$ npm install three --save-dev
 
+			</code>
 
+			and add
 
+		<code>
 
+			var THREE = require('three');
 
+		</code>
 
+			to your test.
 
+		</div>
 
+
 
+		<h2>Create a testable project from scratch</h2>
 
+		<div>
 
+			If you're not familiar with these tools, here's a quick guide (for linux, the installation process
 
+			will be slightly different using windows, but the NPM commands are identical).
 
+		</div>
 
+
 
+		<h3>Basic setup</h3>
 
+		<div>
 
+			<ol>
 
+				<li>
 
+					Install [link:https://www.npmjs.org/ npm] and nodejs. The shortest path typically looks something like
 
+					<code>
 
+$ sudo apt-get install -y npm nodejs-legacy
 
+# fix any problems with SSL in the default registry URL
 
+$ npm config set registry http://registry.npmjs.org/
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Make a new project directory
 
+					<code>
 
+						 $ mkdir test-example; cd test-example
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Ask npm to create a new project file for you:
 
+					<code>
 
+					 $ npm init
 
+					</code>
 
+					 and accept all defaults by hitting Enter on all the prompts.
 
+					 This will create package.json.
 
+				</li><br />
 
+
 
+				<li>
 
+					Try and start the test feature with
 
+					<code>
 
+$ npm test
 
+					</code>
 
+					This will fail, which is expected.
 
+					If you look in the package.json, the definition of the test script is
 
+					<code>
 
+						"test": "echo \"Error: no test specified\" && exit 1"
 
+					</code>
 
+				</li>
 
+
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Add mocha</h2>
 
+		<div>
 
+			We're going to use [link:https://mochajs.org/ mocha].
 
+
 
+			<ol>
 
+				<li>
 
+					Install mocha with
 
+					<code>
 
+$ npm install mocha --save-dev
 
+					</code>
 
+					Notice that node_modules/ is created and your dependencies appear in there.
 
+				  Also notice that your package.json has been updated: the property devDependencies
 
+					is added and updated by the use of --save-dev.
 
+				</li><br />
 
+
 
+				<li>
 
+					Edit package.json to use mocha for testing. When test is invoked, we just want to run
 
+					mocha and specify a verbose reporter. By default this will run anything in test/
 
+					(not having directory test/ can run into npm ERR!, create it by mkdir test)
 
+					<code>
 
+						"test": "mocha --reporter list"
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Rerun the test with
 
+					<code>
 
+						$ npm test.
 
+					</code>
 
+
 
+					This should now succeed, reporting 0 passing (1ms)
 
+				 	or similar.
 
+				</li>
 
+
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Add three.js</h2>
 
+		<div>
 
+			<ol>
 
+				<li>
 
+					Let's pull in our three.js dependency with
 
+					<code>
 
+$ npm install three --save-dev
 
+					</code>
 
+					<ul>
 
+						<li>
 
+							If you need a different three version, use
 
+							<code>
 
+								$ npm show three versions
 
+							</code>
 
+						  to see
 
+							what's available. To tell npm the right one, use
 
+							<code>
 
+ $ npm install [email protected] --save
 
+							</code>
 
+							(0.84.0 in this example). --save makes this a dependency of this project, rather than
 
+							dev dependency. See the docs [link:https://www.npmjs.org/doc/json.html here] for more info.
 
+						</li>
 
+					</ul>
 
+				</li>
 
+
 
+				<li>
 
+					Mocha will look for tests in test/, so let's
 
+					<code>
 
+					$ mkdir test.
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Finally we actually need a JS test to run. Let's add a simple test that will verify that
 
+					the three.js object is available and working. Create test/verify-three.js containing:
 
+<code>
 
+var THREE = require('three');
 
+var assert = require("assert");
 
+
 
+describe('The THREE object', function() {
 
+  it('should have a defined BasicShadowMap constant', function() {
 
+    assert.notEqual('undefined', THREE.BasicShadowMap);
 
+  }),
 
+
 
+  it('should be able to construct a Vector3 with default of x=0', function() {
 
+    var vec3 = new THREE.Vector3();
 
+    assert.equal(0, vec3.x);
 
+  })
 
+})
 
+</code>
 
+				</li>
 
+
 
+				<li>
 
+				Finally let's test again with $ npm test. This should run the tests above and succeed,
 
+				showing something like:
 
+				<code>
 
+The THREE object should have a defined BasicShadowMap constant: 0ms
 
+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
 
+2 passing (8ms)
 
+				</code>
 
+				</li>
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Add your own code</h2>
 
+		<div>
 
+			You need to do three things:
 
+
 
+			<ol>
 
+				<li>
 
+					Write a test for the expected behaviour of your code, and place it under test/.
 
+					[linkk:https://github.com/air/encounter/blob/master/test/Physics-test.js Here] is an example from a real project.
 
+				</li>
 
+
 
+				<li>
 
+					Export your functional code in such a way that nodejs can see it, for use in conjunction with require.
 
+					See it [link:https://github.com/air/encounter/blob/master/js/Physics.js here].
 
+				</li>
 
+
 
+				<li>
 
+					Require your code into the test file, in the same way we did a require('three') in the example above.
 
+				</li>
 
+			</ol>
 
+
 
+			Items 2 and 3 will vary depending on how you manage your code. In the example of Physics.js
 
+		  given above, the export part is right at the end. We assign an object to module.exports:
 
+			<code>
 
+//=============================================================================
 
+// make available in nodejs
 
+//=============================================================================
 
+if (typeof exports !== 'undefined')
 
+{
 
+  module.exports = Physics;
 
+}
 
+			</code>
 
+		</div>
 
+
 
+		<h2>Dealing with dependencies</h2>
 
+		<div>
 
+			<p>
 
+				If you're already using something clever like require.js or browserify, skip this part.
 
+			</p>
 
+			<p>
 
+				Typically a three.js project is going to run in the browser. Module loading is hence done by
 
+				the browser executing a bunch of script tags. Your individual files don't have to worry
 
+				about dependencies. In a nodejs context however, there is no index.html binding everything
 
+				together, so you have to be explicit.
 
+			</p>
 
+			<p>
 
+				If you're exporting a module that depends on other files, you're going to have to tell node to load them.
 
+				Here is one approach:
 
+			</p>
 
+			<ol>
 
+				<li>
 
+					At the start of your module, check to see if you're in a nodejs environment.
 
+				</li>
 
+				<li>
 
+					If so, explicitly declare your dependencies.
 
+				</li>
 
+				<li>
 
+					If not, you're probably in a browser so you don't need to do anything else.
 
+				</li>
 
+			</ol>
 
+			Example code from Physics.js:
 
+			<code>
 
+//=============================================================================
 
+// setup for server-side testing
 
+//=============================================================================
 
+if (typeof require === 'function') // test for nodejs environment
 
+{
 
+  var THREE = require('three');
 
+  var MY3 = require('./MY3.js');
 
+}
 
+			</code>
 
+		</div>
 
+
 
+	</body>
 
+</html>

+ 22 - 0
docs/manual/introduction/Code-style-guide.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</a></h1>
 
+
 
+		<div class="desc">
 
+			All code and examples in three.js are written using Mr.doob's Code Style.
 
+			Of course you are free to use whatever style you prefer for your own work, but
 
+			if you are adding code to the library or examples then you must follow this guide.<br /><br />
 
+
 
+			You can find details
 
+			<a href="https://github.com/mrdoob/three.js/wiki/Mr.doob%27s-Code-Style%E2%84%A2">here</a>.
 
+		</div>
 
+	</body>
 
+</html>

+ 8 - 8
docs/manual/introduction/Creating-a-scene.html
View File 

@@ -10,18 +10,18 @@
 
 	<body>
 
 		<h1>[name]</h1><br />
 
 
-		<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
 
+		<div>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
 
 
 		<h2>Before we start</h2>
 
 
-		<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
 
+		<div>Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
 
 
 		<code>
 
 		&lt;!DOCTYPE html&gt;
 
 		&lt;html&gt;
 
 			&lt;head&gt;
 
 				&lt;meta charset=utf-8&gt;
 
-				&lt;title&gt;My first Three.js app&lt;/title&gt;
 
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 
 				&lt;style&gt;
 
 					body { margin: 0; }
 
 					canvas { width: 100%; height: 100% }
 
@@ -40,7 +40,7 @@
 
 
 		<h2>Creating the scene</h2>
 
 
-		<div>To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
 
+		<div>To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
 
 
 		<code>
 
 		var scene = new THREE.Scene();
 
@@ -51,13 +51,13 @@
 
 		document.body.appendChild( renderer.domElement );
 
 		</code>
 
 
-		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
 
+		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
 
 
 		<div>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</div>
 
 
 		<div>The next two attributes are the <strong>near</strong> and <strong>far</strong> clipping plane. What that means, is that objects further away from the camera than the value of <strong>far</strong> or closer than <strong>near</strong> won't be rendered. You don't have to worry about this now, but you may want to use other values in your apps to get better performance.</div>
 
 
-		<div>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.</div>
 
+		<div>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.</div>
 
 
 		<div>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 app - in this case, the width and height of the browser window. For performance intensive apps, you can also give <strong>setSize</strong> smaller values, like <strong>window.innerWidth/2</strong> and <strong>window.innerHeight/2</strong>, which will make the app render at half size.</div>
 
 
@@ -113,14 +113,14 @@
 
 		</div>
 
 
 		<h2>The result</h2>
 
-		<div>Congratulations! You have now completed your first Three.js application. It's simple, you have to start somewhere.</div>
 
+		<div>Congratulations! You have now completed your first three.js application. It's simple, you have to start somewhere.</div>
 
 
 		<div>The full code is available below. Play around with it to get a better understanding of how it works.</div>
 
 
 		<code>
 
 		&lt;html&gt;
 
 			&lt;head&gt;
 
-				&lt;title&gt;My first Three.js app&lt;/title&gt;
 
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 
 				&lt;style&gt;
 
 					body { margin: 0; }
 
 					canvas { width: 100%; height: 100% }

+ 53 - 0
docs/manual/introduction/Creating-text.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+<p>There are often times when you might need to use text in your Three.js application. Here's are some options you may consider when you wish to add Text.</p>
 
+
 
+<h2>1. DOM + CSS</h2>
 
+
 
+<p>Using HTML could simply be the easiest and fastest manner to add text. This is commonly used for descriptive overlays in three.js examples.</p>
 
+
 
+<p>You can add content to a
 
+<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code></p>
 
+
 
+<p>and use css markup to position absolutely at a position above all others with a z-index especially if you are running three.js full screen.</p>
 
+
 
+<p><code>#info {
 
+position: absolute;
 
+top: 10px;
 
+width: 100%;
 
+text-align: center;
 
+z-index: 100;
 
+display:block;
 
+}</code></p>
 
+
 
+<h2>2. Draw text to canvas and use as Texture</h2>
 
+
 
+<p>Use this method if you wish to draw text easily on a plane in your three.js scene. This technique can be seen utilized in the <a href="http://plumegraph.org/">Civilian Casualties in Afghanistan</a> visualization.</p>
 
+
 
+<h2>3. Create a 3d model in your 3d application and export to three.js</h2>
 
+
 
+<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
 
+
 
+<h2>4. Procedural Text Geometry</h2>
 
+
 
+<p>Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d text geometries. However, font data files <a href="http://typeface.neocracy.org/fonts.html">http://typeface.neocracy.org/fonts.html</a> in the typeface.js format needs to be loaded.</p>
 
+
 
+<p>A Text Geometry can then be created with <code>new THREE.TextGeometry( text, parameters );</code></p>
 
+
 
+<p>For examples, see <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html</a>, <a href="https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html</a> and <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html</a></p>
 
+
 
+<p>If Typeface is down, or you want to use a font that is not there, there's a tutorial with a python script for blender that allows you to export text to Three.js's JSON format: <a href="http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html">http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html</a></p>
 
+
 
+
 
+	</body>
 
+</html>

+ 32 - 0
docs/manual/introduction/Detecting-WebGL-and-browser-compatibility.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1><br />
 
+		<p>
 
+			Even those this is becming less and less of a problem, some devices or browsers may not support WebGL.
 
+			Here is how to check if it is supported and display a warning to the user if it is not.
 
+		</p>
 
+
 
+		<h2>A solution</h2>
 
+
 
+		<p>In order to detect webgl compatibility and gracefully inform the user you can add <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js">https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js</a> to your javascript and use this example to avoid even attempting to render anything:</p>
 
+
 
+		<pre><code>if (Detector.webgl) {
 
+		    init();
 
+		    animate();
 
+		} else {
 
+		    var warning = Detector.getWebGLErrorMessage();
 
+		    document.getElementById('container').appendChild(warning);
 
+		}
 
+		</code></pre>
 
+
 
+
 
+	</body>
 
+</html>

+ 57 - 0
docs/manual/introduction/Drawing-lines.html
View File 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+		<p>Let's say you want to draw a line or a circle, not a wireframe geometry.
 
+First we need to setup Renderer, Scene and camera (<a href="Getting%20Started">see Getting Started</a>).</p>
 
+
 
+<p>Here is the code that we will use:</p>
 
+
 
+<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> renderer <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.WebGLRenderer</span>();
 
+		<span class="pl-smi">renderer</span>.<span class="pl-en">setSize</span>(<span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>);
 
+		<span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">appendChild</span>(<span class="pl-smi">renderer</span>.<span class="pl-smi">domElement</span>);
 
+		<span class="pl-k">var</span> camera <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.PerspectiveCamera</span>(<span class="pl-c1">45</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span> <span class="pl-k">/</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>, <span class="pl-c1">1</span>, <span class="pl-c1">500</span>);
 
+		<span class="pl-smi">camera</span>.<span class="pl-smi">position</span>.<span class="pl-c1">set</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">100</span>);
 
+		<span class="pl-smi">camera</span>.<span class="pl-en">lookAt</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
 
+		<span class="pl-k">var</span> scene <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Scene</span>();</pre></div>
 
+
 
+<p>Next thing we will do is define a material. For lines we have to use <code>LineBasicMaterial</code>.</p>
 
+
 
+<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> material <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.LineBasicMaterial</span>({
 
+				color<span class="pl-k">:</span> <span class="pl-c1">0x0000ff</span>
 
+		});
 
+</pre></div>
 
+
 
+<p>After material we will need a <code>Geometry</code> with some vertices:</p>
 
+
 
+<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> geometry <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Geometry</span>();
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-k">-</span><span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">10</span>, <span class="pl-c1">0</span>));
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));</pre></div>
 
+
 
+<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
 
+
 
+<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
 
+
 
+<div class="highlight highlight-source-js"><pre>
 
+		<span class="pl-k">var</span> line <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Line</span>(geometry, material);
 
+</pre></div>
 
+
 
+<p>All that's left is to add it to the scene and call <code>render</code>.</p>
 
+
 
+<div class="highlight highlight-source-js"><pre>
 
+		<span class="pl-smi">scene</span>.<span class="pl-c1">add</span>(line);
 
+		<span class="pl-smi">renderer</span>.<span class="pl-en">render</span>(scene, camera);
 
+</pre></div>
 
+
 
+<p>You should now be seeing a arrow pointing upwards, made from two blue lines.</p>
 
+	</body>
 
+</html>

+ 51 - 0
docs/manual/introduction/FAQ.html
View File 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+		<h2>Which Import Format/Exporter is best supported?</h2>
 
+		<div>
 
+TODO 
+		</div>
 
+
 
+		<h2>Why are there meta viewport tags in examples?</h2>
 
+		<div>
 
+			<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">meta</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e">content</span>=<span class="pl-s"><span class="pl-pds">"</span>width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0<span class="pl-pds">"</span></span>&gt;</pre></div>
 
+
 
+				<p>These tags control viewport size and scale for mobile browsers (where page content may be rendered at different size than visible viewport).</p>
 
+
 
+				<p><a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html</a></p>
 
+
 
+				<p><a href="https://developer.mozilla.org/en/Mobile/Viewport_meta_tag">https://developer.mozilla.org/en/Mobile/Viewport_meta_tag</a></p>
 
+		</div>
 
+
 
+		<h2>How can scene scale be preserved on resize?</h2>
 
+		<div>
 
+			We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.
 
+
 
+			The key equation to solving this is this formula for the visible height at a given distance:
 
+
 
+			<code>s
 
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
 
+			</code>
 
+			If we increase the window height by a certain percentage, then what we want is the visible height at all distances
 
+			to increase by the same percentage.
 
+
 
+			This can not be done by changing the camera position. Instead you have to change the camera field-of-view.
 
+			[link:http://jsfiddle.net/Q4Jpu/ Example].
 
+		</div>
 
+
 
+		<h2>Why is part of my object invisible?</h2>
 
+		<div>
 
+			This could be because of face culling. Faces have an orientation that  decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
 
+			<code>material.side = THREE.DoubleSide</code>
 
+		</div>
 
+	</body>
 
+</html>

+ 114 - 0
docs/manual/introduction/How-to-run-thing-locally.html
View File 

@@ -0,0 +1,114 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1><br />
 
+		<p>If you use just procedural geometries and don't load any textures, webpages should work straight from the file system, just double-click on HTML file in a file manager and it should appear working in the browser (accessed as <code>file:///example</code>).</p>
 
+
 
+		<h2>Content loaded from external files</h2>
 
+
 
+		<p>If you load models or textures from external files, due to browsers' "<a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>" security restrictions, loading from a file system will fail with a security exception.</p>
 
+
 
+		<p>There are two ways how to solve this:</p>
 
+
 
+		<ol>
 
+		<li><p>Change security for local files in a browser (access page as <code>file:///example</code>)</p></li>
 
+		<li><p>Run files from a local server (access page as <code>http://localhost/example</code>)</p></li>
 
+		</ol>
 
+
 
+		<p>If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. You may want to create a separate browser profile / shortcut used just for local development to be safe.</p>
 
+
 
+		<hr>
 
+
 
+		<h3>Change local files security policy</h3>
 
+
 
+		<h4>Safari</h4>
 
+
 
+		<p>Enable the develop menu using the preferences panel, under Advanced -&gt; "Show develop menu in menu bar"</p>
 
+
 
+		<p>Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behaviour with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing &amp; debugging using safari.</p>
 
+
 
+		<h4>Chrome</h4>
 
+
 
+		<p>Close all running Chrome instances first. The important word here is 'all'.</p>
 
+
 
+		<p>On Windows, you may check for Chrome instances using the Windows Task Manager. Alternatively, if you see a Chrome icon in the system tray, then you may open its context menu and click 'Exit'. This should close all Chrome instances.</p>
 
+
 
+		<p>Then start the Chrome executable with a command line flag:</p>
 
+
 
+		<pre><code>chrome --allow-file-access-from-files
 
+		</code></pre>
 
+
 
+		<p>On Windows, probably the easiest is probably to create a special shortcut icon which has added the flag given above (right-click on shortcut -&gt; properties -&gt; target).</p>
 
+
 
+		<p>On Mac OSX, you can do this with</p>
 
+
 
+		<pre><code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
 
+		</code></pre>
 
+
 
+		<h4>Firefox</h4>
 
+
 
+		<ol>
 
+		<li>Go to <code>about:config</code>
 
+		</li>
 
+		<li>Find <code>security.fileuri.strict_origin_policy</code> parameter</li>
 
+		<li>Set it to <code>false</code>
 
+		</li>
 
+		</ol>
 
+
 
+		<hr>
 
+
 
+		<h3>Run local server</h3>
 
+
 
+		<p>The simplest probably is to use Python's built-in http server. </p>
 
+
 
+		<p>If you have <a href="http://python.org/">Python</a> installed, it should be enough to run this from a command line:</p>
 
+
 
+		<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 2.x</span>
 
+		python -m SimpleHTTPServer</pre></div>
 
+
 
+		<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 3.x</span>
 
+		python -m http.server</pre></div>
 
+
 
+		<p>This will serve files from the current directory at localhost under port 8000:</p>
 
+
 
+		<p>http://localhost:8000/</p>
 
+
 
+		<p>If you have Ruby installed, you can get the same result running this instead:</p>
 
+
 
+		<div class="highlight highlight-source-shell"><pre>ruby -r webrick -e <span class="pl-s"><span class="pl-pds">"</span>s = WEBrick::HTTPServer.new(:Port =&gt; 8000, :DocumentRoot =&gt; Dir.pwd); trap('INT') { s.shutdown }; s.start<span class="pl-pds">"</span></span></pre></div>
 
+
 
+		<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
 
+
 
+		<div class="highlight highlight-source-shell"><pre>php -S localhost:8000</pre></div>
 
+
 
+		<p>Node.js has a simple HTTP server package. To install:</p>
 
+
 
+		<div class="highlight highlight-source-shell"><pre>npm install http-server -g</pre></div>
 
+
 
+		<p>To run:</p>
 
+
 
+		<div class="highlight highlight-source-shell"><pre>http-server <span class="pl-c1">.</span></pre></div>
 
+
 
+		<p>Other simple alternatives are <a href="http://stackoverflow.com/q/12905426/24874">discussed here</a> on Stack Overflow.</p>
 
+
 
+		<p>Of course, you can use any other regular full-fledged web server like <a href="http://www.apachefriends.org/en/xampp.html">Apache</a> or <a href="http://nginx.org/">nginx</a>.</p>
 
+
 
+		<p>Example with lighttpd, which is a very lightweight general purpose webserver (on MAC OSX):</p>
 
+
 
+		<ol>
 
+		<li>Install it via homebrew <code>brew install lighttpd</code>
 
+		</li>
 
+		<li>Create a configuration file called lighttpd.conf in the directory where you want to run your webserver. There is a sample in <a href="http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration">this</a> page.</li>
 
+		<li>In the conf file, change the server.document-root with the directory you want to serve</li>
 
+		<li>Start it with <code>lighttpd -f lighttpd.conf</code>
 
+		</li>
 
+		<li>Navigate to http://localhost:3000/ and it will serve static files from the directory you chose.</li>
 
+		</ol>	</body>
 
+</html>

+ 135 - 0
docs/manual/introduction/How-to-update-things.html
View File 

@@ -0,0 +1,135 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+		<p>All objects by default automatically update their matrices.</p>
 
+
 
+		<p>However, if you know object will be static, you can disable this and update transform matrix manually just when needed.</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">object</span>.<span class="pl-smi">matrixAutoUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">false</span>;
 
+		<span class="pl-smi">object</span>.<span class="pl-en">updateMatrix</span>();</pre></div>
 
+
 
+		<h2>Geometries</h2>
 
+
 
+		<p>You can only update content of buffers, you cannot resize buffers (this is very costly, basically equivalent to creating new geometry). </p>
 
+
 
+		<p>You can emulate resizing by pre-allocating larger buffer and then keeping unneeded vertices collapsed / hidden.</p>
 
+
 
+		<p>Set flags only for attributes that you need to update, updates are costly. Once buffers change, these flags reset automatically back to <code>false</code>. You need to keep setting them to <code>true</code> if you wanna keep updating buffers.</p>
 
+
 
+		<p>r49</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">verticesNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">elementsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">morphTargetsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">uvsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">normalsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">colorsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">tangentsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
 
+
 
+		<p>pre-r49</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyVertices</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyMorphTargets</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyElements</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyUvs</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyNormals</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyTangents</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
 
+		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyColors</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
 
+
 
+		<p>In versions prior to <a href="https://github.com/mrdoob/three.js/releases/tag/r66">r66</a> meshes additionally need the <code>dynamic</code> flag enabled (to keep internal typed arrays).</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">dynamic</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
 
+
 
+		<p>Custom attributes (in <code>MeshShaderMaterial</code>):</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre>attributes[ <span class="pl-s"><span class="pl-pds">"</span>attributeName<span class="pl-pds">"</span></span> ].<span class="pl-smi">needsUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
 
+
 
+		<p>Other objects like <code>ParticleSystem</code>, <code>Ribbon</code>, <code>Line</code> just need "dirty" flags.</p>
 
+
 
+		<p>Examples:</p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_dynamic.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_dynamic.html</a></p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html</a></p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes_particles.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes_particles.html</a></p>
 
+
 
+		<h2>Materials</h2>
 
+
 
+		<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to shader every frame.</p>
 
+
 
+		<p>Also GL state related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
 
+
 
+		<p>Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).</p>
 
+
 
+		<p>Properties that can't be easily changed in runtime (once material is rendered at least once):</p>
 
+
 
+		<ul>
 
+		<li>numbers and types of uniforms</li>
 
+		<li>numbers and types of lights</li>
 
+		<li>presence or not of
 
+
 
+		<ul>
 
+		<li>texture</li>
 
+		<li>fog</li>
 
+		<li>vertex colors</li>
 
+		<li>skinning</li>
 
+		<li>morphing</li>
 
+		<li>shadow map</li>
 
+		<li>alpha test</li>
 
+		</ul>
 
+		</li>
 
+		</ul>
 
+
 
+		<p>Changes in these require building of new shader program. You'll need to set <code>material.needsUpdate</code> flag to <code>true</code>. </p>
 
+
 
+		<p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
 
+
 
+		<p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
 
+
 
+		<p>You can change freely material used for geometry chunk, you cannot change how object is divided into chunks (according to face materials). </p>
 
+
 
+		<p>If you need to have different configurations of materials during runtime, if number of materials / chunks is small, you could pre-divide object beforehand (e.g. hair / face / body / upper clothes / trousers for human, front / sides / top / glass / tire / interior for car). </p>
 
+
 
+		<p>If number is large (e.g. each face could be potentially different), consider different solution, using attributes / textures to drive different per-face look.</p>
 
+
 
+		<p>Examples:</p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html</a></p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_dof.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_dof.html</a></p>
 
+
 
+		<h2>Textures</h2>
 
+
 
+		<p>Image, canvas, video and data textures need to have flag set:</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">texture</span>.<span class="pl-smi">needsUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
 
+
 
+		<p>Render targets update automatically.</p>
 
+
 
+		<p>Examples:</p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html</a></p>
 
+
 
+		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_rtt.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_rtt.html</a></p>
 
+
 
+		<h2>
 
+		<a id="user-content-cameras" class="anchor" href="#cameras" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Cameras</h2>
 
+
 
+		<p>Camera position and target is updated automatically.</p>
 
+
 
+		<p>If you need to change <code>fov</code>, <code>aspect</code>, <code>near</code>, <code>far</code> you need to recompute projection matrix:</p>
 
+
 
+		<div class="highlight highlight-source-js"><pre><span class="pl-smi">camera</span>.<span class="pl-smi">aspect</span> <span class="pl-k">=</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span> <span class="pl-k">/</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>;
 
+		<span class="pl-smi">camera</span>.<span class="pl-en">updateProjectionMatrix</span>();</pre></div>
 
+
 
+	</body>
 
+</html>

+ 1 - 1
docs/manual/introduction/Matrix-transformations.html
View File 

@@ -19,7 +19,7 @@
 
 		There are two ways to update an object's transformation:
 
 		<ol>
 
 			<li>
 
-				Modify the object's *position*, *quaternion*, and *scale* properties, and let Three.js recompute
 
+				Modify the object's *position*, *quaternion*, and *scale* properties, and let three.js recompute
 
 				the object's matrix from these properties:
 
 				<code>
 
 				object.position.copy(start_position);

+ 20 - 0
docs/manual/introduction/Migration-guide.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</a></h1>
 
+
 
+		<div class="desc">
 
+			The migration guide is maintained on the [link:https://github.com/mrdoob/three.js/wiki wiki].
 
+			It contains a list of changes for each version of three.js going back to r45.<br /><br />
 
+
 
+			You can find it [link:https://github.com/mrdoob/three.js/wiki/Migration-Guide here].
 
+		</div>
 
+	</body>
 
+</html>

+ 159 - 0
docs/manual/introduction/Useful-links.html
View File 

@@ -0,0 +1,159 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1><br />
 
+
 
+		<div class="desc">
 
+			The following is a collection of links that you might find useful when learning Three.<br />
 
+			If you find something that you'd like to add here, or think that one of the links below is no longer
 
+			relevant or working, feel free to click the 'edit' button in the top right and make some changes!<br /><br />
 
+
 
+			Note also that as three.js is under rapid development, a lot of these links will contain information that is
 
+			out of date - if something isn't working as you'd expect or one of these links says it should,
 
+			check the browser console for warning, the relevant docs pages and especially the [page:DeprecatedList].
 
+		</div>
 
+
 
+		<h2>More documentation</h2>
 
+		<ul>
 
+			<li>
 
+				[link:http://threejsdoc.appspot.com/doc/index.html threejsdoc] - useful because it links every API element to to every official example that uses it.
 
+			</li>
 
+			<li>
 
+				[link:http://ushiroad.com/3j/ Three.js walking map] - a graphical breakdown of the structure of a three.js scene.
 
+			</li>
 
+			<li>
 
+				[link:http://www.reddit.com/r/threejs/ Three.js] subreddit.
 
+			</li>
 
+			<li>
 
+				[link:http://www.reddit.com/r/webgl/ WebGL] subreddit.
 
+			</li>
 
+		</ul>
 
+
 
+		<h2>News and Updates</h2>
 
+		<ul>
 
+			<li>
 
+				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritaive news source for WebGL.
 
+			</li>
 
+			<li>
 
+				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
 
+			</li>
 
+		</ul>
 
+
 
+		<h2>Articles</h2>
 
+		<ul>
 
+			<li>
 
+				[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
 
+				by [link:https://github.com/BKcore BKcore]
 
+			</li>
 
+			<li>
 
+
 
+			</li>
 
+			<li>
 
+
 
+			</li>
 
+			<li>
 
+
 
+			</li>
 
+		</ul>
 
+
 
+		<h2>Examples</h2>
 
+		<ul>
 
+			<li>
 
+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
 
+				examples built using three.js r60.
 
+			</li>
 
+			<li>
 
+				[link:https://threejs.org/examples/ Official three.js Examples] - these examples are
 
+				maintained as part of the three.js repository, and always use the latest version of three.js.
 
+			</li>
 
+			<li>
 
+				[link:https://rawgit.com/mrdoob/three.js/dev/examples/ Official three.js Examples] (dev branch) -
 
+				Same as the above, except these use the dev branch of three.js,	and are used to check that
 
+				everything is working as three.js being is developed.
 
+			</li>
 
+		</ul>
 
+
 
+	 <h2>Tools</h2>
 
+	 <ul>
 
+		 <li>
 
+			[link:http://www.physgl.org/ physgl.org] - javascript front-end with wrappers to three.js, to bring WebGL
 
+ 			graphics to students learning physics and math.
 
+		 </li>
 
+		 <li>
 
+			 [link:http://whitestormjs.xyz/ Whitestorm.js] – A wrapper around Three.js and custom [link:https://github.com/chandlerprall/Physijs physi.js].
 
+		 </li>
 
+
 
+		<li>
 
+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
 
+		</li>
 
+		<li>
 
+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
 
+		</li>
 
+	 </ul>
 
+
 
+	 <h2>Tutorials and courses</h2>
 
+	 <ul>
 
+		 <li>
 
+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
 
+			 and uses three.js as it coding tool.
 
+		 </li>
 
+		 <li>
 
+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
 
+		 </li>
 
+		 <li>
 
+			 [link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
 
+		 </li>
 
+		 <li>
 
+			 [link:http://www.senaeh.de/einstieg-in-webgl-mit-three-js/ Einstieg in WebGL mit three.js] - three.js tutorial in German
 
+		 </li>
 
+		 <li>
 
+			 [link:http://learningthreejs.com/ Learning Three.js] – blog where each post is dedicated to teaching an aspect of three.js
 
+		 </li>
 
+	 </ul>
 
+
 
+	 <h2>Old Links</h2>
 
+	 <div>
 
+		These links are kept for historical purposes - you may still find them useful, but be warned that
 
+		they may have information relating to very old versions of three.js.
 
+	 </div>
 
+
 
+	 <ul>
 
+		<li>
 
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM">AlterQualia at WebGL Camp 3</a>
 
+		</li>
 
+		<li>
 
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
 
+		</li>
 
+		<li>
 
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
 
+		</li>
 
+		<li>
 
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
 
+		</li>
 
+		<li>
 
+			[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
 
+		</li>
 
+		<li>
 
+			<a href="http://www.youtube.com/watch?v=VdQnOaolrPA">Trigger Rally</a>  by [link:https://github.com/jareiko jareiko] (video).
 
+		</li>
 
+		<li>
 
+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
 
+		</li>
 
+		<li>
 
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by https://github.com/BKcore BKcore]
 
+		</li>
 
+		<li>
 
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ On the twelfth day of Xmas, take a whirlwind look at Three.js]
 
+			by [link:http://github.com/nrocy Paul King]
 
+		</li>
 
+	 </ul>
 
+
 
+	</body>
 
+</html>