6 年之前 · fe8d66b636
--- a/docs/api/en/cameras/OrthographicCamera.html
+++ b/docs/api/en/cameras/OrthographicCamera.html
@@ -24,7 +24,6 @@
 
				 
			
 
				 		<h2>Example</h2>
			
 
				 
			
 
				-		<p>[example:canvas_camera_orthographic camera / orthographic ]</p>
			
 
				 		<p>[example:webgl_camera camera ]</p>
			
 
				 		<p>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</p>
			
 
				 		<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
			
--- a/docs/api/en/cameras/PerspectiveCamera.html
+++ b/docs/api/en/cameras/PerspectiveCamera.html
@@ -22,8 +22,6 @@
 
				 
			
 
				 		<h2>Example</h2>
			
 
				 
			
 
				-		<p>[example:canvas_geometry_birds geometry / birds ]</p>
			
 
				-		<p>[example:canvas_geometry_cube geometry / cube ]</p>
			
 
				 		<p>[example:webgl_animation_skinning_blending animation / skinning / blending ]</p>
			
 
				 		<p>[example:webgl_animation_skinning_morph animation / skinning / blending ]</p>
			
 
				 		<p>[example:webgl_effects_stereo effects / stereo ]</p>
			
--- a/docs/api/en/deprecated/DeprecatedList.html
+++ b/docs/api/en/deprecated/DeprecatedList.html
@@ -501,11 +501,11 @@
 
				 
			
 
				 
			
 
				 
			
 
				-		<h2>Renderer</h2>
			
 
				+		<h2>Renderers</h2>
			
 
				 
			
 
				-		<h3>[page:Projector]</h3>
			
 
				+		<h3>[page:CanvasRenderer]</h3>
			
 
				 		<p>
			
 
				-			CanvasRenderer has been moved to [link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js /examples/js/renderers/CanvasRenderer.js].
			
 
				+			CanvasRenderer has been removed.
			
 
				 		</p>
			
 
				 
			
 
				 		<h3>[page:Projector]</h3>
			
--- a/docs/api/en/lights/AmbientLight.html
+++ b/docs/api/en/lights/AmbientLight.html
@@ -21,10 +21,6 @@
 
				 
			
 
				 		<h2>Example</h2>
			
 
				 		<p>
			
 
				-			[example:canvas_camera_orthographic camera / orthographic ]<br />
			
 
				-		  [example:canvas_interactive_voxelpainter interactive / voxelpainter ]<br />
			
 
				-		  [example:canvas_materials materials ]<br />
			
 
				-		  [example:canvas_sandbox sandbox ]<br />
			
 
				 		  [example:webgl_animation_cloth animation / cloth ]<br />
			
 
				 		  [example:webgl_animation_skinning_blending animation / skinning / blending ]
			
 
				 		</p>
			
--- a/docs/api/en/lights/DirectionalLight.html
+++ b/docs/api/en/lights/DirectionalLight.html
@@ -40,7 +40,6 @@
 
				 
			
 
				 		<h2>Example</h2>
			
 
				 		<p>
			
 
				-			[example:canvas_morphtargets_horse morphtargets / horse ]<br />
			
 
				 			[example:misc_controls_fly controls / fly ]<br />
			
 
				 			[example:misc_lights_test lights / test ]<br />
			
 
				 			[example:webvr_cubes cubes ]<br />
			
--- a/docs/api/en/lights/PointLight.html
+++ b/docs/api/en/lights/PointLight.html
@@ -23,7 +23,6 @@
 
				 		<h2>Example</h2>
			
 
				 
			
 
				 		<p>
			
 
				-			[example:canvas_lights_pointlights lights / pointlights ]<br />
			
 
				 			[example:webgl_lights_pointlights lights / pointlights ]<br />
			
 
				 			[example:webgl_lights_pointlights2 lights / pointlights2 ]<br />
			
 
				 			[example:webgldeferred_animation animation ]<br />
			
--- a/docs/api/en/materials/LineDashedMaterial.html
+++ b/docs/api/en/materials/LineDashedMaterial.html
@@ -18,7 +18,6 @@
 
				 
			
 
				 		<p>
			
 
				 			[example:webgl_lines_dashed WebGL / lines / dashed]<br />
			
 
				-			[example:canvas_lines_dashed Canvas / lines /dashed]
			
 
				 		</p>
			
 
				 
			
 
				 		<code>
			
--- a/docs/examples/SpriteCanvasMaterial.html
+++ b/docs/examples/SpriteCanvasMaterial.html
@@ -1,61 +0,0 @@
 
				-<!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>
			
 
				-		[page:Material] &rarr;
			
 
				-
			
 
				-		<h1>[name]</h1>
			
 
				-
			
 
				-		<p class="desc">Create a material that can draw custom sprites using a 2d canvas.</p>
			
 
				-
			
 
				-
			
 
				-		<h2>Constructor</h2>
			
 
				-
			
 
				-
			
 
				-		<h3>[name]( [param:Object parameters] )</h3>
			
 
				-		<p>
			
 
				-		parameters is an object that can be used to set up the default properties
			
 
				-		</p>
			
 
				-		<p>
			
 
				-		rotation - the rotation of the sprite<br/>
			
 
				-		color - the color of the sprite<br/>
			
 
				-		program - the program used to draw the sprite
			
 
				-		</p>
			
 
				-
			
 
				-
			
 
				-		<h2>Properties</h2>
			
 
				-
			
 
				-		<h3>[property:Radians rotation]</h3>
			
 
				-		<p>
			
 
				-		The rotation of the sprite in radians. Default is 0.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[property:Color color]</h3>
			
 
				-		<p>
			
 
				-		The color of the sprite. The material will set up the color for the context before calling the material's program.
			
 
				-		</p>
			
 
				-
			
 
				-		<h2>Methods</h2>
			
 
				-
			
 
				-
			
 
				-
			
 
				-		<h3>[method:null program]([param:CanvasRenderingContext2D context], [param:Color color])</h3>
			
 
				-		<p>
			
 
				-		context -- The canvas context <br />
			
 
				-		color -- The color of the sprite
			
 
				-		</p>
			
 
				-		<p>
			
 
				-			Define a program that will use the context to draw the sprite.
			
 
				-		</p>
			
 
				-
			
 
				-		<h2>Source</h2>
			
 
				-
			
 
				-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js examples/js/renderers/CanvasRenderer.js]
			
 
				-	</body>
			
 
				-</html>
			
--- a/docs/examples/renderers/CanvasRenderer.html
+++ b/docs/examples/renderers/CanvasRenderer.html
@@ -1,174 +0,0 @@
 
				-<!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 class="desc">
			
 
				-			The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL,
			
 
				-			but draws it using the (slower) <a href="http://drafts.htmlwg.org/2dcontext/html5_canvas_CR/Overview.html">Canvas 2D Context</a>
			
 
				-			API.<br /><br />
			
 
				-
			
 
				-			<b>
			
 
				-			NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
			
 
				-			</b>
			
 
				-			If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].<br /><br />
			
 
				-
			
 
				-			This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
			
 
				-
			
 
				-			<code>
			
 
				-			function webglAvailable() {
			
 
				-				try {
			
 
				-					var canvas = document.createElement( 'canvas' );
			
 
				-					return !!( window.WebGLRenderingContext && (
			
 
				-						canvas.getContext( 'webgl' ) ||
			
 
				-						canvas.getContext( 'experimental-webgl' ) )
			
 
				-					);
			
 
				-				} catch ( e ) {
			
 
				-					return false;
			
 
				-				}
			
 
				-			}
			
 
				-
			
 
				-			if ( webglAvailable() ) {
			
 
				-				renderer = new THREE.WebGLRenderer();
			
 
				-			} else {
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-			}
			
 
				-			</code>
			
 
				-
			
 
				-			Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 &lt;canvas&gt; tag.
			
 
				-			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
			
 
				-
			
 
				-			Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
			
 
				-		</p>
			
 
				-
			
 
				-		<h2>Constructor</h2>
			
 
				-
			
 
				-
			
 
				-		<h3>[name]([param:object parameters])</h3>
			
 
				-		<p>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</p>
			
 
				-
			
 
				-		<p>
			
 
				-		[page:DOMElement canvas] - A [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas canvas]
			
 
				-		where the renderer draws its output.
			
 
				-		This corresponds to the [page:CanvasRenderer.domElement domElement] property below.
			
 
				-		If not passed in here, a new canvas element will be created.<br />
			
 
				-
			
 
				-		[page:Boolean alpha] - whether the canvas contains an alpha (transparency) buffer or not.
			
 
				-	  Default is *false*.
			
 
				-		</p>
			
 
				-
			
 
				-
			
 
				-		<h2>Properties</h2>
			
 
				-
			
 
				-    <h3>[property:Object info]</h3>
			
 
				-
			
 
				-		<p>
			
 
				-			An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:
			
 
				-			<ul>
			
 
				-				<li>render:
			
 
				-					<ul>
			
 
				-						<li>vertices</li>
			
 
				-						<li>faces</li>
			
 
				-					</ul>
			
 
				-				</li>
			
 
				-			</ul>
			
 
				-		</p>
			
 
				-
			
 
				-    <h3>[property:DOMElement domElement]</h3>
			
 
				-
			
 
				-		<p>
			
 
				-			A [page:Canvas] where the renderer draws its output.<br />
			
 
				-			This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[property:Boolean autoClear]</h3>
			
 
				-		<p>
			
 
				-      Defines whether the renderer should automatically clear its output before rendering.
			
 
				-    </p>
			
 
				-
			
 
				-		<h3>[property:Boolean sortObjects]</h3>
			
 
				-		<p>
			
 
				-      Defines whether the renderer should sort objects. Default is true.<br />
			
 
				-      Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
			
 
				-    </p>
			
 
				-
			
 
				-		<h3>[property:boolean sortElements]</h3>
			
 
				-		<p>
			
 
				-			Defines whether the renderer should sort the face of each object. Default is true.
			
 
				-		</p>
			
 
				-
			
 
				-
			
 
				-		<h2>Methods</h2>
			
 
				-
			
 
				-		<h3>[method:null render]([param:Scene scene], [param:Camera camera])</h3>
			
 
				-		<p>
			
 
				-			scene -- The scene to render. <br />
			
 
				-			camera -- the camera to view the scene.
			
 
				-		</p>
			
 
				-		<p>
			
 
				-        Render a scene using a camera.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[method:null clear]()</h3>
			
 
				-		<p>
			
 
				-			Tells the renderer to clear its color drawing buffer with the clearcolor.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[method:null setClearColor]([param:Color color], [param:number alpha])</h3>
			
 
				-		<p>
			
 
				-			color -- The color to clear the canvas with. <br />
			
 
				-			alpha -- The alpha channel to clear the canvas with.
			
 
				-		</p>
			
 
				-		<p>
			
 
				-			This set the clearColor and the clearAlpha.
			
 
				-		</p>
			
 
				-
			
 
				-
			
 
				-		<h3>[method:null setSize]([param:Number width], [param:Number height])</h3>
			
 
				-		<p>
			
 
				-			width -- The width of the drawing canvas. <br />
			
 
				-			height -- The height of the drawing canvas.
			
 
				-		</p>
			
 
				-		<p>
			
 
				-			This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[method:null setClearColorHex]([param:number hex], [param:number alpha])</h3>
			
 
				-		<p>
			
 
				-			hex -- The the hexadecimal value of the color to clear the canvas with. <br />
			
 
				-	    alpha -- The alpha channel to clear the canvas with.
			
 
				-		</p>
			
 
				-		<p>
			
 
				-			This set the clearColor and the clearAlpha.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[method:number getClearColorHex]()</h3>
			
 
				-		<p>
			
 
				-			Returns the [page:number hex] color.
			
 
				-		</p>
			
 
				-
			
 
				-		<h3>[method:number getClearAlpha]()</h3>
			
 
				-		<p>
			
 
				-			Returns the alpha value.
			
 
				-		</p>
			
 
				-
			
 
				-		<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
			
 
				-		<p>
			
 
				-			[method:null clearColor]()<br/>
			
 
				-			[method:null clearDepth]()<br/>
			
 
				-			[method:null clearStencil]()<br/>
			
 
				-			[method:number getMaxAnisotropy]() - returns 1 <br/>
			
 
				-		</p>
			
 
				-
			
 
				-		<h2>Source</h2>
			
 
				-
			
 
				-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js]
			
 
				-	</body>
			
 
				-</html>
			
--- a/docs/list.js
+++ b/docs/list.js
@@ -383,7 +383,6 @@ var list = {
 
				 
			
 
				 			"Plugins": {
			
 
				 				"LookupTable": "examples/Lut",
			
 
				-				"SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
			
 
				 			},
			
 
				 
			
 
				 			"QuickHull": {
			
@@ -395,7 +394,6 @@ var list = {
 
				 			},
			
 
				 
			
 
				 			"Renderers": {
			
 
				-				"CanvasRenderer": "examples/renderers/CanvasRenderer",
			
 
				 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
			
 
				 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
			
 
				 				"SVGRenderer": "examples/renderers/SVGRenderer"
			
@@ -807,7 +805,6 @@ var list = {
 
				 
			
 
				 			"Plugins": {
			
 
				 				"LookupTable": "examples/Lut",
			
 
				-				"SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
			
 
				 			},
			
 
				 
			
 
				 			"QuickHull": {
			
@@ -819,7 +816,6 @@ var list = {
 
				 			},
			
 
				 
			
 
				 			"Renderers": {
			
 
				-				"CanvasRenderer": "examples/renderers/CanvasRenderer",
			
 
				 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
			
 
				 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
			
 
				 				"SVGRenderer": "examples/renderers/SVGRenderer"
			
--- a/docs/manual/en/introduction/Creating-text.html
+++ b/docs/manual/en/introduction/Creating-text.html
@@ -77,7 +77,6 @@
 
				 
			
 
				 			<h3>Examples</h3>
			
 
				 			[example:webgl_geometry_text WebGL / geometry / text]<br />
			
 
				-			[example:canvas_geometry_text canvas / geometry / text]<br />
			
 
				 			[example:webgl_shadowmap WebGL / shadowmap]
			
 
				 
			
 
				 			<p>
			
--- a/examples/canvas_ascii_effect.html
+++ b/examples/canvas_ascii_effect.html
@@ -1,140 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js - ASCII Effect</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/controls/TrackballControls.js"></script>
			
 
				-		<script src="js/effects/AsciiEffect.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, controls, scene, renderer;
			
 
				-			var effect;
			
 
				-
			
 
				-			var sphere, plane;
			
 
				-
			
 
				-			var start = Date.now();
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var width = window.innerWidth || 2;
			
 
				-				var height = window.innerHeight || 2;
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = 'Drag to change the view';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
			
 
				-				camera.position.y = 150;
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				controls = new THREE.TrackballControls( camera );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				var light = new THREE.PointLight( 0xffffff );
			
 
				-				light.position.set( 500, 500, 500 );
			
 
				-				scene.add( light );
			
 
				-
			
 
				-				var light = new THREE.PointLight( 0xffffff, 0.25 );
			
 
				-				light.position.set( - 500, - 500, - 500 );
			
 
				-				scene.add( light );
			
 
				-
			
 
				-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshLambertMaterial() );
			
 
				-				scene.add( sphere );
			
 
				-
			
 
				-				// Plane
			
 
				-
			
 
				-				plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
			
 
				-				plane.position.y = - 200;
			
 
				-				plane.rotation.x = - Math.PI / 2;
			
 
				-				scene.add( plane );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setSize( width, height );
			
 
				-				// container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				effect = new THREE.AsciiEffect( renderer );
			
 
				-				effect.setSize( width, height );
			
 
				-				container.appendChild( effect.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				effect.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				stats.begin();
			
 
				-				render();
			
 
				-				stats.end();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var timer = Date.now() - start;
			
 
				-
			
 
				-				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
			
 
				-				sphere.rotation.x = timer * 0.0003;
			
 
				-				sphere.rotation.z = timer * 0.0002;
			
 
				-
			
 
				-				controls.update();
			
 
				-
			
 
				-				effect.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_camera_orthographic.html
+++ b/examples/canvas_camera_orthographic.html
@@ -1,153 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - camera - orthographic</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-			var frustumSize = 1000;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orthographic view';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				var aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
			
 
				-				camera.position.y = 400;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				// Grid
			
 
				-
			
 
				-				var gridHelper = new THREE.GridHelper( 1000, 20 );
			
 
				-				scene.add( gridHelper );
			
 
				-
			
 
				-				// Cubes
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
			
 
				-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
			
 
				-
			
 
				-				for ( var i = 0; i < 100; i ++ ) {
			
 
				-
			
 
				-					var cube = new THREE.Mesh( geometry, material );
			
 
				-
			
 
				-					cube.scale.y = Math.floor( Math.random() * 2 + 1 );
			
 
				-
			
 
				-					cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
			
 
				-					cube.position.y = ( cube.scale.y * 50 ) / 2;
			
 
				-					cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
			
 
				-
			
 
				-					scene.add( cube );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// Lights
			
 
				-
			
 
				-				var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
			
 
				-				scene.add( ambientLight );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
			
 
				-				directionalLight.position.x = Math.random() - 0.5;
			
 
				-				directionalLight.position.y = Math.random() - 0.5;
			
 
				-				directionalLight.position.z = Math.random() - 0.5;
			
 
				-				directionalLight.position.normalize();
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
			
 
				-				directionalLight.position.x = Math.random() - 0.5;
			
 
				-				directionalLight.position.y = Math.random() - 0.5;
			
 
				-				directionalLight.position.z = Math.random() - 0.5;
			
 
				-				directionalLight.position.normalize();
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				var aspect = window.innerWidth / window.innerHeight;
			
 
				-
			
 
				-				camera.left = - frustumSize * aspect / 2;
			
 
				-				camera.right = frustumSize * aspect / 2;
			
 
				-				camera.top = frustumSize / 2;
			
 
				-				camera.bottom = - frustumSize / 2;
			
 
				-
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				stats.begin();
			
 
				-				render();
			
 
				-				stats.end();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var timer = Date.now() * 0.0001;
			
 
				-
			
 
				-				camera.position.x = Math.cos( timer ) * 800;
			
 
				-				camera.position.z = Math.sin( timer ) * 800;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_birds.html
+++ b/examples/canvas_geometry_birds.html
@@ -1,483 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - birds</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				color: #808080;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				text-align:center;
			
 
				-
			
 
				-				background-color: #ffffff;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				padding: 5px;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - birds demo</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var Bird = function () {
			
 
				-
			
 
				-				var scope = this;
			
 
				-
			
 
				-				THREE.Geometry.call( this );
			
 
				-
			
 
				-				v( 5, 0, 0 );
			
 
				-				v( - 5, - 2, 1 );
			
 
				-				v( - 5, 0, 0 );
			
 
				-				v( - 5, - 2, - 1 );
			
 
				-
			
 
				-				v( 0, 2, - 6 );
			
 
				-				v( 0, 2, 6 );
			
 
				-				v( 2, 0, 0 );
			
 
				-				v( - 3, 0, 0 );
			
 
				-
			
 
				-				f3( 0, 2, 1 );
			
 
				-
			
 
				-				f3( 4, 7, 6 );
			
 
				-				f3( 5, 6, 7 );
			
 
				-
			
 
				-				this.computeFaceNormals();
			
 
				-
			
 
				-				function v( x, y, z ) {
			
 
				-
			
 
				-					scope.vertices.push( new THREE.Vector3( x, y, z ) );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				function f3( a, b, c ) {
			
 
				-
			
 
				-					scope.faces.push( new THREE.Face3( a, b, c ) );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			};
			
 
				-
			
 
				-			Bird.prototype = Object.create( THREE.Geometry.prototype );
			
 
				-			Bird.prototype.constructor = Bird;
			
 
				-
			
 
				-			// Based on https://www.openprocessing.org/sketch/6910
			
 
				-
			
 
				-			var Boid = function () {
			
 
				-
			
 
				-				var vector = new THREE.Vector3(),
			
 
				-					_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
			
 
				-					_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;
			
 
				-
			
 
				-				this.position = new THREE.Vector3();
			
 
				-				this.velocity = new THREE.Vector3();
			
 
				-				_acceleration = new THREE.Vector3();
			
 
				-
			
 
				-				this.setGoal = function ( target ) {
			
 
				-
			
 
				-					_goal = target;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.setAvoidWalls = function ( value ) {
			
 
				-
			
 
				-					_avoidWalls = value;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.setWorldSize = function ( width, height, depth ) {
			
 
				-
			
 
				-					_width = width;
			
 
				-					_height = height;
			
 
				-					_depth = depth;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.run = function ( boids ) {
			
 
				-
			
 
				-					if ( _avoidWalls ) {
			
 
				-
			
 
				-						vector.set( - _width, this.position.y, this.position.z );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-						vector.set( _width, this.position.y, this.position.z );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-						vector.set( this.position.x, - _height, this.position.z );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-						vector.set( this.position.x, _height, this.position.z );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-						vector.set( this.position.x, this.position.y, - _depth );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-						vector.set( this.position.x, this.position.y, _depth );
			
 
				-						vector = this.avoid( vector );
			
 
				-						vector.multiplyScalar( 5 );
			
 
				-						_acceleration.add( vector );
			
 
				-
			
 
				-					}/* else {
			
 
				-
			
 
				-						this.checkBounds();
			
 
				-
			
 
				-					}
			
 
				-					*/
			
 
				-
			
 
				-					if ( Math.random() > 0.5 ) {
			
 
				-
			
 
				-						this.flock( boids );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					this.move();
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.flock = function ( boids ) {
			
 
				-
			
 
				-					if ( _goal ) {
			
 
				-
			
 
				-						_acceleration.add( this.reach( _goal, 0.005 ) );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					_acceleration.add( this.alignment( boids ) );
			
 
				-					_acceleration.add( this.cohesion( boids ) );
			
 
				-					_acceleration.add( this.separation( boids ) );
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.move = function () {
			
 
				-
			
 
				-					this.velocity.add( _acceleration );
			
 
				-
			
 
				-					var l = this.velocity.length();
			
 
				-
			
 
				-					if ( l > _maxSpeed ) {
			
 
				-
			
 
				-						this.velocity.divideScalar( l / _maxSpeed );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					this.position.add( this.velocity );
			
 
				-					_acceleration.set( 0, 0, 0 );
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.checkBounds = function () {
			
 
				-
			
 
				-					if ( this.position.x > _width ) this.position.x = - _width;
			
 
				-					if ( this.position.x < - _width ) this.position.x = _width;
			
 
				-					if ( this.position.y > _height ) this.position.y = - _height;
			
 
				-					if ( this.position.y < - _height ) this.position.y = _height;
			
 
				-					if ( this.position.z > _depth ) this.position.z = - _depth;
			
 
				-					if ( this.position.z < - _depth ) this.position.z = _depth;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				this.avoid = function ( target ) {
			
 
				-
			
 
				-					var steer = new THREE.Vector3();
			
 
				-
			
 
				-					steer.copy( this.position );
			
 
				-					steer.sub( target );
			
 
				-
			
 
				-					steer.multiplyScalar( 1 / this.position.distanceToSquared( target ) );
			
 
				-
			
 
				-					return steer;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.repulse = function ( target ) {
			
 
				-
			
 
				-					var distance = this.position.distanceTo( target );
			
 
				-
			
 
				-					if ( distance < 150 ) {
			
 
				-
			
 
				-						var steer = new THREE.Vector3();
			
 
				-
			
 
				-						steer.subVectors( this.position, target );
			
 
				-						steer.multiplyScalar( 0.5 / distance );
			
 
				-
			
 
				-						_acceleration.add( steer );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.reach = function ( target, amount ) {
			
 
				-
			
 
				-					var steer = new THREE.Vector3();
			
 
				-
			
 
				-					steer.subVectors( target, this.position );
			
 
				-					steer.multiplyScalar( amount );
			
 
				-
			
 
				-					return steer;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.alignment = function ( boids ) {
			
 
				-
			
 
				-					var count = 0;
			
 
				-					var velSum = new THREE.Vector3();
			
 
				-
			
 
				-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
			
 
				-
			
 
				-						if ( Math.random() > 0.6 ) continue;
			
 
				-
			
 
				-						var boid = boids[ i ];
			
 
				-						var distance = boid.position.distanceTo( this.position );
			
 
				-
			
 
				-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
			
 
				-
			
 
				-							velSum.add( boid.velocity );
			
 
				-							count ++;
			
 
				-
			
 
				-						}
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					if ( count > 0 ) {
			
 
				-
			
 
				-						velSum.divideScalar( count );
			
 
				-
			
 
				-						var l = velSum.length();
			
 
				-
			
 
				-						if ( l > _maxSteerForce ) {
			
 
				-
			
 
				-							velSum.divideScalar( l / _maxSteerForce );
			
 
				-
			
 
				-						}
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					return velSum;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.cohesion = function ( boids ) {
			
 
				-
			
 
				-					var count = 0;
			
 
				-					var posSum = new THREE.Vector3();
			
 
				-					var steer = new THREE.Vector3();
			
 
				-
			
 
				-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
			
 
				-
			
 
				-						if ( Math.random() > 0.6 ) continue;
			
 
				-
			
 
				-						var boid = boids[ i ];
			
 
				-						var distance = boid.position.distanceTo( this.position );
			
 
				-
			
 
				-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
			
 
				-
			
 
				-							posSum.add( boid.position );
			
 
				-							count ++;
			
 
				-
			
 
				-						}
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					if ( count > 0 ) {
			
 
				-
			
 
				-						posSum.divideScalar( count );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					steer.subVectors( posSum, this.position );
			
 
				-
			
 
				-					var l = steer.length();
			
 
				-
			
 
				-					if ( l > _maxSteerForce ) {
			
 
				-
			
 
				-						steer.divideScalar( l / _maxSteerForce );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					return steer;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				this.separation = function ( boids ) {
			
 
				-
			
 
				-					var posSum = new THREE.Vector3();
			
 
				-					var repulse = new THREE.Vector3();
			
 
				-
			
 
				-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
			
 
				-
			
 
				-						if ( Math.random() > 0.6 ) continue;
			
 
				-
			
 
				-						var boid = boids[ i ];
			
 
				-						var distance = boid.position.distanceTo( this.position );
			
 
				-
			
 
				-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
			
 
				-
			
 
				-							repulse.subVectors( this.position, boid.position );
			
 
				-							repulse.normalize();
			
 
				-							repulse.divideScalar( distance );
			
 
				-							posSum.add( repulse );
			
 
				-
			
 
				-						}
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					return posSum;
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-			};
			
 
				-
			
 
				-			var SCREEN_WIDTH = window.innerWidth,
			
 
				-				SCREEN_HEIGHT = window.innerHeight,
			
 
				-				SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
			
 
				-				SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;
			
 
				-
			
 
				-			var camera, scene, renderer, birds, bird;
			
 
				-
			
 
				-			var boid, boids;
			
 
				-
			
 
				-			var stats;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
			
 
				-				camera.position.z = 450;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xffffff );
			
 
				-
			
 
				-				birds = [];
			
 
				-				boids = [];
			
 
				-
			
 
				-				for ( var i = 0; i < 200; i ++ ) {
			
 
				-
			
 
				-					boid = boids[ i ] = new Boid();
			
 
				-					boid.position.x = Math.random() * 400 - 200;
			
 
				-					boid.position.y = Math.random() * 400 - 200;
			
 
				-					boid.position.z = Math.random() * 400 - 200;
			
 
				-					boid.velocity.x = Math.random() * 2 - 1;
			
 
				-					boid.velocity.y = Math.random() * 2 - 1;
			
 
				-					boid.velocity.z = Math.random() * 2 - 1;
			
 
				-					boid.setAvoidWalls( true );
			
 
				-					boid.setWorldSize( 500, 500, 400 );
			
 
				-
			
 
				-					bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
			
 
				-					bird.phase = Math.floor( Math.random() * 62.83 );
			
 
				-					scene.add( bird );
			
 
				-
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.body.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				document.getElementById( 'container' ).appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );
			
 
				-
			
 
				-				for ( var i = 0, il = boids.length; i < il; i ++ ) {
			
 
				-
			
 
				-					boid = boids[ i ];
			
 
				-
			
 
				-					vector.z = boid.position.z;
			
 
				-
			
 
				-					boid.repulse( vector );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				stats.begin();
			
 
				-				render();
			
 
				-				stats.end();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				for ( var i = 0, il = birds.length; i < il; i ++ ) {
			
 
				-
			
 
				-					boid = boids[ i ];
			
 
				-					boid.run( boids );
			
 
				-
			
 
				-					bird = birds[ i ];
			
 
				-					bird.position.copy( boids[ i ].position );
			
 
				-
			
 
				-					var color = bird.material.color;
			
 
				-					color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
			
 
				-
			
 
				-					bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
			
 
				-					bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );
			
 
				-
			
 
				-					bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 ) ) % 62.83;
			
 
				-					bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_cube.html
+++ b/examples/canvas_geometry_cube.html
@@ -1,209 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - cube</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var cube, plane;
			
 
				-
			
 
				-			var targetRotation = 0;
			
 
				-			var targetRotationOnMouseDown = 0;
			
 
				-
			
 
				-			var mouseX = 0;
			
 
				-			var mouseXOnMouseDown = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = 'Drag to spin the cube';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.y = 150;
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-
			
 
				-				// Cube
			
 
				-
			
 
				-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
			
 
				-
			
 
				-				for ( var i = 0; i < geometry.faces.length; i += 2 ) {
			
 
				-
			
 
				-					var hex = Math.random() * 0xffffff;
			
 
				-					geometry.faces[ i ].color.setHex( hex );
			
 
				-					geometry.faces[ i + 1 ].color.setHex( hex );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
			
 
				-
			
 
				-				cube = new THREE.Mesh( geometry, material );
			
 
				-				cube.position.y = 150;
			
 
				-				scene.add( cube );
			
 
				-
			
 
				-				// Plane
			
 
				-
			
 
				-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
			
 
				-				geometry.rotateX( - Math.PI / 2 );
			
 
				-
			
 
				-				var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
			
 
				-
			
 
				-				plane = new THREE.Mesh( geometry, material );
			
 
				-				scene.add( plane );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-				mouseXOnMouseDown = event.clientX - windowHalfX;
			
 
				-				targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-
			
 
				-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseOut() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				stats.begin();
			
 
				-				render();
			
 
				-				stats.end();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_earth.html
+++ b/examples/canvas_geometry_earth.html
@@ -1,176 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - earth</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				color: #808080;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				text-align:center;
			
 
				-
			
 
				-				background-color: #ffffff;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				padding: 5px;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-
			
 
				-				color: #0080ff;
			
 
				-			}
			
 
				-
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth demo</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-			var group;
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xffffff );
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				// earth
			
 
				-
			
 
				-				var loader = new THREE.TextureLoader();
			
 
				-				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
			
 
				-
			
 
				-					var geometry = new THREE.SphereBufferGeometry( 200, 20, 20 );
			
 
				-
			
 
				-					var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
			
 
				-					var mesh = new THREE.Mesh( geometry, material );
			
 
				-					group.add( mesh );
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				// shadow
			
 
				-
			
 
				-				var canvas = document.createElement( 'canvas' );
			
 
				-				canvas.width = 128;
			
 
				-				canvas.height = 128;
			
 
				-
			
 
				-				var context = canvas.getContext( '2d' );
			
 
				-				var gradient = context.createRadialGradient(
			
 
				-					canvas.width / 2,
			
 
				-					canvas.height / 2,
			
 
				-					0,
			
 
				-					canvas.width / 2,
			
 
				-					canvas.height / 2,
			
 
				-					canvas.width / 2
			
 
				-				);
			
 
				-				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
			
 
				-				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
			
 
				-
			
 
				-				context.fillStyle = gradient;
			
 
				-				context.fillRect( 0, 0, canvas.width, canvas.height );
			
 
				-
			
 
				-				var texture = new THREE.CanvasTexture( canvas );
			
 
				-
			
 
				-				var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
			
 
				-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
			
 
				-
			
 
				-				var mesh = new THREE.Mesh( geometry, material );
			
 
				-				mesh.position.y = - 250;
			
 
				-				mesh.rotation.x = - Math.PI / 2;
			
 
				-				group.add( mesh );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = ( event.clientX - windowHalfX );
			
 
				-				mouseY = ( event.clientY - windowHalfY );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				group.rotation.y -= 0.005;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_hierarchy.html
+++ b/examples/canvas_geometry_hierarchy.html
@@ -1,136 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - hierarchy</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background:#fff;
			
 
				-				padding:0;
			
 
				-				margin:0;
			
 
				-				font-weight: bold;
			
 
				-				overflow:hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer, group;
			
 
				-
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xffffff );
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
			
 
				-				var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-
			
 
				-				for ( var i = 0; i < 200; i ++ ) {
			
 
				-
			
 
				-					var mesh = new THREE.Mesh( geometry, material );
			
 
				-					mesh.position.x = Math.random() * 2000 - 1000;
			
 
				-					mesh.position.y = Math.random() * 2000 - 1000;
			
 
				-					mesh.position.z = Math.random() * 2000 - 1000;
			
 
				-					mesh.rotation.x = Math.random() * 2 * Math.PI;
			
 
				-					mesh.rotation.y = Math.random() * 2 * Math.PI;
			
 
				-					mesh.matrixAutoUpdate = false;
			
 
				-					mesh.updateMatrix();
			
 
				-					group.add( mesh );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = ( event.clientX - windowHalfX ) * 10;
			
 
				-				mouseY = ( event.clientY - windowHalfY ) * 10;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * .05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				var currentSeconds = Date.now();
			
 
				-				group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
			
 
				-				group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
			
 
				-				group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_nurbs.html
+++ b/examples/canvas_geometry_nurbs.html
@@ -1,245 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - NURBS</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px;
			
 
				-				width: 100%;
			
 
				-				padding: 5px;
			
 
				-				text-align:center;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-		<canvas id="debug" style="position:absolute; left:100px"></canvas>
			
 
				-
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - NURBS curve example</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/curves/NURBSCurve.js"></script>
			
 
				-		<script src="js/curves/NURBSUtils.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-			var group;
			
 
				-
			
 
				-			var targetRotation = 0;
			
 
				-			var targetRotationOnMouseDown = 0;
			
 
				-
			
 
				-			var mouseX = 0;
			
 
				-			var mouseXOnMouseDown = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '30px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = 'Drag to spin';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.set( 0, 150, 500 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				group.position.y = 50;
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				// NURBS curve
			
 
				-
			
 
				-				var nurbsControlPoints = [];
			
 
				-				var nurbsKnots = [];
			
 
				-				var nurbsDegree = 3;
			
 
				-
			
 
				-				for ( var i = 0; i <= nurbsDegree; i ++ ) {
			
 
				-
			
 
				-					nurbsKnots.push( 0 );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				for ( var i = 0, j = 20; i < j; i ++ ) {
			
 
				-
			
 
				-					nurbsControlPoints.push(
			
 
				-						new THREE.Vector4(
			
 
				-							Math.random() * 400 - 200,
			
 
				-							Math.random() * 400,
			
 
				-							Math.random() * 400 - 200,
			
 
				-							1 // weight of control point: higher means stronger attraction
			
 
				-						)
			
 
				-					);
			
 
				-
			
 
				-					var knot = ( i + 1 ) / ( j - nurbsDegree );
			
 
				-					nurbsKnots.push( THREE.Math.clamp( knot, 0, 1 ) );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var nurbsCurve = new THREE.NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
			
 
				-
			
 
				-				var nurbsGeometry = new THREE.BufferGeometry();
			
 
				-				nurbsGeometry.setFromPoints( nurbsCurve.getPoints( 200 ) );
			
 
				-
			
 
				-				var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333 } );
			
 
				-
			
 
				-				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
			
 
				-				nurbsLine.position.set( 0, - 100, 0 );
			
 
				-				group.add( nurbsLine );
			
 
				-
			
 
				-				var nurbsControlPointsGeometry = new THREE.BufferGeometry();
			
 
				-				nurbsControlPointsGeometry.setFromPoints( nurbsCurve.controlPoints );
			
 
				-
			
 
				-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, opacity: 0.25 } );
			
 
				-
			
 
				-				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
			
 
				-				nurbsControlPointsLine.position.copy( nurbsLine.position );
			
 
				-
			
 
				-				group.add( nurbsControlPointsLine );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-				mouseXOnMouseDown = event.clientX - windowHalfX;
			
 
				-				targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-
			
 
				-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseOut() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_panorama.html
+++ b/examples/canvas_geometry_panorama.html
@@ -1,237 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - panorama demo</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: rgb(200,200,200);
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				color: #ffffff;
			
 
				-				padding: 5px;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				font-weight: bold;
			
 
				-				text-align:center;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #ffffff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var texture_placeholder,
			
 
				-				isUserInteracting = false,
			
 
				-				onPointerDownPointerX = 0, onPointerDownPointerY = 0,
			
 
				-				onPointerDownLon = 0, onPointerDownLat = 0,
			
 
				-				lon = 90, lat = 0, phi = 0, theta = 0,
			
 
				-				target = new THREE.Vector3();
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container, mesh;
			
 
				-
			
 
				-				container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				texture_placeholder = document.createElement( 'canvas' );
			
 
				-				texture_placeholder.width = 128;
			
 
				-				texture_placeholder.height = 128;
			
 
				-
			
 
				-				var context = texture_placeholder.getContext( '2d' );
			
 
				-				context.fillStyle = 'rgb( 200, 200, 200 )';
			
 
				-				context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );
			
 
				-
			
 
				-				var materials = [
			
 
				-
			
 
				-					loadTexture( 'textures/cube/skybox/px.jpg' ), // right
			
 
				-					loadTexture( 'textures/cube/skybox/nx.jpg' ), // left
			
 
				-					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
			
 
				-					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
			
 
				-					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
			
 
				-					loadTexture( 'textures/cube/skybox/nz.jpg' ) // front
			
 
				-
			
 
				-				];
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 300, 300, 300, 7, 7, 7 );
			
 
				-				geometry.scale( - 1, 1, 1 );
			
 
				-
			
 
				-				mesh = new THREE.Mesh( geometry, materials );
			
 
				-				scene.add( mesh );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
			
 
				-
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function loadTexture( path ) {
			
 
				-
			
 
				-				var texture = new THREE.Texture( texture_placeholder );
			
 
				-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
			
 
				-
			
 
				-				var image = new Image();
			
 
				-				image.onload = function () {
			
 
				-
			
 
				-					texture.image = this;
			
 
				-					texture.needsUpdate = true;
			
 
				-
			
 
				-				};
			
 
				-				image.src = path;
			
 
				-
			
 
				-				return material;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				isUserInteracting = true;
			
 
				-
			
 
				-				onPointerDownPointerX = event.clientX;
			
 
				-				onPointerDownPointerY = event.clientY;
			
 
				-
			
 
				-				onPointerDownLon = lon;
			
 
				-				onPointerDownLat = lat;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				if ( isUserInteracting === true ) {
			
 
				-
			
 
				-					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
			
 
				-					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				isUserInteracting = false;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseWheel( event ) {
			
 
				-
			
 
				-				var fov = camera.fov + event.deltaY * 0.05;
			
 
				-
			
 
				-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
			
 
				-
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					onPointerDownPointerX = event.touches[ 0 ].pageX;
			
 
				-					onPointerDownPointerY = event.touches[ 0 ].pageY;
			
 
				-
			
 
				-					onPointerDownLon = lon;
			
 
				-					onPointerDownLat = lat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					lon = ( onPointerDownPointerX - event.touches[ 0 ].pageX ) * 0.1 + onPointerDownLon;
			
 
				-					lat = ( event.touches[ 0 ].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-				update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function update() {
			
 
				-
			
 
				-				if ( isUserInteracting === false ) {
			
 
				-
			
 
				-					lon += 0.1;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				lat = Math.max( - 85, Math.min( 85, lat ) );
			
 
				-				phi = THREE.Math.degToRad( 90 - lat );
			
 
				-				theta = THREE.Math.degToRad( lon );
			
 
				-
			
 
				-				target.x = 500 * Math.sin( phi ) * Math.cos( theta );
			
 
				-				target.y = 500 * Math.cos( phi );
			
 
				-				target.z = 500 * Math.sin( phi ) * Math.sin( theta );
			
 
				-
			
 
				-				camera.lookAt( target );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_panorama_fisheye.html
+++ b/examples/canvas_geometry_panorama_fisheye.html
@@ -1,248 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - panorama fisheye demo</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: rgb(200,200,200);
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				color: #ffffff;
			
 
				-				padding: 5px;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				font-weight: bold;
			
 
				-				text-align:center;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #ffffff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - panorama fisheye demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>. (mousewheel: change fov)</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var texture_placeholder,
			
 
				-				isUserInteracting = false,
			
 
				-				onPointerDownPointerX = 0, onPointerDownPointerY = 0,
			
 
				-				onPointerDownLon = 0, onPointerDownLat = 0,
			
 
				-				lon = 90, lat = 0, phi = 0, theta = 0,
			
 
				-				target = new THREE.Vector3();
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container, mesh;
			
 
				-
			
 
				-				container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				texture_placeholder = document.createElement( 'canvas' );
			
 
				-				texture_placeholder.width = 128;
			
 
				-				texture_placeholder.height = 128;
			
 
				-
			
 
				-				var context = texture_placeholder.getContext( '2d' );
			
 
				-				context.fillStyle = 'rgb( 200, 200, 200 )';
			
 
				-				context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );
			
 
				-
			
 
				-				var materials = [
			
 
				-
			
 
				-					loadTexture( 'textures/cube/skybox/px.jpg' ), // right
			
 
				-					loadTexture( 'textures/cube/skybox/nx.jpg' ), // left
			
 
				-					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
			
 
				-					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
			
 
				-					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
			
 
				-					loadTexture( 'textures/cube/skybox/nz.jpg' ) // front
			
 
				-
			
 
				-				];
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 300, 300, 300, 7, 7, 7 );
			
 
				-				geometry.scale( - 1, 1, 1 );
			
 
				-
			
 
				-				mesh = new THREE.Mesh( geometry, materials );
			
 
				-				scene.add( mesh );
			
 
				-
			
 
				-				var vec = new THREE.Vector3();
			
 
				-				var positions = mesh.geometry.attributes.position;
			
 
				-
			
 
				-				for ( var i = 0, l = positions.count; i < l; i ++ ) {
			
 
				-
			
 
				-					vec.fromBufferAttribute( positions, i );
			
 
				-					vec.setLength( 550 );
			
 
				-					positions.setXYZ( i, vec.x, vec.y, vec.z );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
			
 
				-
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function loadTexture( path ) {
			
 
				-
			
 
				-				var texture = new THREE.Texture( texture_placeholder );
			
 
				-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
			
 
				-
			
 
				-				var image = new Image();
			
 
				-				image.onload = function () {
			
 
				-
			
 
				-					texture.image = this;
			
 
				-					texture.needsUpdate = true;
			
 
				-
			
 
				-				};
			
 
				-				image.src = path;
			
 
				-
			
 
				-				return material;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				isUserInteracting = true;
			
 
				-
			
 
				-				onPointerDownPointerX = event.clientX;
			
 
				-				onPointerDownPointerY = event.clientY;
			
 
				-
			
 
				-				onPointerDownLon = lon;
			
 
				-				onPointerDownLat = lat;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				if ( isUserInteracting === true ) {
			
 
				-
			
 
				-					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
			
 
				-					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				isUserInteracting = false;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseWheel( event ) {
			
 
				-
			
 
				-				var fov = camera.fov + event.deltaY * 0.05;
			
 
				-
			
 
				-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
			
 
				-
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					onPointerDownPointerX = event.touches[ 0 ].pageX;
			
 
				-					onPointerDownPointerY = event.touches[ 0 ].pageY;
			
 
				-
			
 
				-					onPointerDownLon = lon;
			
 
				-					onPointerDownLat = lat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					lon = ( onPointerDownPointerX - event.touches[ 0 ].pageX ) * 0.1 + onPointerDownLon;
			
 
				-					lat = ( event.touches[ 0 ].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-				update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function update() {
			
 
				-
			
 
				-				if ( isUserInteracting === false ) {
			
 
				-
			
 
				-					lon += 0.1;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				lat = Math.max( - 85, Math.min( 85, lat ) );
			
 
				-				phi = THREE.Math.degToRad( 90 - lat );
			
 
				-				theta = THREE.Math.degToRad( lon );
			
 
				-
			
 
				-				target.x = 500 * Math.sin( phi ) * Math.cos( theta );
			
 
				-				target.y = 500 * Math.cos( phi );
			
 
				-				target.z = 500 * Math.sin( phi ) * Math.sin( theta );
			
 
				-
			
 
				-				camera.position.copy( target ).negate();
			
 
				-				camera.lookAt( target );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_shapes.html
+++ b/examples/canvas_geometry_shapes.html
@@ -1,409 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - shapes</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px;
			
 
				-				width: 100%;
			
 
				-				padding: 5px;
			
 
				-				text-align:center;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-		<canvas id="debug" style="position:absolute; left:100px"></canvas>
			
 
				-
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shape geometry</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer, group;
			
 
				-
			
 
				-			var targetRotation = 0;
			
 
				-			var targetRotationOnMouseDown = 0;
			
 
				-
			
 
				-			var mouseX = 0;
			
 
				-			var mouseXOnMouseDown = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.set( 0, 150, 500 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				group.position.y = 50;
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				function addShape( shape, color, x, y, z, rx, ry, rz, s ) {
			
 
				-
			
 
				-					// flat shape
			
 
				-
			
 
				-					var geometry = new THREE.ShapeBufferGeometry( shape );
			
 
				-					var material = new THREE.MeshBasicMaterial( { color: color, overdraw: 0.5 } );
			
 
				-
			
 
				-					var mesh = new THREE.Mesh( geometry, material );
			
 
				-					mesh.position.set( x, y, z );
			
 
				-					mesh.rotation.set( rx, ry, rz );
			
 
				-					mesh.scale.set( s, s, s );
			
 
				-					group.add( mesh );
			
 
				-
			
 
				-					// line
			
 
				-
			
 
				-					var points = shape.getPoints();
			
 
				-					var geometry = new THREE.BufferGeometry().setFromPoints( points );
			
 
				-
			
 
				-					var material = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333 } );
			
 
				-
			
 
				-					var line = new THREE.Line( geometry, material );
			
 
				-					line.position.set( x, y, z );
			
 
				-					line.rotation.set( rx, ry, rz );
			
 
				-					line.scale.set( s, s, s );
			
 
				-					group.add( line );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-
			
 
				-				// California
			
 
				-
			
 
				-				var californiaPts = [];
			
 
				-
			
 
				-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 450, 300 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 392, 392 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 266, 438 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 190, 570 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 190, 600 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 160, 620 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 160, 650 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 180, 640 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 165, 680 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 150, 670 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 90, 737 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 80, 795 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 50, 835 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 64, 870 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 60, 945 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 300, 945 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 300, 743 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 600, 473 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 626, 425 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 600, 370 ) );
			
 
				-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
			
 
				-
			
 
				-				var californiaShape = new THREE.Shape( californiaPts );
			
 
				-
			
 
				-
			
 
				-				// Triangle
			
 
				-
			
 
				-				var triangleShape = new THREE.Shape();
			
 
				-				triangleShape.moveTo( 80, 20 );
			
 
				-				triangleShape.lineTo( 40, 80 );
			
 
				-				triangleShape.lineTo( 120, 80 );
			
 
				-				triangleShape.lineTo( 80, 20 ); // close path
			
 
				-
			
 
				-
			
 
				-				// Heart
			
 
				-
			
 
				-				var x = 0, y = 0;
			
 
				-
			
 
				-				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
			
 
				-
			
 
				-				heartShape.moveTo( x + 25, y + 25 );
			
 
				-				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
			
 
				-				heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
			
 
				-				heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
			
 
				-				heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
			
 
				-				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
			
 
				-				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
			
 
				-
			
 
				-
			
 
				-				// Square
			
 
				-
			
 
				-				var sqLength = 80;
			
 
				-
			
 
				-				var squareShape = new THREE.Shape();
			
 
				-				squareShape.moveTo( 0, 0 );
			
 
				-				squareShape.lineTo( 0, sqLength );
			
 
				-				squareShape.lineTo( sqLength, sqLength );
			
 
				-				squareShape.lineTo( sqLength, 0 );
			
 
				-				squareShape.lineTo( 0, 0 );
			
 
				-
			
 
				-
			
 
				-				// Rectangle
			
 
				-
			
 
				-				var rectLength = 120, rectWidth = 40;
			
 
				-
			
 
				-				var rectShape = new THREE.Shape();
			
 
				-				rectShape.moveTo( 0, 0 );
			
 
				-				rectShape.lineTo( 0, rectWidth );
			
 
				-				rectShape.lineTo( rectLength, rectWidth );
			
 
				-				rectShape.lineTo( rectLength, 0 );
			
 
				-				rectShape.lineTo( 0, 0 );
			
 
				-
			
 
				-
			
 
				-				// Rounded rectangle
			
 
				-
			
 
				-				var roundedRectShape = new THREE.Shape();
			
 
				-
			
 
				-				( function roundedRect( ctx, x, y, width, height, radius ) {
			
 
				-
			
 
				-					ctx.moveTo( x, y + radius );
			
 
				-					ctx.lineTo( x, y + height - radius );
			
 
				-					ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
			
 
				-					ctx.lineTo( x + width - radius, y + height );
			
 
				-					ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
			
 
				-					ctx.lineTo( x + width, y + radius );
			
 
				-					ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
			
 
				-					ctx.lineTo( x + radius, y );
			
 
				-					ctx.quadraticCurveTo( x, y, x, y + radius );
			
 
				-
			
 
				-				} )( roundedRectShape, 0, 0, 50, 50, 20 );
			
 
				-
			
 
				-
			
 
				-				// Circle
			
 
				-
			
 
				-				var circleRadius = 40;
			
 
				-				var circleShape = new THREE.Shape();
			
 
				-				circleShape.moveTo( 0, circleRadius );
			
 
				-				circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
			
 
				-				circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
			
 
				-				circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 );
			
 
				-				circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );
			
 
				-
			
 
				-
			
 
				-				// Fish
			
 
				-
			
 
				-				x = y = 0;
			
 
				-
			
 
				-				var fishShape = new THREE.Shape();
			
 
				-
			
 
				-				fishShape.moveTo( x, y );
			
 
				-				fishShape.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 );
			
 
				-				fishShape.quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 );
			
 
				-				fishShape.quadraticCurveTo( x + 115, y, x + 115, y + 40 );
			
 
				-				fishShape.quadraticCurveTo( x + 100, y + 10, x + 90, y + 10 );
			
 
				-				fishShape.quadraticCurveTo( x + 50, y + 80, x, y );
			
 
				-
			
 
				-
			
 
				-				// Arc circle
			
 
				-
			
 
				-				var arcShape = new THREE.Shape();
			
 
				-				arcShape.moveTo( 50, 10 );
			
 
				-				arcShape.absarc( 10, 10, 40, 0, Math.PI * 2, false );
			
 
				-
			
 
				-				var holePath = new THREE.Path();
			
 
				-				holePath.moveTo( 20, 10 );
			
 
				-				holePath.absarc( 10, 10, 10, 0, Math.PI * 2, true );
			
 
				-				arcShape.holes.push( holePath );
			
 
				-
			
 
				-
			
 
				-				// Smiley
			
 
				-
			
 
				-				var smileyShape = new THREE.Shape();
			
 
				-				smileyShape.moveTo( 80, 40 );
			
 
				-				smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );
			
 
				-
			
 
				-				var smileyEye1Path = new THREE.Path();
			
 
				-				smileyEye1Path.moveTo( 35, 20 );
			
 
				-				// smileyEye1Path.absarc( 25, 20, 10, 0, Math.PI*2, true );
			
 
				-				smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
			
 
				-
			
 
				-				smileyShape.holes.push( smileyEye1Path );
			
 
				-
			
 
				-				var smileyEye2Path = new THREE.Path();
			
 
				-				smileyEye2Path.moveTo( 65, 20 );
			
 
				-				smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI * 2, true );
			
 
				-				smileyShape.holes.push( smileyEye2Path );
			
 
				-
			
 
				-				var smileyMouthPath = new THREE.Path();
			
 
				-				// ugly box mouth
			
 
				-				// smileyMouthPath.moveTo( 20, 40 );
			
 
				-				// smileyMouthPath.lineTo( 60, 40 );
			
 
				-				// smileyMouthPath.lineTo( 60, 60 );
			
 
				-				// smileyMouthPath.lineTo( 20, 60 );
			
 
				-				// smileyMouthPath.lineTo( 20, 40 );
			
 
				-
			
 
				-				smileyMouthPath.moveTo( 20, 40 );
			
 
				-				smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
			
 
				-				smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
			
 
				-				smileyMouthPath.quadraticCurveTo( 40, 80, 20, 60 );
			
 
				-				smileyMouthPath.quadraticCurveTo( 5, 50, 20, 40 );
			
 
				-
			
 
				-				smileyShape.holes.push( smileyMouthPath );
			
 
				-
			
 
				-
			
 
				-				// Spline shape + path extrusion
			
 
				-
			
 
				-				var splinepts = [];
			
 
				-				splinepts.push( new THREE.Vector2( 350, 100 ) );
			
 
				-				splinepts.push( new THREE.Vector2( 400, 450 ) );
			
 
				-				splinepts.push( new THREE.Vector2( - 140, 350 ) );
			
 
				-				splinepts.push( new THREE.Vector2( 0, 0 ) );
			
 
				-
			
 
				-				var splineShape = new THREE.Shape( );
			
 
				-				splineShape.moveTo( 0, 0 );
			
 
				-				splineShape.splineThru( splinepts );
			
 
				-
			
 
				-
			
 
				-				// addShape( shape, color, x, y, z, rx, ry,rz, s );
			
 
				-
			
 
				-				addShape( californiaShape, 0xffaa00, - 300, - 100, 0, 0, 0, 0, 0.25 );
			
 
				-				addShape( triangleShape, 0xffee00, - 180, 0, 0, 0, 0, 0, 1 );
			
 
				-				addShape( roundedRectShape, 0x005500, - 150, 150, 0, 0, 0, 0, 1 );
			
 
				-				addShape( squareShape, 0x0055ff, 150, 100, 0, 0, 0, 0, 1 );
			
 
				-				addShape( heartShape, 0xff1100, 60, 100, 0, 0, 0, Math.PI, 1 );
			
 
				-				addShape( circleShape, 0x00ff11, 120, 250, 0, 0, 0, 0, 1 );
			
 
				-				addShape( fishShape, 0x222222, - 60, 200, 0, 0, 0, 0, 1 );
			
 
				-				addShape( smileyShape, 0xee00ff, - 200, 250, 0, 0, 0, Math.PI, 1 );
			
 
				-				addShape( arcShape, 0xbb4422, 150, 0, 0, 0, 0, 0, 1 );
			
 
				-				addShape( splineShape, 0x888888, - 50, - 100, 0, 0, 0, 0, 0.2 );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				renderer.sortElements = false;
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-				mouseXOnMouseDown = event.clientX - windowHalfX;
			
 
				-				targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-
			
 
				-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseOut() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_terrain.html
+++ b/examples/canvas_geometry_terrain.html
@@ -1,218 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - terrain</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				color: #71544e;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				text-align:center;
			
 
				-
			
 
				-				background-color: #bfd1e5;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				padding: 5px;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-
			
 
				-				color: #b07861;
			
 
				-			}
			
 
				-
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"><br /><br /><br /><br /><br />Generating...</div>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - terrain demo. <a href="canvas_geometry_terrain.html">generate another</a></div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script src="js/ImprovedNoise.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var mesh;
			
 
				-
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xbfd1e5 );
			
 
				-
			
 
				-				var data = generateHeight( 1024, 1024 );
			
 
				-				var texture = new THREE.CanvasTexture( generateTexture( data, 1024, 1024 ) );
			
 
				-				var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide, overdraw: 0.5 } );
			
 
				-
			
 
				-				var quality = 16, step = 1024 / quality;
			
 
				-
			
 
				-				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000, quality - 1, quality - 1 );
			
 
				-				geometry.rotateX( - Math.PI / 2 );
			
 
				-
			
 
				-				var positions = geometry.attributes.position;
			
 
				-
			
 
				-				for ( var i = 0, l = positions.count; i < l; i ++ ) {
			
 
				-
			
 
				-					var x = i % quality, y = Math.floor( i / quality );
			
 
				-					positions.setY( i, data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128 );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				mesh = new THREE.Mesh( geometry, material );
			
 
				-				scene.add( mesh );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-				container.innerHTML = "";
			
 
				-
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function generateHeight( width, height ) {
			
 
				-
			
 
				-				var data = new Uint8Array( width * height ), perlin = new ImprovedNoise(),
			
 
				-					size = width * height, quality = 2, z = Math.random() * 100;
			
 
				-
			
 
				-				for ( var j = 0; j < 4; j ++ ) {
			
 
				-
			
 
				-					quality *= 4;
			
 
				-
			
 
				-					for ( var i = 0; i < size; i ++ ) {
			
 
				-
			
 
				-						var x = i % width, y = ~ ~ ( i / width );
			
 
				-						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * 0.5 ) * quality + 10;
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				return data;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function generateTexture( data, width, height ) {
			
 
				-
			
 
				-				var canvas, context, image, imageData, vector3, sun, shade;
			
 
				-
			
 
				-				vector3 = new THREE.Vector3( 0, 0, 0 );
			
 
				-
			
 
				-				sun = new THREE.Vector3( 1, 1, 1 );
			
 
				-				sun.normalize();
			
 
				-
			
 
				-				canvas = document.createElement( 'canvas' );
			
 
				-				canvas.width = width;
			
 
				-				canvas.height = height;
			
 
				-
			
 
				-				context = canvas.getContext( '2d' );
			
 
				-				context.fillStyle = '#000';
			
 
				-				context.fillRect( 0, 0, width, height );
			
 
				-
			
 
				-				image = context.getImageData( 0, 0, width, height );
			
 
				-				imageData = image.data;
			
 
				-
			
 
				-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
			
 
				-
			
 
				-					vector3.x = data[ j - 1 ] - data[ j + 1 ];
			
 
				-					vector3.y = 2;
			
 
				-					vector3.z = data[ j - width ] - data[ j + width ];
			
 
				-					vector3.normalize();
			
 
				-
			
 
				-					shade = vector3.dot( sun );
			
 
				-
			
 
				-					imageData[ i ] = ( 96 + shade * 128 ) * ( data[ j ] * 0.007 );
			
 
				-					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( data[ j ] * 0.007 );
			
 
				-					imageData[ i + 2 ] = ( shade * 96 ) * ( data[ j ] * 0.007 );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				context.putImageData( image, 0, 0 );
			
 
				-
			
 
				-				return canvas;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05 + 15;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_geometry_text.html
+++ b/examples/canvas_geometry_text.html
@@ -1,229 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - geometry - text</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var group;
			
 
				-
			
 
				-			var targetRotation = 0;
			
 
				-			var targetRotationOnMouseDown = 0;
			
 
				-
			
 
				-			var mouseX = 0;
			
 
				-			var mouseXOnMouseDown = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-			var loader = new THREE.FontLoader();
			
 
				-			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
			
 
				-
			
 
				-				init( font );
			
 
				-				animate();
			
 
				-
			
 
				-			} );
			
 
				-
			
 
				-			function init( font ) {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = 'Simple Dynamic 3D Text Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br>Drag to spin the text';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.set( 0, 150, 500 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				// Get text from hash
			
 
				-
			
 
				-				var theText = "Hello three.js! :)";
			
 
				-
			
 
				-				var hash = document.location.hash.substr( 1 );
			
 
				-
			
 
				-				if ( hash.length !== 0 ) {
			
 
				-
			
 
				-					theText = hash;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var geometry = new THREE.TextBufferGeometry( theText, {
			
 
				-
			
 
				-					font: font,
			
 
				-					size: 80,
			
 
				-					height: 20,
			
 
				-					curveSegments: 2
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				geometry.computeBoundingBox();
			
 
				-
			
 
				-				var centerOffset = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
			
 
				-
			
 
				-				var materials = [
			
 
				-					new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
			
 
				-					new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
			
 
				-				];
			
 
				-
			
 
				-				var mesh = new THREE.Mesh( geometry, materials );
			
 
				-
			
 
				-				mesh.position.x = centerOffset;
			
 
				-				mesh.position.y = 100;
			
 
				-				mesh.position.z = 0;
			
 
				-
			
 
				-				mesh.rotation.x = 0;
			
 
				-				mesh.rotation.y = Math.PI * 2;
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				group.add( mesh );
			
 
				-
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-				mouseXOnMouseDown = event.clientX - windowHalfX;
			
 
				-				targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-
			
 
				-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseUp() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseOut() {
			
 
				-
			
 
				-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
			
 
				-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotationOnMouseDown = targetRotation;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_interactive_cubes.html
+++ b/examples/canvas_interactive_cubes.html
@@ -1,199 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - interactive - cubes</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-			var particleMaterial;
			
 
				-
			
 
				-			var raycaster;
			
 
				-			var mouse;
			
 
				-
			
 
				-			var objects = [];
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - clickable objects';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.set( 0, 300, 500 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
			
 
				-
			
 
				-				for ( var i = 0; i < 10; i ++ ) {
			
 
				-
			
 
				-					var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
			
 
				-					object.position.x = Math.random() * 800 - 400;
			
 
				-					object.position.y = Math.random() * 800 - 400;
			
 
				-					object.position.z = Math.random() * 800 - 400;
			
 
				-
			
 
				-					object.scale.x = Math.random() * 2 + 1;
			
 
				-					object.scale.y = Math.random() * 2 + 1;
			
 
				-					object.scale.z = Math.random() * 2 + 1;
			
 
				-
			
 
				-					object.rotation.x = Math.random() * 2 * Math.PI;
			
 
				-					object.rotation.y = Math.random() * 2 * Math.PI;
			
 
				-					object.rotation.z = Math.random() * 2 * Math.PI;
			
 
				-
			
 
				-					scene.add( object );
			
 
				-
			
 
				-					objects.push( object );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				particleMaterial = new THREE.SpriteCanvasMaterial( {
			
 
				-
			
 
				-					color: 0x000000,
			
 
				-					program: function ( context ) {
			
 
				-
			
 
				-						context.beginPath();
			
 
				-						context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-						context.fill();
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				raycaster = new THREE.Raycaster();
			
 
				-				mouse = new THREE.Vector2();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				event.clientX = event.touches[ 0 ].clientX;
			
 
				-				event.clientY = event.touches[ 0 ].clientY;
			
 
				-				onDocumentMouseDown( event );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
			
 
				-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
			
 
				-
			
 
				-				raycaster.setFromCamera( mouse, camera );
			
 
				-
			
 
				-				var intersects = raycaster.intersectObjects( objects );
			
 
				-
			
 
				-				if ( intersects.length > 0 ) {
			
 
				-
			
 
				-					intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
			
 
				-
			
 
				-					var particle = new THREE.Sprite( particleMaterial );
			
 
				-					particle.position.copy( intersects[ 0 ].point );
			
 
				-					particle.scale.x = particle.scale.y = 16;
			
 
				-					scene.add( particle );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				/*
			
 
				-				// Parse all the faces
			
 
				-				for ( var i in intersects ) {
			
 
				-
			
 
				-					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
			
 
				-
			
 
				-				}
			
 
				-				*/
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			var radius = 600;
			
 
				-			var theta = 0;
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				theta += 0.1;
			
 
				-
			
 
				-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_interactive_cubes_tween.html
+++ b/examples/canvas_interactive_cubes_tween.html
@@ -1,186 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - interactive - cubes tween</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-		<script src="js/libs/tween.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var raycaster;
			
 
				-			var mouse;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - clickable objects';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.y = 300;
			
 
				-				camera.position.z = 500;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
			
 
				-
			
 
				-				for ( var i = 0; i < 20; i ++ ) {
			
 
				-
			
 
				-					var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
			
 
				-					object.position.x = Math.random() * 800 - 400;
			
 
				-					object.position.y = Math.random() * 800 - 400;
			
 
				-					object.position.z = Math.random() * 800 - 400;
			
 
				-					object.scale.x = Math.random() * 2 + 1;
			
 
				-					object.scale.y = Math.random() * 2 + 1;
			
 
				-					object.scale.z = Math.random() * 2 + 1;
			
 
				-					object.rotation.x = Math.random() * 2 * Math.PI;
			
 
				-					object.rotation.y = Math.random() * 2 * Math.PI;
			
 
				-					object.rotation.z = Math.random() * 2 * Math.PI;
			
 
				-					scene.add( object );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				raycaster = new THREE.Raycaster();
			
 
				-				mouse = new THREE.Vector2();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				event.clientX = event.touches[ 0 ].clientX;
			
 
				-				event.clientY = event.touches[ 0 ].clientY;
			
 
				-				onDocumentMouseDown( event );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
			
 
				-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
			
 
				-
			
 
				-				raycaster.setFromCamera( mouse, camera );
			
 
				-
			
 
				-				var intersects = raycaster.intersectObjects( scene.children );
			
 
				-
			
 
				-				if ( intersects.length > 0 ) {
			
 
				-
			
 
				-					new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
			
 
				-						x: Math.random() * 800 - 400,
			
 
				-						y: Math.random() * 800 - 400,
			
 
				-						z: Math.random() * 800 - 400 }, 2000 )
			
 
				-						.easing( TWEEN.Easing.Elastic.Out ).start();
			
 
				-
			
 
				-					new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
			
 
				-						x: Math.random() * 2 * Math.PI,
			
 
				-						y: Math.random() * 2 * Math.PI,
			
 
				-						z: Math.random() * 2 * Math.PI }, 2000 )
			
 
				-						.easing( TWEEN.Easing.Elastic.Out ).start();
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				/*
			
 
				-				// Parse all the faces
			
 
				-				for ( var i in intersects ) {
			
 
				-
			
 
				-					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
			
 
				-
			
 
				-				}
			
 
				-				*/
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			var radius = 600;
			
 
				-			var theta = 0;
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				TWEEN.update();
			
 
				-
			
 
				-				theta += 0.1;
			
 
				-
			
 
				-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_interactive_sprites.html
+++ b/examples/canvas_interactive_sprites.html
@@ -1,206 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - interactive sprites</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var raycaster;
			
 
				-			var mouse;
			
 
				-
			
 
				-			var PI2 = Math.PI * 2;
			
 
				-
			
 
				-			/*
			
 
				-			function programFill( context ) {
			
 
				-
			
 
				-				context.fillRect( - 0.5, - 0.5, 1, 1 );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function programStroke( context ) {
			
 
				-
			
 
				-				context.lineWidth = 0.025;
			
 
				-				context.strokeRect( - 0.5, - 0.5, 1, 1 );
			
 
				-
			
 
				-			}
			
 
				-			*/
			
 
				-
			
 
				-			function programFill( context ) {
			
 
				-
			
 
				-				context.beginPath();
			
 
				-				context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-				context.fill();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function programStroke( context ) {
			
 
				-
			
 
				-				context.lineWidth = 0.025;
			
 
				-				context.beginPath();
			
 
				-				context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-				context.stroke();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			var INTERSECTED;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - interactive sprites';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.set( 0, 300, 500 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				for ( var i = 0; i < 100; i ++ ) {
			
 
				-
			
 
				-					var material = new THREE.SpriteCanvasMaterial( {
			
 
				-						color: Math.random() * 0x808080 + 0x808080,
			
 
				-						program: programStroke
			
 
				-					} );
			
 
				-
			
 
				-					var sprite = new THREE.Sprite( material );
			
 
				-					sprite.position.x = Math.random() * 800 - 400;
			
 
				-					sprite.position.y = Math.random() * 800 - 400;
			
 
				-					sprite.position.z = Math.random() * 800 - 400;
			
 
				-					sprite.scale.setScalar( Math.random() * 20 + 20 );
			
 
				-					scene.add( sprite );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				raycaster = new THREE.Raycaster();
			
 
				-				mouse = new THREE.Vector2();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
			
 
				-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			var radius = 600;
			
 
				-			var theta = 0;
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				// rotate camera
			
 
				-
			
 
				-				theta += 0.1;
			
 
				-
			
 
				-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				camera.updateMatrixWorld();
			
 
				-
			
 
				-				// find intersections
			
 
				-
			
 
				-				raycaster.setFromCamera( mouse, camera );
			
 
				-
			
 
				-				var intersects = raycaster.intersectObjects( scene.children );
			
 
				-
			
 
				-				if ( intersects.length > 0 ) {
			
 
				-
			
 
				-					var object = intersects[ 0 ].object;
			
 
				-
			
 
				-					if ( INTERSECTED !== object ) {
			
 
				-
			
 
				-						if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
			
 
				-
			
 
				-						INTERSECTED = object;
			
 
				-						INTERSECTED.material.program = programFill;
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} else if ( INTERSECTED ) {
			
 
				-
			
 
				-					INTERSECTED.material.program = programStroke;
			
 
				-					INTERSECTED = null;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_interactive_voxelpainter.html
+++ b/examples/canvas_interactive_voxelpainter.html
@@ -1,202 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - interactive - voxel painter</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container;
			
 
				-			var camera, scene, renderer;
			
 
				-			var plane;
			
 
				-
			
 
				-			var mouse, raycaster, isShiftDown = false;
			
 
				-
			
 
				-			var cubeGeometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
			
 
				-			var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
			
 
				-
			
 
				-			var objects = [];
			
 
				-
			
 
				-			init();
			
 
				-			render();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - voxel painter<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <a href="javascript:save()">save .png</a>';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.set( 500, 800, 1300 );
			
 
				-				camera.lookAt( 0, 0, 0 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				// Grid
			
 
				-
			
 
				-				var gridHelper = new THREE.GridHelper( 1000, 20 );
			
 
				-				scene.add( gridHelper );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				raycaster = new THREE.Raycaster();
			
 
				-				mouse = new THREE.Vector2();
			
 
				-
			
 
				-				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
			
 
				-				geometry.rotateX( - Math.PI / 2 );
			
 
				-
			
 
				-				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
			
 
				-				scene.add( plane );
			
 
				-
			
 
				-				objects.push( plane );
			
 
				-
			
 
				-				// Lights
			
 
				-
			
 
				-				var ambientLight = new THREE.AmbientLight( 0x606060 );
			
 
				-				scene.add( ambientLight );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
			
 
				-				directionalLight.position.x = Math.random() - 0.5;
			
 
				-				directionalLight.position.y = Math.random() - 0.5;
			
 
				-				directionalLight.position.z = Math.random() - 0.5;
			
 
				-				directionalLight.position.normalize();
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( 0x808080 );
			
 
				-				directionalLight.position.x = Math.random() - 0.5;
			
 
				-				directionalLight.position.y = Math.random() - 0.5;
			
 
				-				directionalLight.position.z = Math.random() - 0.5;
			
 
				-				directionalLight.position.normalize();
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
			
 
				-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
			
 
				-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseDown( event ) {
			
 
				-
			
 
				-				event.preventDefault();
			
 
				-
			
 
				-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
			
 
				-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
			
 
				-
			
 
				-				raycaster.setFromCamera( mouse, camera );
			
 
				-
			
 
				-				var intersects = raycaster.intersectObjects( objects );
			
 
				-
			
 
				-				if ( intersects.length > 0 ) {
			
 
				-
			
 
				-					var intersect = intersects[ 0 ];
			
 
				-
			
 
				-					if ( isShiftDown ) {
			
 
				-
			
 
				-						if ( intersect.object != plane ) {
			
 
				-
			
 
				-							scene.remove( intersect.object );
			
 
				-
			
 
				-							objects.splice( objects.indexOf( intersect.object ), 1 );
			
 
				-
			
 
				-						}
			
 
				-
			
 
				-					} else {
			
 
				-
			
 
				-						var voxel = new THREE.Mesh( cubeGeometry, cubeMaterial );
			
 
				-						voxel.position.copy( intersect.point ).add( intersect.face.normal );
			
 
				-						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
			
 
				-						scene.add( voxel );
			
 
				-
			
 
				-						objects.push( voxel );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					render();
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentKeyDown( event ) {
			
 
				-
			
 
				-				switch ( event.keyCode ) {
			
 
				-
			
 
				-					case 16: isShiftDown = true;
			
 
				-						break;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentKeyUp( event ) {
			
 
				-
			
 
				-				switch ( event.keyCode ) {
			
 
				-
			
 
				-					case 16: isShiftDown = false;
			
 
				-						break;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function save() {
			
 
				-
			
 
				-				window.open( renderer.domElement.toDataURL( 'image/png' ), 'mywindow' );
			
 
				-				return false;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_lights_pointlights.html
+++ b/examples/canvas_lights_pointlights.html
@@ -1,155 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - point light</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				color: #ffffff;
			
 
				-				padding: 5px;
			
 
				-				font-family: Monospace;
			
 
				-				font-size: 13px;
			
 
				-				text-align: center;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #ff0080;
			
 
				-				text-decoration: none;
			
 
				-			}
			
 
				-
			
 
				-			a:hover {
			
 
				-				color: #0080ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info">
			
 
				-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - point lights demo.<br />
			
 
				-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
			
 
				-		</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var camera, scene, renderer,
			
 
				-				light1, light2, light3,
			
 
				-				loader, mesh;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.set( 0, - 6, 100 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				scene.add( new THREE.AmbientLight( 0x00020 ) );
			
 
				-
			
 
				-				light1 = new THREE.PointLight( 0xff0040, 1, 50 );
			
 
				-				scene.add( light1 );
			
 
				-
			
 
				-				light2 = new THREE.PointLight( 0x0040ff, 1, 50 );
			
 
				-				scene.add( light2 );
			
 
				-
			
 
				-				light3 = new THREE.PointLight( 0x80ff80, 1, 50 );
			
 
				-				scene.add( light3 );
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var program = function ( context ) {
			
 
				-
			
 
				-					context.beginPath();
			
 
				-					context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-					context.fill();
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
			
 
				-				light1.add( sprite );
			
 
				-
			
 
				-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
			
 
				-				light2.add( sprite );
			
 
				-
			
 
				-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
			
 
				-				light3.add( sprite );
			
 
				-
			
 
				-				loader = new THREE.BufferGeometryLoader();
			
 
				-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
			
 
				-
			
 
				-					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ) );
			
 
				-					scene.add( mesh );
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var time = Date.now() * 0.0005;
			
 
				-
			
 
				-				if ( mesh ) mesh.rotation.y -= 0.01;
			
 
				-
			
 
				-				light1.position.x = Math.sin( time * 0.7 ) * 30;
			
 
				-				light1.position.y = Math.cos( time * 0.5 ) * 40;
			
 
				-				light1.position.z = Math.cos( time * 0.3 ) * 30;
			
 
				-
			
 
				-				light2.position.x = Math.cos( time * 0.3 ) * 30;
			
 
				-				light2.position.y = Math.sin( time * 0.5 ) * 40;
			
 
				-				light2.position.z = Math.sin( time * 0.7 ) * 30;
			
 
				-
			
 
				-				light3.position.x = Math.sin( time * 0.7 ) * 30;
			
 
				-				light3.position.y = Math.cos( time * 0.3 ) * 40;
			
 
				-				light3.position.z = Math.sin( time * 0.5 ) * 30;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_lines.html
+++ b/examples/canvas_lines.html
@@ -1,171 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - lines - random</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var mouseX = 0, mouseY = 0,
			
 
				-				windowHalfX = window.innerWidth / 2,
			
 
				-				windowHalfY = window.innerHeight / 2,
			
 
				-
			
 
				-				camera, scene, renderer;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 100;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				// particles
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var material = new THREE.SpriteCanvasMaterial( {
			
 
				-
			
 
				-					color: 0xffffff,
			
 
				-					program: function ( context ) {
			
 
				-
			
 
				-						context.beginPath();
			
 
				-						context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-						context.fill();
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				var points = [];
			
 
				-
			
 
				-				for ( var i = 0; i < 100; i ++ ) {
			
 
				-
			
 
				-					var particle = new THREE.Sprite( material );
			
 
				-					particle.position.x = Math.random() * 2 - 1;
			
 
				-					particle.position.y = Math.random() * 2 - 1;
			
 
				-					particle.position.z = Math.random() * 2 - 1;
			
 
				-					particle.position.normalize();
			
 
				-					particle.position.multiplyScalar( Math.random() * 10 + 450 );
			
 
				-					particle.scale.x = particle.scale.y = 10;
			
 
				-					scene.add( particle );
			
 
				-
			
 
				-					points.push( particle.position );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// lines
			
 
				-
			
 
				-				var geometry = new THREE.BufferGeometry().setFromPoints( points );
			
 
				-
			
 
				-				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
			
 
				-				scene.add( line );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length > 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * .05;
			
 
				-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_lines_colors.html
+++ b/examples/canvas_lines_colors.html
@@ -1,246 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - lines - colors</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 10px; width: 100%;
			
 
				-				color: #ffffff;
			
 
				-				padding: 5px;
			
 
				-				font-family: Monospace;
			
 
				-				font-size: 13px;
			
 
				-				text-align: center;
			
 
				-				z-index:100;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: orange;
			
 
				-				text-decoration: none;
			
 
				-			}
			
 
				-
			
 
				-			a:hover {
			
 
				-				color: #0080ff;
			
 
				-			}
			
 
				-
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="info">
			
 
				-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - color lines
			
 
				-			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
			
 
				-		</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/geometries/hilbert3D.js"></script>
			
 
				-		<script src="js/geometries/hilbert2D.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				document.body.appendChild( renderer.domElement );
			
 
				-
			
 
				-				// 2d lines
			
 
				-
			
 
				-				var vertices = hilbert2D( new THREE.Vector3( 0, 0, 0 ), 400, 4 );
			
 
				-				var numVertices = vertices.length;
			
 
				-
			
 
				-				var geometry2 = new THREE.BufferGeometry();
			
 
				-
			
 
				-				var positions = new Float32Array( numVertices * 3 );
			
 
				-				var colors = new Float32Array( numVertices * 3 );
			
 
				-
			
 
				-				geometry2.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
			
 
				-				geometry2.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
			
 
				-
			
 
				-				var color = new THREE.Color();
			
 
				-
			
 
				-				for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 3 ) {
			
 
				-
			
 
				-					positions[ index ] = vertices[ i ].x;
			
 
				-					positions[ index + 1 ] = vertices[ i ].y;
			
 
				-					positions[ index + 2 ] = vertices[ i ].z;
			
 
				-
			
 
				-					color.setHSL( i / l, 1.0, 0.5 );
			
 
				-
			
 
				-					colors[ index ] = color.r;
			
 
				-					colors[ index + 1 ] = color.g;
			
 
				-					colors[ index + 2 ] = color.b;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// 3d lines
			
 
				-
			
 
				-				var vertices = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200, 2, 0, 1, 2, 3, 4, 5, 6, 7 );
			
 
				-				var numVertices = vertices.length;
			
 
				-
			
 
				-				var geometry3 = new THREE.BufferGeometry();
			
 
				-
			
 
				-				var positions = new Float32Array( numVertices * 3 );
			
 
				-				var colors = new Float32Array( numVertices * 3 );
			
 
				-
			
 
				-				geometry3.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
			
 
				-				geometry3.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
			
 
				-
			
 
				-				var color = new THREE.Color();
			
 
				-
			
 
				-				for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 3 ) {
			
 
				-
			
 
				-					positions[ index ] = vertices[ i ].x;
			
 
				-					positions[ index + 1 ] = vertices[ i ].y;
			
 
				-					positions[ index + 2 ] = vertices[ i ].z;
			
 
				-
			
 
				-					color.setHSL( i / l, 1.0, 0.5 );
			
 
				-
			
 
				-					colors[ index ] = color.r;
			
 
				-					colors[ index + 1 ] = color.g;
			
 
				-					colors[ index + 2 ] = color.b;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// lines
			
 
				-
			
 
				-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 3, vertexColors: THREE.VertexColors } );
			
 
				-
			
 
				-				var line3d = new THREE.Line( geometry3, material );
			
 
				-				line3d.scale.set( 0.4, 0.4, 0.4 );
			
 
				-				line3d.position.set( 200, 0, 0 );
			
 
				-				scene.add( line3d );
			
 
				-
			
 
				-				var line2d = new THREE.Line( geometry2, material );
			
 
				-				line2d.scale.copy( line3d.scale );
			
 
				-				line2d.position.set( - 200, 0, 0 );
			
 
				-				scene.add( line2d );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length > 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05;
			
 
				-
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				var time = Date.now() * 0.0005;
			
 
				-
			
 
				-				for ( var i = 0; i < scene.children.length; i ++ ) {
			
 
				-
			
 
				-					var object = scene.children[ i ];
			
 
				-
			
 
				-					if ( object.isLine ) {
			
 
				-
			
 
				-						object.rotation.y = time * ( i % 2 ? 1 : - 1 );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_lines_dashed.html
+++ b/examples/canvas_lines_dashed.html
@@ -1,157 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - dashed lines</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				color: #ffffff;
			
 
				-				font-family:Monospace;
			
 
				-				font-size:13px;
			
 
				-				text-align:center;
			
 
				-				font-weight: bold;
			
 
				-
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-			#info {
			
 
				-				color: #fff;
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				padding: 5px;
			
 
				-				z-index:100;
			
 
				-			}
			
 
				-
			
 
				-		</style>
			
 
				-	</head>
			
 
				-
			
 
				-	<body>
			
 
				-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dashed lines example</div>
			
 
				-		<div id="container"></div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/geometries/hilbert3D.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var renderer, scene, camera, stats;
			
 
				-			var objects = [];
			
 
				-
			
 
				-			var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
			
 
				-				camera.position.z = 150;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0x111111 );
			
 
				-
			
 
				-				var subdivisions = 3;
			
 
				-				var recursion = 1;
			
 
				-
			
 
				-				var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
			
 
				-				var spline = new THREE.CatmullRomCurve3( points );
			
 
				-
			
 
				-				var samples = spline.getPoints( points.length * subdivisions );
			
 
				-				var numSamples = samples.length;
			
 
				-
			
 
				-				var geometrySpline = new THREE.BufferGeometry();
			
 
				-
			
 
				-				var positions = new Float32Array( numSamples * 3 );
			
 
				-
			
 
				-				geometrySpline.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
			
 
				-
			
 
				-				for ( var i = 0, index = 0, l = numSamples; i < l; i ++, index += 3 ) {
			
 
				-
			
 
				-					positions[ index ] = samples[ i ].x;
			
 
				-					positions[ index + 1 ] = samples[ i ].y;
			
 
				-					positions[ index + 2 ] = samples[ i ].z;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var geometryCube = new THREE.EdgesGeometry( new THREE.BoxBufferGeometry( 50, 50, 50 ) );
			
 
				-
			
 
				-				var object = new THREE.Line(
			
 
				-					geometrySpline,
			
 
				-					new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 10, gapSize: 10, linewidth: 3 } )
			
 
				-				);
			
 
				-
			
 
				-				objects.push( object );
			
 
				-				scene.add( object );
			
 
				-
			
 
				-				var object = new THREE.LineSegments(
			
 
				-					geometryCube,
			
 
				-					new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 30, gapSize: 10, linewidth: 3 } )
			
 
				-				);
			
 
				-
			
 
				-				objects.push( object );
			
 
				-				scene.add( object );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( WIDTH, HEIGHT );
			
 
				-
			
 
				-				var container = document.getElementById( 'container' );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var time = Date.now() * 0.001;
			
 
				-
			
 
				-				for ( var i = 0; i < objects.length; i ++ ) {
			
 
				-
			
 
				-					var object = objects[ i ];
			
 
				-
			
 
				-					object.rotation.x = 0.25 * time;
			
 
				-					object.rotation.y = 0.25 * time;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-	</script>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				-</html>
			
--- a/examples/canvas_lines_sphere.html
+++ b/examples/canvas_lines_sphere.html
@@ -1,190 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - lines - sphere</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var SCREEN_WIDTH = window.innerWidth,
			
 
				-				SCREEN_HEIGHT = window.innerHeight,
			
 
				-
			
 
				-				mouseX = 0, mouseY = 0,
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2,
			
 
				-				windowHalfY = window.innerHeight / 2,
			
 
				-
			
 
				-				camera, scene, renderer;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container, particle;
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				// particles
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var material = new THREE.SpriteCanvasMaterial( {
			
 
				-
			
 
				-					color: 0xffffff,
			
 
				-					program: function ( context ) {
			
 
				-
			
 
				-						context.beginPath();
			
 
				-						context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-						context.fill();
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				for ( var i = 0; i < 1000; i ++ ) {
			
 
				-
			
 
				-					particle = new THREE.Sprite( material );
			
 
				-					particle.position.x = Math.random() * 2 - 1;
			
 
				-					particle.position.y = Math.random() * 2 - 1;
			
 
				-					particle.position.z = Math.random() * 2 - 1;
			
 
				-					particle.position.normalize();
			
 
				-					particle.position.multiplyScalar( 450 );
			
 
				-					particle.scale.multiplyScalar( 2 );
			
 
				-					scene.add( particle );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// lines
			
 
				-
			
 
				-				var vertices = [];
			
 
				-
			
 
				-				for ( var i = 0; i < 300; i ++ ) {
			
 
				-
			
 
				-					var vertex = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
			
 
				-					vertex.normalize();
			
 
				-					vertex.multiplyScalar( 450 );
			
 
				-
			
 
				-					vertices.push( vertex );
			
 
				-
			
 
				-					var vertex2 = vertex.clone();
			
 
				-					vertex2.multiplyScalar( Math.random() * 0.3 + 1 );
			
 
				-
			
 
				-					vertices.push( vertex2 );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var geometry = new THREE.BufferGeometry().setFromPoints( vertices );
			
 
				-
			
 
				-				var line = new THREE.LineSegments( geometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
			
 
				-				scene.add( line );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length > 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * .05;
			
 
				-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_materials.html
+++ b/examples/canvas_materials.html
@@ -1,189 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - materials</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #202020;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer, objects;
			
 
				-			var pointLight;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
			
 
				-				camera.position.set( 0, 200, 800 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				// Grid
			
 
				-
			
 
				-				var gridHelper = new THREE.GridHelper( 1000, 10 );
			
 
				-				gridHelper.position.y = - 120;
			
 
				-				scene.add( gridHelper );
			
 
				-
			
 
				-				// Spheres
			
 
				-
			
 
				-				var geometry = new THREE.SphereGeometry( 100, 14, 7 );
			
 
				-
			
 
				-				var textureLoader = new THREE.TextureLoader();
			
 
				-
			
 
				-				var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );
			
 
				-
			
 
				-				var envMap = textureLoader.load( 'textures/envmap.png' );
			
 
				-				envMap.mapping = THREE.SphericalReflectionMapping;
			
 
				-
			
 
				-				var materials = [
			
 
				-
			
 
				-					new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),
			
 
				-					new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ),
			
 
				-					new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
			
 
				-					new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
			
 
				-					new THREE.MeshNormalMaterial( { overdraw: 0.5 } ),
			
 
				-					new THREE.MeshBasicMaterial( { map: earthTexture } ),
			
 
				-					new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } )
			
 
				-
			
 
				-				];
			
 
				-
			
 
				-				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
			
 
				-
			
 
				-					var face = geometry.faces[ i ];
			
 
				-					if ( Math.random() > 0.5 ) face.materialIndex = Math.floor( Math.random() * materials.length );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				materials.push( materials );
			
 
				-
			
 
				-				objects = [];
			
 
				-
			
 
				-				for ( var i = 0, l = materials.length; i < l; i ++ ) {
			
 
				-
			
 
				-					var sphere = new THREE.Mesh( geometry, materials[ i ] );
			
 
				-
			
 
				-					sphere.position.x = ( i % 5 ) * 200 - 400;
			
 
				-					sphere.position.z = Math.floor( i / 5 ) * 200 - 200;
			
 
				-
			
 
				-					sphere.rotation.x = Math.random() * 200 - 100;
			
 
				-					sphere.rotation.y = Math.random() * 200 - 100;
			
 
				-					sphere.rotation.z = Math.random() * 200 - 100;
			
 
				-
			
 
				-					objects.push( sphere );
			
 
				-
			
 
				-					scene.add( sphere );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var program = function ( context ) {
			
 
				-
			
 
				-					context.beginPath();
			
 
				-					context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-					context.fill();
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				// Lights
			
 
				-
			
 
				-				scene.add( new THREE.AmbientLight( Math.random() * 0x202020 ) );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
			
 
				-				directionalLight.position.x = Math.random() - 0.5;
			
 
				-				directionalLight.position.y = Math.random() - 0.5;
			
 
				-				directionalLight.position.z = Math.random() - 0.5;
			
 
				-				directionalLight.position.normalize();
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				pointLight = new THREE.PointLight( 0xffffff, 1 );
			
 
				-				scene.add( pointLight );
			
 
				-
			
 
				-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
			
 
				-				sprite.scale.set( 8, 8, 8 );
			
 
				-				pointLight.add( sprite );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var timer = Date.now() * 0.0001;
			
 
				-
			
 
				-				camera.position.x = Math.cos( timer ) * 1000;
			
 
				-				camera.position.z = Math.sin( timer ) * 1000;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
			
 
				-
			
 
				-					var object = objects[ i ];
			
 
				-
			
 
				-					object.rotation.x += 0.01;
			
 
				-					object.rotation.y += 0.005;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				pointLight.position.x = Math.sin( timer * 7 ) * 300;
			
 
				-				pointLight.position.y = Math.cos( timer * 5 ) * 400;
			
 
				-				pointLight.position.z = Math.cos( timer * 3 ) * 300;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_materials_normal.html
+++ b/examples/canvas_materials_normal.html
@@ -1,115 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - normal material</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				color: #808080;
			
 
				-				padding: 5px;
			
 
				-				font-family: Monospace;
			
 
				-				font-size: 13px;
			
 
				-				text-align: center;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #ffffff;
			
 
				-				text-decoration: none;
			
 
				-			}
			
 
				-
			
 
				-			a:hover {
			
 
				-				color: #0080ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info">
			
 
				-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - normal material.<br />
			
 
				-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
			
 
				-		</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var camera, scene, renderer, mesh;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
			
 
				-				camera.position.set( 0, - 6, 100 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				var loader = new THREE.BufferGeometryLoader();
			
 
				-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
			
 
				-
			
 
				-					mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( { overdraw: 0.5 } ) );
			
 
				-					scene.add( mesh );
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				if ( mesh ) {
			
 
				-
			
 
				-					mesh.rotation.x -= 0.005;
			
 
				-					mesh.rotation.y -= 0.01;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_materials_reflection.html
+++ b/examples/canvas_materials_reflection.html
@@ -1,113 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - spherical reflection</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			#info {
			
 
				-				position: absolute;
			
 
				-				top: 0px; width: 100%;
			
 
				-				color: #ffffff;
			
 
				-				padding: 5px;
			
 
				-				font-family: Monospace;
			
 
				-				font-size: 13px;
			
 
				-				text-align: center;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #ffffff;
			
 
				-			}
			
 
				-
			
 
				-			a:hover {
			
 
				-				color: #0080ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<div id="container"></div>
			
 
				-		<div id="info">
			
 
				-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - spherical reflection demo.<br />
			
 
				-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>. Reflection texture by <a href="http://kewlers.scene.org/" target="_blank" rel="noopener">Kewlers</a>.
			
 
				-		</div>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var camera, scene, renderer, loader, mesh;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				var container = document.getElementById( 'container' );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
			
 
				-				camera.position.set( 0, - 6, 100 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				loader = new THREE.BufferGeometryLoader();
			
 
				-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
			
 
				-
			
 
				-					var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
			
 
				-					envMap.mapping = THREE.SphericalReflectionMapping;
			
 
				-
			
 
				-					mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ) );
			
 
				-					scene.add( mesh );
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				if ( mesh ) mesh.rotation.y -= 0.01;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_materials_video.html
+++ b/examples/canvas_materials_video.html
@@ -1,224 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - materials - video</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
			
 
				-			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
			
 
				-			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
			
 
				-		</video>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var video, image, imageContext,
			
 
				-				imageReflection, imageReflectionContext, imageReflectionGradient,
			
 
				-				texture, textureReflection;
			
 
				-
			
 
				-			var mesh;
			
 
				-
			
 
				-			var mouseX = 0;
			
 
				-			var mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				video = document.getElementById( 'video' );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				image = document.createElement( 'canvas' );
			
 
				-				image.width = 480;
			
 
				-				image.height = 204;
			
 
				-
			
 
				-				imageContext = image.getContext( '2d' );
			
 
				-				imageContext.fillStyle = '#000000';
			
 
				-				imageContext.fillRect( 0, 0, 480, 204 );
			
 
				-
			
 
				-				texture = new THREE.Texture( image );
			
 
				-
			
 
				-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
			
 
				-
			
 
				-				imageReflection = document.createElement( 'canvas' );
			
 
				-				imageReflection.width = 480;
			
 
				-				imageReflection.height = 204;
			
 
				-
			
 
				-				imageReflectionContext = imageReflection.getContext( '2d' );
			
 
				-				imageReflectionContext.fillStyle = '#000000';
			
 
				-				imageReflectionContext.fillRect( 0, 0, 480, 204 );
			
 
				-
			
 
				-				imageReflectionGradient = imageReflectionContext.createLinearGradient( 0, 0, 0, 204 );
			
 
				-				imageReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
			
 
				-				imageReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
			
 
				-
			
 
				-				textureReflection = new THREE.Texture( imageReflection );
			
 
				-
			
 
				-				var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection, side: THREE.BackSide, overdraw: 0.5 } );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				var plane = new THREE.PlaneBufferGeometry( 480, 204, 4, 4 );
			
 
				-
			
 
				-				mesh = new THREE.Mesh( plane, material );
			
 
				-				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
			
 
				-				scene.add( mesh );
			
 
				-
			
 
				-				mesh = new THREE.Mesh( plane, materialReflection );
			
 
				-				mesh.position.y = - 306;
			
 
				-				mesh.rotation.x = - Math.PI;
			
 
				-				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
			
 
				-				scene.add( mesh );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				var separation = 150;
			
 
				-				var amountx = 10;
			
 
				-				var amounty = 10;
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var material = new THREE.SpriteCanvasMaterial( {
			
 
				-
			
 
				-					color: 0x0808080,
			
 
				-					program: function ( context ) {
			
 
				-
			
 
				-						context.beginPath();
			
 
				-						context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-						context.fill();
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				for ( var ix = 0; ix < amountx; ix ++ ) {
			
 
				-
			
 
				-					for ( var iy = 0; iy < amounty; iy ++ ) {
			
 
				-
			
 
				-						var sprite = new THREE.Sprite( material );
			
 
				-						sprite.position.x = ix * separation - ( ( amountx * separation ) / 2 );
			
 
				-						sprite.position.y = - 153;
			
 
				-						sprite.position.z = iy * separation - ( ( amounty * separation ) / 2 );
			
 
				-						sprite.scale.setScalar( 2 );
			
 
				-						scene.add( sprite );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = ( event.clientX - windowHalfX );
			
 
				-				mouseY = ( event.clientY - windowHalfY ) * 0.2;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
			
 
				-
			
 
				-					imageContext.drawImage( video, 0, 0 );
			
 
				-
			
 
				-					if ( texture ) texture.needsUpdate = true;
			
 
				-					if ( textureReflection ) textureReflection.needsUpdate = true;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				imageReflectionContext.drawImage( image, 0, 0 );
			
 
				-				imageReflectionContext.fillStyle = imageReflectionGradient;
			
 
				-				imageReflectionContext.fillRect( 0, 0, 480, 204 );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_morphtargets_horse.html
+++ b/examples/canvas_morphtargets_horse.html
@@ -1,152 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - morph targets - horse</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/loaders/GLTFLoader.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer, mixer;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				var info = document.createElement( 'div' );
			
 
				-				info.style.position = 'absolute';
			
 
				-				info.style.top = '10px';
			
 
				-				info.style.width = '100%';
			
 
				-				info.style.textAlign = 'center';
			
 
				-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - morph targets - horse. model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
			
 
				-				container.appendChild( info );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.y = 300;
			
 
				-				camera.target = new THREE.Vector3( 0, 150, 0 );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				var light = new THREE.DirectionalLight( 0xefefff, 1.5 );
			
 
				-				light.position.set( 1, 1, 1 ).normalize();
			
 
				-				scene.add( light );
			
 
				-
			
 
				-				var light = new THREE.DirectionalLight( 0xffefef, 1.5 );
			
 
				-				light.position.set( - 1, - 1, - 1 ).normalize();
			
 
				-				scene.add( light );
			
 
				-
			
 
				-				var loader = new THREE.GLTFLoader();
			
 
				-				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
			
 
				-
			
 
				-					var mesh = gltf.scene.children[ 0 ];
			
 
				-					mesh.material.overdraw = 0.5;
			
 
				-					mesh.material.vertexColors = THREE.FaceColors;
			
 
				-					mesh.scale.set( 1.5, 1.5, 1.5 );
			
 
				-					scene.add( mesh );
			
 
				-
			
 
				-					mixer = new THREE.AnimationMixer( mesh );
			
 
				-
			
 
				-					var clip = gltf.animations[ 0 ];
			
 
				-					mixer.clipAction( clip ).setDuration( 1 ).play();
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			var radius = 600;
			
 
				-			var theta = 0;
			
 
				-
			
 
				-			var prevTime = Date.now();
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				theta += 0.1;
			
 
				-
			
 
				-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
			
 
				-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
			
 
				-
			
 
				-				camera.lookAt( camera.target );
			
 
				-
			
 
				-				if ( mixer ) {
			
 
				-
			
 
				-					var time = Date.now();
			
 
				-
			
 
				-					mixer.update( ( time - prevTime ) * 0.001 );
			
 
				-
			
 
				-					prevTime = time;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_particles_floor.html
+++ b/examples/canvas_particles_floor.html
@@ -1,152 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - particles - floor</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var SEPARATION = 100;
			
 
				-			var AMOUNTX = 50;
			
 
				-			var AMOUNTY = 50;
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer, particle;
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				var material = new THREE.SpriteMaterial();
			
 
				-
			
 
				-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
			
 
				-
			
 
				-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
			
 
				-
			
 
				-						particle = new THREE.Sprite( material );
			
 
				-						particle.scale.y = 20;
			
 
				-						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
			
 
				-						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
			
 
				-						scene.add( particle );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length > 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * .05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_particles_random.html
+++ b/examples/canvas_particles_random.html
@@ -1,169 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - particles - random</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer, group, particle;
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var program = function ( context ) {
			
 
				-
			
 
				-					context.beginPath();
			
 
				-					context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-					context.fill();
			
 
				-
			
 
				-				};
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				for ( var i = 0; i < 1000; i ++ ) {
			
 
				-
			
 
				-					var material = new THREE.SpriteCanvasMaterial( {
			
 
				-						color: Math.random() * 0x808008 + 0x808080,
			
 
				-						program: program
			
 
				-					} );
			
 
				-
			
 
				-					particle = new THREE.Sprite( material );
			
 
				-					particle.position.x = Math.random() * 2000 - 1000;
			
 
				-					particle.position.y = Math.random() * 2000 - 1000;
			
 
				-					particle.position.z = Math.random() * 2000 - 1000;
			
 
				-					particle.scale.x = particle.scale.y = Math.random() * 20 + 10;
			
 
				-					group.add( particle );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				group.rotation.x += 0.01;
			
 
				-				group.rotation.y += 0.02;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_particles_sprites.html
+++ b/examples/canvas_particles_sprites.html
@@ -1,203 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - particles - sprites</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color: #0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-		<script src="js/libs/tween.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer, particle;
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0x000040 );
			
 
				-
			
 
				-				var material = new THREE.SpriteMaterial( {
			
 
				-					map: new THREE.CanvasTexture( generateSprite() ),
			
 
				-					blending: THREE.AdditiveBlending
			
 
				-				} );
			
 
				-
			
 
				-				for ( var i = 0; i < 1000; i ++ ) {
			
 
				-
			
 
				-					particle = new THREE.Sprite( material );
			
 
				-
			
 
				-					initParticle( particle, i * 10 );
			
 
				-
			
 
				-					scene.add( particle );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function generateSprite() {
			
 
				-
			
 
				-				var canvas = document.createElement( 'canvas' );
			
 
				-				canvas.width = 16;
			
 
				-				canvas.height = 16;
			
 
				-
			
 
				-				var context = canvas.getContext( '2d' );
			
 
				-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
			
 
				-				gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
			
 
				-				gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
			
 
				-				gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
			
 
				-				gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
			
 
				-
			
 
				-				context.fillStyle = gradient;
			
 
				-				context.fillRect( 0, 0, canvas.width, canvas.height );
			
 
				-
			
 
				-				return canvas;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function initParticle( particle, delay ) {
			
 
				-
			
 
				-				var particle = this instanceof THREE.Sprite ? this : particle;
			
 
				-				var delay = delay !== undefined ? delay : 0;
			
 
				-
			
 
				-				particle.position.set( 0, 0, 0 );
			
 
				-				particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
			
 
				-
			
 
				-				new TWEEN.Tween( particle )
			
 
				-					.delay( delay )
			
 
				-					.to( {}, 10000 )
			
 
				-					.onComplete( initParticle )
			
 
				-					.start();
			
 
				-
			
 
				-				new TWEEN.Tween( particle.position )
			
 
				-					.delay( delay )
			
 
				-					.to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1000 - 500, z: Math.random() * 4000 - 2000 }, 10000 )
			
 
				-					.start();
			
 
				-
			
 
				-				new TWEEN.Tween( particle.scale )
			
 
				-					.delay( delay )
			
 
				-					.to( { x: 0.01, y: 0.01 }, 10000 )
			
 
				-					.start();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length == 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				TWEEN.update();
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_particles_waves.html
+++ b/examples/canvas_particles_waves.html
@@ -1,191 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - particles - waves</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				background-color: #000000;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-
			
 
				-			a {
			
 
				-				color:#0078ff;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
			
 
				-
			
 
				-			var container, stats;
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var particles, particle, count = 0;
			
 
				-
			
 
				-			var mouseX = 0, mouseY = 0;
			
 
				-
			
 
				-			var windowHalfX = window.innerWidth / 2;
			
 
				-			var windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.z = 1000;
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-
			
 
				-				particles = new Array();
			
 
				-
			
 
				-				var PI2 = Math.PI * 2;
			
 
				-				var material = new THREE.SpriteCanvasMaterial( {
			
 
				-
			
 
				-					color: 0xffffff,
			
 
				-					program: function ( context ) {
			
 
				-
			
 
				-						context.beginPath();
			
 
				-						context.arc( 0, 0, 0.5, 0, PI2, true );
			
 
				-						context.fill();
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				} );
			
 
				-
			
 
				-				var i = 0;
			
 
				-
			
 
				-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
			
 
				-
			
 
				-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
			
 
				-
			
 
				-						particle = particles[ i ++ ] = new THREE.Sprite( material );
			
 
				-						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
			
 
				-						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
			
 
				-						scene.add( particle );
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			
 
				-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
			
 
				-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				windowHalfX = window.innerWidth / 2;
			
 
				-				windowHalfY = window.innerHeight / 2;
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function onDocumentMouseMove( event ) {
			
 
				-
			
 
				-				mouseX = event.clientX - windowHalfX;
			
 
				-				mouseY = event.clientY - windowHalfY;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchStart( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onDocumentTouchMove( event ) {
			
 
				-
			
 
				-				if ( event.touches.length === 1 ) {
			
 
				-
			
 
				-					event.preventDefault();
			
 
				-
			
 
				-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
			
 
				-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				camera.position.x += ( mouseX - camera.position.x ) * .05;
			
 
				-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-				var i = 0;
			
 
				-
			
 
				-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
			
 
				-
			
 
				-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
			
 
				-
			
 
				-						particle = particles[ i ++ ];
			
 
				-						particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
			
 
				-							( Math.sin( ( iy + count ) * 0.5 ) * 50 );
			
 
				-						particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
			
 
				-							( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-				count += 0.1;
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_performance.html
+++ b/examples/canvas_performance.html
@@ -1,131 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - performance</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer;
			
 
				-
			
 
				-			var light;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.set( 0, 1000, 1000 );
			
 
				-				camera.lookAt( scene.position );
			
 
				-
			
 
				-
			
 
				-				// Grid
			
 
				-
			
 
				-				var gridHelper = new THREE.GridHelper( 1000, 10 );
			
 
				-				scene.add( gridHelper );
			
 
				-
			
 
				-				// Spheres
			
 
				-
			
 
				-				var geometry = new THREE.SphereBufferGeometry( 100, 26, 18 );
			
 
				-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
			
 
				-
			
 
				-				for ( var i = 0; i < 20; i ++ ) {
			
 
				-
			
 
				-					var sphere = new THREE.Mesh( geometry, material );
			
 
				-
			
 
				-					sphere.position.x = ( i % 5 ) * 200 - 400;
			
 
				-					sphere.position.z = Math.floor( i / 5 ) * 200 - 400;
			
 
				-
			
 
				-					scene.add( sphere );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				// Lights
			
 
				-
			
 
				-				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
			
 
				-				scene.add( ambientLight );
			
 
				-
			
 
				-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
			
 
				-				directionalLight.position.set( 0, 1, 0 );
			
 
				-				scene.add( directionalLight );
			
 
				-
			
 
				-				light = new THREE.PointLight( 0xff0000, 1, 500 );
			
 
				-				scene.add( light );
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				var timer = Date.now() * 0.001;
			
 
				-
			
 
				-				light.position.x = Math.cos( timer ) * 1000;
			
 
				-				light.position.y = 500;
			
 
				-				light.position.z = Math.sin( timer ) * 1000;
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/canvas_sandbox.html
+++ b/examples/canvas_sandbox.html
@@ -1,136 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-	<head>
			
 
				-		<title>three.js canvas - sandbox</title>
			
 
				-		<meta charset="utf-8">
			
 
				-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				-		<style>
			
 
				-			body {
			
 
				-				font-family: Monospace;
			
 
				-				background-color: #f0f0f0;
			
 
				-				margin: 0px;
			
 
				-				overflow: hidden;
			
 
				-			}
			
 
				-		</style>
			
 
				-	</head>
			
 
				-	<body>
			
 
				-
			
 
				-		<script src="../build/three.js"></script>
			
 
				-
			
 
				-		<script src="js/controls/OrbitControls.js"></script>
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				-		<script src="js/libs/stats.min.js"></script>
			
 
				-
			
 
				-		<script>
			
 
				-
			
 
				-			var container, stats;
			
 
				-
			
 
				-			var camera, scene, renderer, group;
			
 
				-
			
 
				-			init();
			
 
				-			animate();
			
 
				-
			
 
				-			function init() {
			
 
				-
			
 
				-				container = document.createElement( 'div' );
			
 
				-				document.body.appendChild( container );
			
 
				-
			
 
				-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				-				camera.position.set( 0, 150, 400 );
			
 
				-
			
 
				-				var controls = new THREE.OrbitControls( camera );
			
 
				-
			
 
				-				scene = new THREE.Scene();
			
 
				-				scene.background = new THREE.Color( 0xf0f0f0 );
			
 
				-
			
 
				-				// Grid
			
 
				-
			
 
				-				var gridHelper = new THREE.GridHelper( 1000, 10 );
			
 
				-				scene.add( gridHelper );
			
 
				-
			
 
				-				// Spheres
			
 
				-
			
 
				-				group = new THREE.Group();
			
 
				-				scene.add( group );
			
 
				-
			
 
				-				var geometry = new THREE.IcosahedronBufferGeometry( 100, 1 );
			
 
				-
			
 
				-				var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
			
 
				-				envMap.mapping = THREE.SphericalReflectionMapping;
			
 
				-
			
 
				-				var material = new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } );
			
 
				-
			
 
				-				for ( var i = 0; i < 10; i ++ ) {
			
 
				-
			
 
				-					var sphere = new THREE.Mesh( geometry, material );
			
 
				-
			
 
				-					sphere.position.x = Math.random() * 1000 - 500;
			
 
				-					sphere.position.y = Math.random() * 1000 - 500;
			
 
				-					sphere.position.z = Math.random() * 1000 - 500;
			
 
				-
			
 
				-					sphere.rotation.x = Math.random() * 200 - 100;
			
 
				-					sphere.rotation.y = Math.random() * 200 - 100;
			
 
				-					sphere.rotation.z = Math.random() * 200 - 100;
			
 
				-
			
 
				-					sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() + 0.5;
			
 
				-
			
 
				-					group.add( sphere );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer = new THREE.CanvasRenderer();
			
 
				-				renderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-				container.appendChild( renderer.domElement );
			
 
				-
			
 
				-				stats = new Stats();
			
 
				-				container.appendChild( stats.dom );
			
 
				-
			
 
				-				//
			
 
				-
			
 
				-				window.addEventListener( 'resize', onWindowResize, false );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function onWindowResize() {
			
 
				-
			
 
				-				camera.aspect = window.innerWidth / window.innerHeight;
			
 
				-				camera.updateProjectionMatrix();
			
 
				-
			
 
				-				renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			//
			
 
				-
			
 
				-			function animate() {
			
 
				-
			
 
				-				requestAnimationFrame( animate );
			
 
				-
			
 
				-				render();
			
 
				-				stats.update();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			function render() {
			
 
				-
			
 
				-				for ( var i = 0, l = group.children.length; i < l; i ++ ) {
			
 
				-
			
 
				-					var object = group.children[ i ];
			
 
				-
			
 
				-					object.rotation.x += 0.01;
			
 
				-					object.rotation.y += 0.005;
			
 
				-					object.position.y = Math.sin( object.rotation.x ) * 200;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				renderer.render( scene, camera );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		</script>
			
 
				-
			
 
				-	</body>
			
 
				-</html>
			
--- a/examples/files.js
+++ b/examples/files.js
@@ -370,40 +370,6 @@ var files = {
 
				 	"css2d": [
			
 
				 		"css2d_label"
			
 
				 	],
			
 
				-	"canvas": [
			
 
				-		"canvas_ascii_effect",
			
 
				-		"canvas_camera_orthographic",
			
 
				-		"canvas_geometry_birds",
			
 
				-		"canvas_geometry_cube",
			
 
				-		"canvas_geometry_earth",
			
 
				-		"canvas_geometry_hierarchy",
			
 
				-		"canvas_geometry_nurbs",
			
 
				-		"canvas_geometry_panorama",
			
 
				-		"canvas_geometry_panorama_fisheye",
			
 
				-		"canvas_geometry_shapes",
			
 
				-		"canvas_geometry_terrain",
			
 
				-		"canvas_geometry_text",
			
 
				-		"canvas_interactive_cubes",
			
 
				-		"canvas_interactive_cubes_tween",
			
 
				-		"canvas_interactive_sprites",
			
 
				-		"canvas_interactive_voxelpainter",
			
 
				-		"canvas_lights_pointlights",
			
 
				-		"canvas_lines",
			
 
				-		"canvas_lines_colors",
			
 
				-		"canvas_lines_dashed",
			
 
				-		"canvas_lines_sphere",
			
 
				-		"canvas_materials",
			
 
				-		"canvas_materials_normal",
			
 
				-		"canvas_materials_reflection",
			
 
				-		"canvas_materials_video",
			
 
				-		"canvas_morphtargets_horse",
			
 
				-		"canvas_particles_floor",
			
 
				-		"canvas_particles_random",
			
 
				-		"canvas_particles_sprites",
			
 
				-		"canvas_particles_waves",
			
 
				-		"canvas_performance",
			
 
				-		"canvas_sandbox"
			
 
				-	],
			
 
				 	"raytracing": [
			
 
				 		"raytracing_sandbox"
			
 
				 	],
			
--- a/examples/js/renderers/CanvasRenderer.js
+++ b/examples/js/renderers/CanvasRenderer.js
@@ -1,1153 +0,0 @@
 
				-/**
			
 
				- * @author mrdoob / http://mrdoob.com/
			
 
				- */
			
 
				-
			
 
				-THREE.SpriteCanvasMaterial = function ( parameters ) {
			
 
				-
			
 
				-	THREE.Material.call( this );
			
 
				-
			
 
				-	this.type = 'SpriteCanvasMaterial';
			
 
				-	this.rotation = 0;
			
 
				-	this.color = new THREE.Color( 0xffffff );
			
 
				-	this.program = function () {};
			
 
				-
			
 
				-	this.setValues( parameters );
			
 
				-
			
 
				-};
			
 
				-
			
 
				-THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
			
 
				-THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
			
 
				-THREE.SpriteCanvasMaterial.prototype.isSpriteCanvasMaterial = true;
			
 
				-
			
 
				-THREE.SpriteCanvasMaterial.prototype.clone = function () {
			
 
				-
			
 
				-	var material = new THREE.SpriteCanvasMaterial();
			
 
				-
			
 
				-	material.copy( this );
			
 
				-	material.color.copy( this.color );
			
 
				-	material.program = this.program;
			
 
				-
			
 
				-	return material;
			
 
				-
			
 
				-};
			
 
				-
			
 
				-//
			
 
				-
			
 
				-THREE.CanvasRenderer = function ( parameters ) {
			
 
				-
			
 
				-	console.log( 'THREE.CanvasRenderer', THREE.REVISION );
			
 
				-
			
 
				-	parameters = parameters || {};
			
 
				-
			
 
				-	var _this = this,
			
 
				-		_renderData, _elements, _lights,
			
 
				-		_projector = new THREE.Projector(),
			
 
				-
			
 
				-		_canvas = parameters.canvas !== undefined
			
 
				-				 ? parameters.canvas
			
 
				-				 : document.createElement( 'canvas' ),
			
 
				-
			
 
				-		_canvasWidth = _canvas.width,
			
 
				-		_canvasHeight = _canvas.height,
			
 
				-		_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
			
 
				-		_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
			
 
				-
			
 
				-		_viewportX = 0,
			
 
				-		_viewportY = 0,
			
 
				-		_viewportWidth = _canvasWidth,
			
 
				-		_viewportHeight = _canvasHeight,
			
 
				-
			
 
				-		_pixelRatio = 1,
			
 
				-
			
 
				-		_context = _canvas.getContext( '2d', {
			
 
				-			alpha: parameters.alpha === true
			
 
				-		} ),
			
 
				-
			
 
				-		_clearColor = new THREE.Color( 0x000000 ),
			
 
				-		_clearAlpha = parameters.alpha === true ? 0 : 1,
			
 
				-
			
 
				-		_contextGlobalAlpha = 1,
			
 
				-		_contextGlobalCompositeOperation = 0,
			
 
				-		_contextStrokeStyle = null,
			
 
				-		_contextFillStyle = null,
			
 
				-		_contextLineWidth = null,
			
 
				-		_contextLineCap = null,
			
 
				-		_contextLineJoin = null,
			
 
				-		_contextLineDash = [],
			
 
				-
			
 
				-		_v1, _v2, _v3,
			
 
				-
			
 
				-		_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
			
 
				-
			
 
				-		_color = new THREE.Color(),
			
 
				-
			
 
				-		_diffuseColor = new THREE.Color(),
			
 
				-		_emissiveColor = new THREE.Color(),
			
 
				-
			
 
				-		_lightColor = new THREE.Color(),
			
 
				-
			
 
				-		_patterns = {},
			
 
				-
			
 
				-		_uvs,
			
 
				-		_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
			
 
				-
			
 
				-		_clipBox = new THREE.Box2(),
			
 
				-		_clearBox = new THREE.Box2(),
			
 
				-		_elemBox = new THREE.Box2(),
			
 
				-
			
 
				-		_ambientLight = new THREE.Color(),
			
 
				-		_directionalLights = new THREE.Color(),
			
 
				-		_pointLights = new THREE.Color(),
			
 
				-
			
 
				-		_vector3 = new THREE.Vector3(), // Needed for PointLight
			
 
				-		_centroid = new THREE.Vector3(),
			
 
				-		_normal = new THREE.Vector3(),
			
 
				-		_normalViewMatrix = new THREE.Matrix3();
			
 
				-
			
 
				-	/* TODO
			
 
				-	_canvas.mozImageSmoothingEnabled = false;
			
 
				-	_canvas.webkitImageSmoothingEnabled = false;
			
 
				-	_canvas.msImageSmoothingEnabled = false;
			
 
				-	_canvas.imageSmoothingEnabled = false;
			
 
				-	*/
			
 
				-
			
 
				-	// dash+gap fallbacks for Firefox and everything else
			
 
				-
			
 
				-	if ( _context.setLineDash === undefined ) {
			
 
				-
			
 
				-		_context.setLineDash = function () {};
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	this.domElement = _canvas;
			
 
				-
			
 
				-	this.autoClear = true;
			
 
				-	this.sortObjects = true;
			
 
				-	this.sortElements = true;
			
 
				-
			
 
				-	this.info = {
			
 
				-
			
 
				-		render: {
			
 
				-
			
 
				-			vertices: 0,
			
 
				-			faces: 0
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	// API
			
 
				-
			
 
				-	this.getContext = function () {
			
 
				-
			
 
				-		return _context;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.getContextAttributes = function () {
			
 
				-
			
 
				-		return _context.getContextAttributes();
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.getPixelRatio = function () {
			
 
				-
			
 
				-		return _pixelRatio;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.setPixelRatio = function ( value ) {
			
 
				-
			
 
				-		if ( value !== undefined ) _pixelRatio = value;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.setSize = function ( width, height, updateStyle ) {
			
 
				-
			
 
				-		_canvasWidth = width * _pixelRatio;
			
 
				-		_canvasHeight = height * _pixelRatio;
			
 
				-
			
 
				-		_canvas.width = _canvasWidth;
			
 
				-		_canvas.height = _canvasHeight;
			
 
				-
			
 
				-		_canvasWidthHalf = Math.floor( _canvasWidth / 2 );
			
 
				-		_canvasHeightHalf = Math.floor( _canvasHeight / 2 );
			
 
				-
			
 
				-		if ( updateStyle !== false ) {
			
 
				-
			
 
				-			_canvas.style.width = width + 'px';
			
 
				-			_canvas.style.height = height + 'px';
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		_clipBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
			
 
				-		_clipBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
			
 
				-
			
 
				-		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
			
 
				-		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
			
 
				-
			
 
				-		_contextGlobalAlpha = 1;
			
 
				-		_contextGlobalCompositeOperation = 0;
			
 
				-		_contextStrokeStyle = null;
			
 
				-		_contextFillStyle = null;
			
 
				-		_contextLineWidth = null;
			
 
				-		_contextLineCap = null;
			
 
				-		_contextLineJoin = null;
			
 
				-
			
 
				-		this.setViewport( 0, 0, width, height );
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.setViewport = function ( x, y, width, height ) {
			
 
				-
			
 
				-		_viewportX = x * _pixelRatio;
			
 
				-		_viewportY = y * _pixelRatio;
			
 
				-
			
 
				-		_viewportWidth = width * _pixelRatio;
			
 
				-		_viewportHeight = height * _pixelRatio;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.setScissor = function () {};
			
 
				-	this.setScissorTest = function () {};
			
 
				-
			
 
				-	this.setClearColor = function ( color, alpha ) {
			
 
				-
			
 
				-		_clearColor.set( color );
			
 
				-		_clearAlpha = alpha !== undefined ? alpha : 1;
			
 
				-
			
 
				-		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
			
 
				-		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.setClearColorHex = function ( hex, alpha ) {
			
 
				-
			
 
				-		console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );
			
 
				-		this.setClearColor( hex, alpha );
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.getClearColor = function () {
			
 
				-
			
 
				-		return _clearColor;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.getClearAlpha = function () {
			
 
				-
			
 
				-		return _clearAlpha;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.getMaxAnisotropy = function () {
			
 
				-
			
 
				-		return 0;
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	this.clear = function () {
			
 
				-
			
 
				-		if ( _clearBox.isEmpty() === false ) {
			
 
				-
			
 
				-			_clearBox.intersect( _clipBox );
			
 
				-			_clearBox.expandByScalar( 2 );
			
 
				-
			
 
				-			_clearBox.min.x =   _clearBox.min.x + _canvasWidthHalf;
			
 
				-			_clearBox.min.y = - _clearBox.min.y + _canvasHeightHalf;		// higher y value !
			
 
				-			_clearBox.max.x =   _clearBox.max.x + _canvasWidthHalf;
			
 
				-			_clearBox.max.y = - _clearBox.max.y + _canvasHeightHalf;		// lower y value !
			
 
				-
			
 
				-			if ( _clearAlpha < 1 ) {
			
 
				-
			
 
				-				_context.clearRect(
			
 
				-					_clearBox.min.x | 0,
			
 
				-					_clearBox.max.y | 0,
			
 
				-					( _clearBox.max.x - _clearBox.min.x ) | 0,
			
 
				-					( _clearBox.min.y - _clearBox.max.y ) | 0
			
 
				-				);
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			if ( _clearAlpha > 0 ) {
			
 
				-
			
 
				-				setOpacity( 1 );
			
 
				-				setBlending( THREE.NormalBlending );
			
 
				-
			
 
				-				setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );
			
 
				-
			
 
				-				_context.fillRect(
			
 
				-					_clearBox.min.x | 0,
			
 
				-					_clearBox.max.y | 0,
			
 
				-					( _clearBox.max.x - _clearBox.min.x ) | 0,
			
 
				-					( _clearBox.min.y - _clearBox.max.y ) | 0
			
 
				-				);
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			_clearBox.makeEmpty();
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	// compatibility
			
 
				-
			
 
				-	this.clearColor = function () {};
			
 
				-	this.clearDepth = function () {};
			
 
				-	this.clearStencil = function () {};
			
 
				-
			
 
				-	this.render = function ( scene, camera ) {
			
 
				-
			
 
				-		if ( camera.isCamera === undefined ) {
			
 
				-
			
 
				-			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
			
 
				-			return;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		var background = scene.background;
			
 
				-
			
 
				-		if ( background && background.isColor ) {
			
 
				-
			
 
				-			setOpacity( 1 );
			
 
				-			setBlending( THREE.NormalBlending );
			
 
				-
			
 
				-			setFillStyle( background.getStyle() );
			
 
				-			_context.fillRect( 0, 0, _canvasWidth, _canvasHeight );
			
 
				-
			
 
				-		} else if ( this.autoClear === true ) {
			
 
				-
			
 
				-			this.clear();
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		_this.info.render.vertices = 0;
			
 
				-		_this.info.render.faces = 0;
			
 
				-
			
 
				-		_context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );
			
 
				-		_context.translate( _canvasWidthHalf, _canvasHeightHalf );
			
 
				-
			
 
				-		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
			
 
				-		_elements = _renderData.elements;
			
 
				-		_lights = _renderData.lights;
			
 
				-
			
 
				-		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
			
 
				-
			
 
				-		/* DEBUG
			
 
				-		setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );
			
 
				-		_context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
			
 
				-		*/
			
 
				-
			
 
				-		calculateLights();
			
 
				-
			
 
				-		for ( var e = 0, el = _elements.length; e < el; e ++ ) {
			
 
				-
			
 
				-			var element = _elements[ e ];
			
 
				-
			
 
				-			var material = element.material;
			
 
				-
			
 
				-			if ( material === undefined || material.opacity === 0 ) continue;
			
 
				-
			
 
				-			_elemBox.makeEmpty();
			
 
				-
			
 
				-			if ( element instanceof THREE.RenderableSprite ) {
			
 
				-
			
 
				-				_v1 = element;
			
 
				-				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
			
 
				-
			
 
				-				renderSprite( _v1, element, material );
			
 
				-
			
 
				-			} else if ( element instanceof THREE.RenderableLine ) {
			
 
				-
			
 
				-				_v1 = element.v1; _v2 = element.v2;
			
 
				-
			
 
				-				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
			
 
				-				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
			
 
				-
			
 
				-				_elemBox.setFromPoints( [
			
 
				-					_v1.positionScreen,
			
 
				-					_v2.positionScreen
			
 
				-				] );
			
 
				-
			
 
				-				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
			
 
				-
			
 
				-					renderLine( _v1, _v2, element, material );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			} else if ( element instanceof THREE.RenderableFace ) {
			
 
				-
			
 
				-				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
			
 
				-
			
 
				-				if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
			
 
				-				if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
			
 
				-				if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
			
 
				-
			
 
				-				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
			
 
				-				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
			
 
				-				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
			
 
				-
			
 
				-				if ( material.overdraw > 0 ) {
			
 
				-
			
 
				-					expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );
			
 
				-					expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );
			
 
				-					expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				_elemBox.setFromPoints( [
			
 
				-					_v1.positionScreen,
			
 
				-					_v2.positionScreen,
			
 
				-					_v3.positionScreen
			
 
				-				] );
			
 
				-
			
 
				-				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
			
 
				-
			
 
				-					renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			/* DEBUG
			
 
				-			setLineWidth( 1 );
			
 
				-			setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );
			
 
				-			_context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );
			
 
				-			*/
			
 
				-
			
 
				-			_clearBox.union( _elemBox );
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		/* DEBUG
			
 
				-		setLineWidth( 1 );
			
 
				-		setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );
			
 
				-		_context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );
			
 
				-		*/
			
 
				-
			
 
				-		_context.setTransform( 1, 0, 0, 1, 0, 0 );
			
 
				-
			
 
				-	};
			
 
				-
			
 
				-	//
			
 
				-
			
 
				-	function calculateLights() {
			
 
				-
			
 
				-		_ambientLight.setRGB( 0, 0, 0 );
			
 
				-		_directionalLights.setRGB( 0, 0, 0 );
			
 
				-		_pointLights.setRGB( 0, 0, 0 );
			
 
				-
			
 
				-		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
			
 
				-
			
 
				-			var light = _lights[ l ];
			
 
				-			var lightColor = light.color;
			
 
				-
			
 
				-			if ( light.isAmbientLight ) {
			
 
				-
			
 
				-				_ambientLight.add( lightColor );
			
 
				-
			
 
				-			} else if ( light.isDirectionalLight ) {
			
 
				-
			
 
				-				// for sprites
			
 
				-
			
 
				-				_directionalLights.add( lightColor );
			
 
				-
			
 
				-			} else if ( light.isPointLight ) {
			
 
				-
			
 
				-				// for sprites
			
 
				-
			
 
				-				_pointLights.add( lightColor );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function calculateLight( position, normal, color ) {
			
 
				-
			
 
				-		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
			
 
				-
			
 
				-			var light = _lights[ l ];
			
 
				-
			
 
				-			_lightColor.copy( light.color );
			
 
				-
			
 
				-			if ( light.isDirectionalLight ) {
			
 
				-
			
 
				-				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
			
 
				-
			
 
				-				var amount = normal.dot( lightPosition );
			
 
				-
			
 
				-				if ( amount <= 0 ) continue;
			
 
				-
			
 
				-				amount *= light.intensity;
			
 
				-
			
 
				-				color.add( _lightColor.multiplyScalar( amount ) );
			
 
				-
			
 
				-			} else if ( light.isPointLight ) {
			
 
				-
			
 
				-				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
			
 
				-
			
 
				-				var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
			
 
				-
			
 
				-				if ( amount <= 0 ) continue;
			
 
				-
			
 
				-				amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
			
 
				-
			
 
				-				if ( amount == 0 ) continue;
			
 
				-
			
 
				-				amount *= light.intensity;
			
 
				-
			
 
				-				color.add( _lightColor.multiplyScalar( amount ) );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function renderSprite( v1, element, material ) {
			
 
				-
			
 
				-		setOpacity( material.opacity );
			
 
				-		setBlending( material.blending );
			
 
				-
			
 
				-		var scaleX = element.scale.x * _canvasWidthHalf;
			
 
				-		var scaleY = element.scale.y * _canvasHeightHalf;
			
 
				-
			
 
				-		var dist = Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
			
 
				-		_elemBox.min.set( v1.x - dist, v1.y - dist );
			
 
				-		_elemBox.max.set( v1.x + dist, v1.y + dist );
			
 
				-
			
 
				-		if ( material.isSpriteMaterial ) {
			
 
				-
			
 
				-			var texture = material.map;
			
 
				-
			
 
				-			if ( texture !== null ) {
			
 
				-
			
 
				-				var pattern = _patterns[ texture.id ];
			
 
				-
			
 
				-				if ( pattern === undefined || pattern.version !== texture.version ) {
			
 
				-
			
 
				-					pattern = textureToPattern( texture );
			
 
				-					_patterns[ texture.id ] = pattern;
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				if ( pattern.canvas !== undefined ) {
			
 
				-
			
 
				-					setFillStyle( pattern.canvas );
			
 
				-
			
 
				-					var bitmap = texture.image;
			
 
				-
			
 
				-					var ox = bitmap.width * texture.offset.x;
			
 
				-					var oy = bitmap.height * texture.offset.y;
			
 
				-
			
 
				-					var sx = bitmap.width * texture.repeat.x;
			
 
				-					var sy = bitmap.height * texture.repeat.y;
			
 
				-
			
 
				-					var cx = scaleX / sx;
			
 
				-					var cy = scaleY / sy;
			
 
				-
			
 
				-					_context.save();
			
 
				-					_context.translate( v1.x, v1.y );
			
 
				-					if ( material.rotation !== 0 ) _context.rotate( material.rotation );
			
 
				-					_context.translate( - scaleX / 2, - scaleY / 2 );
			
 
				-					_context.scale( cx, cy );
			
 
				-					_context.translate( - ox, - oy );
			
 
				-					_context.fillRect( ox, oy, sx, sy );
			
 
				-					_context.restore();
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			} else {
			
 
				-
			
 
				-				// no texture
			
 
				-
			
 
				-				setFillStyle( material.color.getStyle() );
			
 
				-
			
 
				-				_context.save();
			
 
				-				_context.translate( v1.x, v1.y );
			
 
				-				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
			
 
				-				_context.scale( scaleX, - scaleY );
			
 
				-				_context.fillRect( - 0.5, - 0.5, 1, 1 );
			
 
				-				_context.restore();
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		} else if ( material.isSpriteCanvasMaterial ) {
			
 
				-
			
 
				-			setStrokeStyle( material.color.getStyle() );
			
 
				-			setFillStyle( material.color.getStyle() );
			
 
				-
			
 
				-			_context.save();
			
 
				-			_context.translate( v1.x, v1.y );
			
 
				-			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
			
 
				-			_context.scale( scaleX, scaleY );
			
 
				-
			
 
				-			material.program( _context );
			
 
				-
			
 
				-			_context.restore();
			
 
				-
			
 
				-		} else if ( material.isPointsMaterial ) {
			
 
				-
			
 
				-			setFillStyle( material.color.getStyle() );
			
 
				-
			
 
				-			_context.save();
			
 
				-			_context.translate( v1.x, v1.y );
			
 
				-			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
			
 
				-			_context.scale( scaleX * material.size, - scaleY * material.size );
			
 
				-			_context.fillRect( - 0.5, - 0.5, 1, 1 );
			
 
				-			_context.restore();
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		/* DEBUG
			
 
				-		setStrokeStyle( 'rgb(255,255,0)' );
			
 
				-		_context.beginPath();
			
 
				-		_context.moveTo( v1.x - 10, v1.y );
			
 
				-		_context.lineTo( v1.x + 10, v1.y );
			
 
				-		_context.moveTo( v1.x, v1.y - 10 );
			
 
				-		_context.lineTo( v1.x, v1.y + 10 );
			
 
				-		_context.stroke();
			
 
				-		*/
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function renderLine( v1, v2, element, material ) {
			
 
				-
			
 
				-		setOpacity( material.opacity );
			
 
				-		setBlending( material.blending );
			
 
				-
			
 
				-		_context.beginPath();
			
 
				-		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
			
 
				-		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
			
 
				-
			
 
				-		if ( material.isLineBasicMaterial ) {
			
 
				-
			
 
				-			setLineWidth( material.linewidth );
			
 
				-			setLineCap( material.linecap );
			
 
				-			setLineJoin( material.linejoin );
			
 
				-
			
 
				-			if ( material.vertexColors !== THREE.VertexColors ) {
			
 
				-
			
 
				-				setStrokeStyle( material.color.getStyle() );
			
 
				-
			
 
				-			} else {
			
 
				-
			
 
				-				var colorStyle1 = element.vertexColors[ 0 ].getStyle();
			
 
				-				var colorStyle2 = element.vertexColors[ 1 ].getStyle();
			
 
				-
			
 
				-				if ( colorStyle1 === colorStyle2 ) {
			
 
				-
			
 
				-					setStrokeStyle( colorStyle1 );
			
 
				-
			
 
				-				} else {
			
 
				-
			
 
				-					try {
			
 
				-
			
 
				-						var grad = _context.createLinearGradient(
			
 
				-							v1.positionScreen.x,
			
 
				-							v1.positionScreen.y,
			
 
				-							v2.positionScreen.x,
			
 
				-							v2.positionScreen.y
			
 
				-						);
			
 
				-						grad.addColorStop( 0, colorStyle1 );
			
 
				-						grad.addColorStop( 1, colorStyle2 );
			
 
				-
			
 
				-					} catch ( exception ) {
			
 
				-
			
 
				-						grad = colorStyle1;
			
 
				-
			
 
				-					}
			
 
				-
			
 
				-					setStrokeStyle( grad );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			if ( material.isLineDashedMaterial ) {
			
 
				-
			
 
				-				setLineDash( [ material.dashSize, material.gapSize ] );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			_context.stroke();
			
 
				-			_elemBox.expandByScalar( material.linewidth * 2 );
			
 
				-
			
 
				-			if ( material.isLineDashedMaterial ) {
			
 
				-
			
 
				-				setLineDash( [] );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {
			
 
				-
			
 
				-		_this.info.render.vertices += 3;
			
 
				-		_this.info.render.faces ++;
			
 
				-
			
 
				-		setOpacity( material.opacity );
			
 
				-		setBlending( material.blending );
			
 
				-
			
 
				-		_v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
			
 
				-		_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
			
 
				-		_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
			
 
				-
			
 
				-		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
			
 
				-
			
 
				-		if ( ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) && material.map === null ) {
			
 
				-
			
 
				-			_diffuseColor.copy( material.color );
			
 
				-			_emissiveColor.copy( material.emissive );
			
 
				-
			
 
				-			if ( material.vertexColors === THREE.FaceColors ) {
			
 
				-
			
 
				-				_diffuseColor.multiply( element.color );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			_color.copy( _ambientLight );
			
 
				-
			
 
				-			_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
			
 
				-
			
 
				-			calculateLight( _centroid, element.normalModel, _color );
			
 
				-
			
 
				-			_color.multiply( _diffuseColor ).add( _emissiveColor );
			
 
				-
			
 
				-			material.wireframe === true
			
 
				-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
			
 
				-				 : fillPath( _color );
			
 
				-
			
 
				-		} else if ( material.isMeshBasicMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
			
 
				-
			
 
				-			if ( material.map !== null ) {
			
 
				-
			
 
				-				var mapping = material.map.mapping;
			
 
				-
			
 
				-				if ( mapping === THREE.UVMapping ) {
			
 
				-
			
 
				-					_uvs = element.uvs;
			
 
				-					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			} else if ( material.envMap !== null ) {
			
 
				-
			
 
				-				if ( material.envMap.mapping === THREE.SphericalReflectionMapping ) {
			
 
				-
			
 
				-					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
			
 
				-					_uv1x = 0.5 * _normal.x + 0.5;
			
 
				-					_uv1y = 0.5 * _normal.y + 0.5;
			
 
				-
			
 
				-					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
			
 
				-					_uv2x = 0.5 * _normal.x + 0.5;
			
 
				-					_uv2y = 0.5 * _normal.y + 0.5;
			
 
				-
			
 
				-					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
			
 
				-					_uv3x = 0.5 * _normal.x + 0.5;
			
 
				-					_uv3y = 0.5 * _normal.y + 0.5;
			
 
				-
			
 
				-					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-			} else {
			
 
				-
			
 
				-				_color.copy( material.color );
			
 
				-
			
 
				-				if ( material.vertexColors === THREE.FaceColors ) {
			
 
				-
			
 
				-					_color.multiply( element.color );
			
 
				-
			
 
				-				}
			
 
				-
			
 
				-				material.wireframe === true
			
 
				-					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
			
 
				-					 : fillPath( _color );
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-		} else if ( material.isMeshNormalMaterial ) {
			
 
				-
			
 
				-			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
			
 
				-
			
 
				-			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
			
 
				-
			
 
				-			material.wireframe === true
			
 
				-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
			
 
				-				 : fillPath( _color );
			
 
				-
			
 
				-		} else {
			
 
				-
			
 
				-			_color.setRGB( 1, 1, 1 );
			
 
				-
			
 
				-			material.wireframe === true
			
 
				-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
			
 
				-				 : fillPath( _color );
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	//
			
 
				-
			
 
				-	function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
			
 
				-
			
 
				-		_context.beginPath();
			
 
				-		_context.moveTo( x0, y0 );
			
 
				-		_context.lineTo( x1, y1 );
			
 
				-		_context.lineTo( x2, y2 );
			
 
				-		_context.closePath();
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function strokePath( color, linewidth, linecap, linejoin ) {
			
 
				-
			
 
				-		setLineWidth( linewidth );
			
 
				-		setLineCap( linecap );
			
 
				-		setLineJoin( linejoin );
			
 
				-		setStrokeStyle( color.getStyle() );
			
 
				-
			
 
				-		_context.stroke();
			
 
				-
			
 
				-		_elemBox.expandByScalar( linewidth * 2 );
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function fillPath( color ) {
			
 
				-
			
 
				-		setFillStyle( color.getStyle() );
			
 
				-		_context.fill();
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function textureToPattern( texture ) {
			
 
				-
			
 
				-		if ( texture.version === 0 ||
			
 
				-			texture instanceof THREE.CompressedTexture ||
			
 
				-			texture instanceof THREE.DataTexture ) {
			
 
				-
			
 
				-			return {
			
 
				-				canvas: undefined,
			
 
				-				version: texture.version
			
 
				-			};
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		var image = texture.image;
			
 
				-
			
 
				-		if ( image.complete === false ) {
			
 
				-
			
 
				-			return {
			
 
				-				canvas: undefined,
			
 
				-				version: 0
			
 
				-			};
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		var repeatX = texture.wrapS === THREE.RepeatWrapping || texture.wrapS === THREE.MirroredRepeatWrapping;
			
 
				-		var repeatY = texture.wrapT === THREE.RepeatWrapping || texture.wrapT === THREE.MirroredRepeatWrapping;
			
 
				-
			
 
				-		var mirrorX = texture.wrapS === THREE.MirroredRepeatWrapping;
			
 
				-		var mirrorY = texture.wrapT === THREE.MirroredRepeatWrapping;
			
 
				-
			
 
				-		//
			
 
				-
			
 
				-		var canvas = document.createElement( 'canvas' );
			
 
				-		canvas.width = image.width * ( mirrorX ? 2 : 1 );
			
 
				-		canvas.height = image.height * ( mirrorY ? 2 : 1 );
			
 
				-
			
 
				-		var context = canvas.getContext( '2d' );
			
 
				-		context.setTransform( 1, 0, 0, - 1, 0, image.height );
			
 
				-		context.drawImage( image, 0, 0 );
			
 
				-
			
 
				-		if ( mirrorX === true ) {
			
 
				-
			
 
				-			context.setTransform( - 1, 0, 0, - 1, image.width, image.height );
			
 
				-			context.drawImage( image, - image.width, 0 );
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		if ( mirrorY === true ) {
			
 
				-
			
 
				-			context.setTransform( 1, 0, 0, 1, 0, 0 );
			
 
				-			context.drawImage( image, 0, image.height );
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		if ( mirrorX === true && mirrorY === true ) {
			
 
				-
			
 
				-			context.setTransform( - 1, 0, 0, 1, image.width, 0 );
			
 
				-			context.drawImage( image, - image.width, image.height );
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		var repeat = 'no-repeat';
			
 
				-
			
 
				-		if ( repeatX === true && repeatY === true ) {
			
 
				-
			
 
				-			repeat = 'repeat';
			
 
				-
			
 
				-		} else if ( repeatX === true ) {
			
 
				-
			
 
				-			repeat = 'repeat-x';
			
 
				-
			
 
				-		} else if ( repeatY === true ) {
			
 
				-
			
 
				-			repeat = 'repeat-y';
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		var pattern = _context.createPattern( canvas, repeat );
			
 
				-
			
 
				-		if ( texture.onUpdate ) texture.onUpdate( texture );
			
 
				-
			
 
				-		return {
			
 
				-			canvas: pattern,
			
 
				-			version: texture.version
			
 
				-		};
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {
			
 
				-
			
 
				-		var pattern = _patterns[ texture.id ];
			
 
				-
			
 
				-		if ( pattern === undefined || pattern.version !== texture.version ) {
			
 
				-
			
 
				-			pattern = textureToPattern( texture );
			
 
				-			_patterns[ texture.id ] = pattern;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		if ( pattern.canvas !== undefined ) {
			
 
				-
			
 
				-			setFillStyle( pattern.canvas );
			
 
				-
			
 
				-		} else {
			
 
				-
			
 
				-			setFillStyle( 'rgba( 0, 0, 0, 1)' );
			
 
				-			_context.fill();
			
 
				-			return;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
			
 
				-
			
 
				-		var a, b, c, d, e, f, det, idet,
			
 
				-			offsetX = texture.offset.x / texture.repeat.x,
			
 
				-			offsetY = texture.offset.y / texture.repeat.y,
			
 
				-			width = texture.image.width * texture.repeat.x,
			
 
				-			height = texture.image.height * texture.repeat.y;
			
 
				-
			
 
				-		u0 = ( u0 + offsetX ) * width;
			
 
				-		v0 = ( v0 + offsetY ) * height;
			
 
				-
			
 
				-		u1 = ( u1 + offsetX ) * width;
			
 
				-		v1 = ( v1 + offsetY ) * height;
			
 
				-
			
 
				-		u2 = ( u2 + offsetX ) * width;
			
 
				-		v2 = ( v2 + offsetY ) * height;
			
 
				-
			
 
				-		x1 -= x0; y1 -= y0;
			
 
				-		x2 -= x0; y2 -= y0;
			
 
				-
			
 
				-		u1 -= u0; v1 -= v0;
			
 
				-		u2 -= u0; v2 -= v0;
			
 
				-
			
 
				-		det = u1 * v2 - u2 * v1;
			
 
				-
			
 
				-		if ( det === 0 ) return;
			
 
				-
			
 
				-		idet = 1 / det;
			
 
				-
			
 
				-		a = ( v2 * x1 - v1 * x2 ) * idet;
			
 
				-		b = ( v2 * y1 - v1 * y2 ) * idet;
			
 
				-		c = ( u1 * x2 - u2 * x1 ) * idet;
			
 
				-		d = ( u1 * y2 - u2 * y1 ) * idet;
			
 
				-
			
 
				-		e = x0 - a * u0 - c * v0;
			
 
				-		f = y0 - b * u0 - d * v0;
			
 
				-
			
 
				-		_context.save();
			
 
				-		_context.transform( a, b, c, d, e, f );
			
 
				-		_context.fill();
			
 
				-		_context.restore();
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	/*
			
 
				-	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
			
 
				-
			
 
				-		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
			
 
				-
			
 
				-		var a, b, c, d, e, f, det, idet,
			
 
				-		width = image.width - 1,
			
 
				-		height = image.height - 1;
			
 
				-
			
 
				-		u0 *= width; v0 *= height;
			
 
				-		u1 *= width; v1 *= height;
			
 
				-		u2 *= width; v2 *= height;
			
 
				-
			
 
				-		x1 -= x0; y1 -= y0;
			
 
				-		x2 -= x0; y2 -= y0;
			
 
				-
			
 
				-		u1 -= u0; v1 -= v0;
			
 
				-		u2 -= u0; v2 -= v0;
			
 
				-
			
 
				-		det = u1 * v2 - u2 * v1;
			
 
				-
			
 
				-		idet = 1 / det;
			
 
				-
			
 
				-		a = ( v2 * x1 - v1 * x2 ) * idet;
			
 
				-		b = ( v2 * y1 - v1 * y2 ) * idet;
			
 
				-		c = ( u1 * x2 - u2 * x1 ) * idet;
			
 
				-		d = ( u1 * y2 - u2 * y1 ) * idet;
			
 
				-
			
 
				-		e = x0 - a * u0 - c * v0;
			
 
				-		f = y0 - b * u0 - d * v0;
			
 
				-
			
 
				-		_context.save();
			
 
				-		_context.transform( a, b, c, d, e, f );
			
 
				-		_context.clip();
			
 
				-		_context.drawImage( image, 0, 0 );
			
 
				-		_context.restore();
			
 
				-
			
 
				-	}
			
 
				-	*/
			
 
				-
			
 
				-	// Hide anti-alias gaps
			
 
				-
			
 
				-	function expand( v1, v2, pixels ) {
			
 
				-
			
 
				-		var x = v2.x - v1.x, y = v2.y - v1.y,
			
 
				-			det = x * x + y * y, idet;
			
 
				-
			
 
				-		if ( det === 0 ) return;
			
 
				-
			
 
				-		idet = pixels / Math.sqrt( det );
			
 
				-
			
 
				-		x *= idet; y *= idet;
			
 
				-
			
 
				-		v2.x += x; v2.y += y;
			
 
				-		v1.x -= x; v1.y -= y;
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	// Context cached methods.
			
 
				-
			
 
				-	function setOpacity( value ) {
			
 
				-
			
 
				-		if ( _contextGlobalAlpha !== value ) {
			
 
				-
			
 
				-			_context.globalAlpha = value;
			
 
				-			_contextGlobalAlpha = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setBlending( value ) {
			
 
				-
			
 
				-		if ( _contextGlobalCompositeOperation !== value ) {
			
 
				-
			
 
				-			if ( value === THREE.NormalBlending ) {
			
 
				-
			
 
				-				_context.globalCompositeOperation = 'source-over';
			
 
				-
			
 
				-			} else if ( value === THREE.AdditiveBlending ) {
			
 
				-
			
 
				-				_context.globalCompositeOperation = 'lighter';
			
 
				-
			
 
				-			} else if ( value === THREE.SubtractiveBlending ) {
			
 
				-
			
 
				-				_context.globalCompositeOperation = 'darker';
			
 
				-
			
 
				-			} else if ( value === THREE.MultiplyBlending ) {
			
 
				-
			
 
				-				_context.globalCompositeOperation = 'multiply';
			
 
				-
			
 
				-			}
			
 
				-
			
 
				-			_contextGlobalCompositeOperation = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setLineWidth( value ) {
			
 
				-
			
 
				-		if ( _contextLineWidth !== value ) {
			
 
				-
			
 
				-			_context.lineWidth = value;
			
 
				-			_contextLineWidth = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setLineCap( value ) {
			
 
				-
			
 
				-		// "butt", "round", "square"
			
 
				-
			
 
				-		if ( _contextLineCap !== value ) {
			
 
				-
			
 
				-			_context.lineCap = value;
			
 
				-			_contextLineCap = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setLineJoin( value ) {
			
 
				-
			
 
				-		// "round", "bevel", "miter"
			
 
				-
			
 
				-		if ( _contextLineJoin !== value ) {
			
 
				-
			
 
				-			_context.lineJoin = value;
			
 
				-			_contextLineJoin = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setStrokeStyle( value ) {
			
 
				-
			
 
				-		if ( _contextStrokeStyle !== value ) {
			
 
				-
			
 
				-			_context.strokeStyle = value;
			
 
				-			_contextStrokeStyle = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setFillStyle( value ) {
			
 
				-
			
 
				-		if ( _contextFillStyle !== value ) {
			
 
				-
			
 
				-			_context.fillStyle = value;
			
 
				-			_contextFillStyle = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-	function setLineDash( value ) {
			
 
				-
			
 
				-		if ( _contextLineDash.length !== value.length ) {
			
 
				-
			
 
				-			_context.setLineDash( value );
			
 
				-			_contextLineDash = value;
			
 
				-
			
 
				-		}
			
 
				-
			
 
				-	}
			
 
				-
			
 
				-};
			
--- a/examples/misc_lights_test.html
+++ b/examples/misc_lights_test.html
@@ -26,9 +26,6 @@
 
				 
			
 
				 		<script src="../build/three.js"></script>
			
 
				 
			
 
				-		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				-
			
 
				 		<script src="js/libs/stats.min.js"></script>
			
 
				 
			
 
				 		<script>
			
@@ -38,7 +35,7 @@
 
				 
			
 
				 			var container, stats;
			
 
				 
			
 
				-			var camera, scene, canvasRenderer, webglRenderer;
			
 
				+			var camera, scene, webglRenderer;
			
 
				 
			
 
				 			var mesh, geometry, material;
			
 
				 
			
@@ -112,11 +109,6 @@
 
				 				mesh.scale.set( 0.05, 0.05, 0.05 );
			
 
				 				pointLight.add( mesh );
			
 
				 
			
 
				-				canvasRenderer = new THREE.CanvasRenderer();
			
 
				-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
 
				-				container.appendChild( canvasRenderer.domElement );
			
 
				-
			
 
				 				webglRenderer = new THREE.WebGLRenderer();
			
 
				 				webglRenderer.setPixelRatio( window.devicePixelRatio );
			
 
				 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
@@ -141,7 +133,6 @@
 
				 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
			
 
				 				camera.updateProjectionMatrix();
			
 
				 
			
 
				-				canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
 
				 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			
 
				 
			
 
				 			}
			
@@ -200,7 +191,6 @@
 
				 				pointLight.position.x = 200 * Math.cos( r );
			
 
				 				pointLight.position.z = 200 * Math.sin( r );
			
 
				 
			
 
				-				canvasRenderer.render( scene, camera );
			
 
				 				webglRenderer.render( scene, camera );
			
 
				 
			
 
				 			}
			
--- a/examples/misc_ubiquity_test.html
+++ b/examples/misc_ubiquity_test.html
@@ -17,7 +17,6 @@
 
				 		<script src="../build/three.js"></script>
			
 
				 
			
 
				 		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				 		<script src="js/renderers/SVGRenderer.js"></script>
			
 
				 		<script src="js/renderers/SoftwareRenderer.js"></script>
			
 
				 
			
@@ -28,7 +27,7 @@
 
				 			var stats;
			
 
				 
			
 
				 			var camera, scene;
			
 
				-			var canvasRenderer, svgRenderer, softwareRenderer, webglRenderer;
			
 
				+			var svgRenderer, softwareRenderer, webglRenderer;
			
 
				 
			
 
				 			var mesh, group;
			
 
				 
			
@@ -187,11 +186,6 @@
 
				 				directional.position.set( - 1, 0.5, 0 );
			
 
				 				scene.add( directional );
			
 
				 
			
 
				-				canvasRenderer = new THREE.CanvasRenderer();
			
 
				-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				canvasRenderer.setSize( width, height );
			
 
				-				document.body.appendChild( canvasRenderer.domElement );
			
 
				-
			
 
				 				svgRenderer = new THREE.SVGRenderer();
			
 
				 				svgRenderer.setSize( width, height );
			
 
				 				svgRenderer.setQuality( 'low' );
			
@@ -223,7 +217,6 @@
 
				 				camera.aspect = width / height;
			
 
				 				camera.updateProjectionMatrix();
			
 
				 
			
 
				-				canvasRenderer.setSize( width, height );
			
 
				 				svgRenderer.setSize( width, height );
			
 
				 				softwareRenderer.setSize( width, height );
			
 
				 				webglRenderer.setSize( width, height );
			
@@ -253,7 +246,6 @@
 
				 
			
 
				 				scene.updateMatrixWorld();
			
 
				 
			
 
				-				canvasRenderer.render( scene, camera );
			
 
				 				svgRenderer.render( scene, camera );
			
 
				 				softwareRenderer.render( scene, camera );
			
 
				 				webglRenderer.render( scene, camera );
			
--- a/examples/misc_ubiquity_test2.html
+++ b/examples/misc_ubiquity_test2.html
@@ -17,7 +17,6 @@
 
				 		<script src="../build/three.js"></script>
			
 
				 
			
 
				 		<script src="js/renderers/Projector.js"></script>
			
 
				-		<script src="js/renderers/CanvasRenderer.js"></script>
			
 
				 
			
 
				 		<script src="js/libs/stats.min.js"></script>
			
 
				 
			
@@ -29,7 +28,7 @@
 
				 			var stats;
			
 
				 
			
 
				 			var camera, scene;
			
 
				-			var canvasRenderer, webglRenderer;
			
 
				+			var webglRenderer;
			
 
				 
			
 
				 			var mesh;
			
 
				 			var texture, texture1, texture2, texture3;
			
@@ -148,12 +147,6 @@
 
				 
			
 
				 				//
			
 
				 
			
 
				-				canvasRenderer = new THREE.CanvasRenderer();
			
 
				-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
			
 
				-				canvasRenderer.setSize( width, height );
			
 
				-				var container1 = document.getElementById( 'container1' );
			
 
				-				container1.appendChild( canvasRenderer.domElement );
			
 
				-
			
 
				 				webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
			
 
				 				webglRenderer.setPixelRatio( window.devicePixelRatio );
			
 
				 				webglRenderer.setSize( width, height );
			
@@ -177,7 +170,6 @@
 
				 				camera.aspect = width / height;
			
 
				 				camera.updateProjectionMatrix();
			
 
				 
			
 
				-				canvasRenderer.setSize( width, height );
			
 
				 				webglRenderer.setSize( width, height );
			
 
				 
			
 
				 			}
			
@@ -222,7 +214,6 @@
 
				 
			
 
				 				//
			
 
				 
			
 
				-				canvasRenderer.render( scene, camera );
			
 
				 				webglRenderer.render( scene, camera );
			
 
				 
			
 
				 			}
			
--- a/src/Three.Legacy.js
+++ b/src/Three.Legacy.js
@@ -1873,13 +1873,7 @@ export function Projector() {
 
				 
			
 
				 export function CanvasRenderer() {
			
 
				 
			
 
				-	console.error( 'THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js' );
			
 
				-
			
 
				-	this.domElement = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
			
 
				-	this.clear = function () {};
			
 
				-	this.render = function () {};
			
 
				-	this.setClearColor = function () {};
			
 
				-	this.setSize = function () {};
			
 
				+	console.error( 'THREE.CanvasRenderer has been removed' );
			
 
				 
			
 
				 }