Merge pull request #4 from mrdoob/dev

merge the commit from upstream

docs/api/en/audio/Audio.html

@@ -73,12 +73,15 @@
 		<p>Whether playback can be controlled using the [page:Audio.play play](),
 			[page:Audio.pause pause]() etc. methods. Default is *true*.</p>
 
-		<h3>[property:Number playbackRate]</h3>
-		<p>Speed of playback. Default is *1*.</p>
-
 		<h3>[property:Boolean isPlaying]</h3>
 		<p>Whether the audio is currently playing.</p>
 
+		<h3>[property:AudioListener listener]</h3>
+		<p>A reference to the listener object of this audio.</p>
+
+		<h3>[property:Number playbackRate]</h3>
+		<p>Speed of playback. Default is *1*.</p>
+
 		<h3>[property:Number startTime]</h3>
 		<p>The time at which the sound should begin to play. Same as the *when* paramter of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). Default is *0*.</p>
 

docs/api/en/audio/AudioListener.html

@@ -67,6 +67,8 @@
 		<h3>[property:AudioNode filter]</h3>
 		<p>Default is *null*.</p>
 
+		<h3>[property:Number timeDelta]</h3>
+		<p>Time delta value for audio entities. Use in context of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault](). Default is *0*.</p>
 
 		<h2>Methods</h2>
 

docs/api/en/cameras/CubeCamera.html

@@ -43,11 +43,17 @@
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [param:Number near], [param:Number far], [param:Number cubeResolution] )</h3>
+		<h3>[name]( [param:Number near], [param:Number far], [param:Number cubeResolution], [param:Object options] )</h3>
 		<p>
 		near -- The near clipping distance. <br />
 		far -- The far clipping distance <br />
-		cubeResolution -- Sets the length of the cube's edges.
+		cubeResolution -- Sets the length of the cube's edges. <br />
+		options - (optional) object that holds texture parameters passed to the auto-generated WebGLRenderTargetCube.
+		If not specified, the options default to:
+		<code>
+		{ format: RGBFormat, magFilter: LinearFilter, minFilter: LinearFilter }
+		</code>
+
 		</p>
 		<p>
 		Constructs a CubeCamera that contains 6 [page:PerspectiveCamera PerspectiveCameras] that

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>

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>

docs/api/en/core/BufferGeometry.html

@@ -232,7 +232,7 @@
 
 		<h3>[method:null computeBoundingBox]()</h3>
 		<p>
-		Computes bounding box of the geometry, updating [param:.boundingBox] attribute.<br />
+		Computes bounding box of the geometry, updating [page:.boundingBox] attribute.<br />
 		Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are *null*.
 		</p>
 

docs/api/en/core/Geometry.html

@@ -266,7 +266,8 @@
 		</p>
 
 		<h3>[method:Geometry fromBufferGeometry]( [param:BufferGeometry geometry] )</h3>
-		<p>Convert a [page:BufferGeometry] to a Geometry.</p>
+		<p>Convert a [page:BufferGeometry] to a Geometry. <br />
+		The array used to store the vertices in the bufferGeometry is a non indexed array, so the resultant geometry may contain duplicated vertices. Use [page:mergeVertices] to remove them.</p>
 
 		<h3>[method:Geometry lookAt] ( [param:Vector3 vector] )</h3>
 		<p>

docs/api/en/core/InterleavedBuffer.html

@@ -69,12 +69,12 @@
 		A version number, incremented every time the needsUpdate property is set to true.
 		</p>
 
-		<h3>[property:Integer isInterleavedBuffer]</h3>
+		<h3>[property:Boolean isInterleavedBuffer]</h3>
 		<p>
 		Default is *true*.
 		</p>
 
-		<h3>[property:Integer needsUpdate]</h3>
+		<h3>[property:Boolean needsUpdate]</h3>
 		<p>
 		Default is *false*. Setting this to true increments [page:InterleavedBuffer.version version].
 		</p>

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>

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>

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 />

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 />

docs/api/en/loaders/JSONLoader.html

@@ -18,8 +18,7 @@
 		<h2>Example</h2>
 
 		<p>
-		[example:webgl_loader_json WebGL / loader / json]<br />
-		[example:webgl_loader_json_objconverter WebGL / loader / json / objconverter]
+		[example:webgl_loader_json WebGL / loader / json]
 		</p>
 
 		<code>

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>

docs/api/en/materials/Material.html

@@ -175,13 +175,6 @@
 		Default is *1.0*.
 		</p>
 
-		<h3>[property:Float overdraw]</h3>
-		<p>
-		Amount of triangle expansion at draw time.
-		This is a workaround for cases when gaps appear between triangles when using [page:CanvasRenderer].
-		*0.5* tends to give good results across browsers. Default is *0*.
-		</p>
-
 		<h3>[property:Boolean polygonOffset]</h3>
 		<p>
 		Whether to use polygon offset. Default is *false*. This corresponds to the *GL_POLYGON_OFFSET_FILL* WebGL feature.

docs/api/en/materials/ShaderMaterial.html

@@ -444,7 +444,7 @@ this.extensions = {
 		<h3>[property:Float wireframeLinewidth]</h3>
 		<p>Controls wireframe thickness. Default is 1.<br /><br />
 
-		Due to limitations of the [link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile)
+		Due to limitations of the [link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]
 		with the [page:WebGLRenderer WebGL] renderer on most platforms linewidth will
 		always be 1 regardless of the set value.
 		</p>

docs/api/en/materials/SpriteMaterial.html

@@ -18,7 +18,6 @@
 		<div>
 			[example:webgl_sprites WebGL / sprites]<br />
 			[example:misc_ubiquity_test misc / ubiquity / test]<br />
-			[example:misc_ubiquity_test2 misc / ubiquity / test2]<br />
 			[example:software_sandbox software / sandbox]<br />
 			[example:svg_sandbox svg / sandbox]<br />
 			[example:webgl_materials_cubemap_dynamic webgl / materials / cubemap / dynamic]

docs/api/zh/audio/Audio.html

@@ -78,6 +78,9 @@
 		<h3>[property:Boolean isPlaying]</h3>
 		<p>是否正在播放</p>
 
+		<h3>[property:AudioListener listener]</h3>
+		<p>A reference to the listener object of this audio.</p>
+
 		<h3>[property:Number startTime]</h3>
 		<p>开始播放的时间. 和[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()的*when*参数一样. 默认为 *0*.</p>
 

docs/api/zh/audio/AudioListener.html

@@ -66,6 +66,8 @@
 		<h3>[property:AudioNode filter]</h3>
 		<p>默认为*null*.</p>
 
+		<h3>[property:Number timeDelta]</h3>
+		<p>Time delta value for audio entities. Use in context of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault](). Default is *0*.</p>
 
 		<h2>方法</h2>
 

docs/api/zh/materials/Material.html

@@ -147,11 +147,6 @@
 
 </p>
 
-<h3>[property:Float overdraw]</h3>
-<p>绘制时的三角形扩展量。对于使用[page:CanvasRenderer]时三角形之间出现间隙的情况，这是一种解决方法。
-    *0.5*往往会在浏览器中有良好的结果。默认值为*0*。
-</p>
-
 <h3>[property:Boolean polygonOffset]</h3>
 <p> 是否使用多边形偏移。默认值为*false*。这对应于WebGL的*GL_POLYGON_OFFSET_FILL*功能。
 </p>

docs/api/zh/materials/SpriteMaterial.html

@@ -18,7 +18,6 @@
 		<div>
 			[example:webgl_sprites WebGL / sprites]<br />
 			[example:misc_ubiquity_test misc / ubiquity / test]<br />
-			[example:misc_ubiquity_test2 misc / ubiquity / test2]<br />
 			[example:software_sandbox software / sandbox]<br />
 			[example:svg_sandbox svg / sandbox]<br />
 			[example:webgl_materials_cubemap_dynamic webgl / materials / cubemap / dynamic]

docs/examples/Lut.html

@@ -91,7 +91,7 @@
 		Sets the labels of the legend of this Lut.
 		</p>
 
-		<h3>[method:Lut setminV]( [param:Float minV] )</h3>
+		<h3>[method:Lut setMin]( [param:Float minV] )</h3>
 		<p>
 		minV — The minimum value to be represented with the lookup table.<br />
 		</p>
@@ -99,7 +99,7 @@
 		Sets this Lut with the minimum value to be represented.
 		</p>
 
-		<h3>[method:Lut setmaxV]( [param:Float maxV] )</h3>
+		<h3>[method:Lut setMax]( [param:Float maxV] )</h3>
 		<p>
 		maxV — The maximum value to be represented with the lookup table.<br />
 		</p>

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>

docs/examples/loaders/GLTFLoader.html

@@ -32,8 +32,20 @@
 			<li>KHR_materials_pbrSpecularGlossiness</li>
 			<li>KHR_materials_unlit</li>
 			<li>KHR_lights_punctual (experimental)</li>
+			<li>KHR_texture_transform<sup>*</sup></li>
+			<li>MSFT_texture_dds</li>
 		</ul>
 
+		<p><i>
+			<sup>*</sup>UV transforms are supported, with several key limitations. Transforms applied to
+			a texture using the first UV slot (all textures except aoMap and lightMap) must share the same
+			transform, or no transfor at all. The aoMap and lightMap textures cannot be transformed. No
+			more than one transform may be used per material. Each use of a texture with a unique
+			transform will result in an additional GPU texture upload. See
+			#[link:https://github.com/mrdoob/three.js/pull/13831 13831] and
+			#[link:https://github.com/mrdoob/three.js/issues/12788 12788].
+		</i></p>
+
 		<h2>Example</h2>
 
 		<code>
@@ -85,30 +97,30 @@
 		providing a Promise replacement.</p>
 
 		<h2>Textures</h2>
-		
+
 		<p>Textures containing color information (.map, .emissiveMap, and .specularMap) always use sRGB colorspace in
 		glTF, while vertex colors and material properties (.color, .emissive, .specular) use linear colorspace. In a
 		typical rendering workflow, textures are converted to linear colorspace by the renderer, lighting calculations
 		are made, then final output is converted back to sRGB and displayed on screen. Unless you need post-processing
 		in linear colorspace, always configure [page:WebGLRenderer] as follows when using glTF:</p>
-			
+
 		<code>
 		renderer.gammaOutput = true;
 		renderer.gammaFactor = 2.2;
 		</code>
-		
+
 		<p>GLTFLoader will automatically configure textures referenced from a .gltf or .glb file correctly, with the
 		assumption that the renderer is set up as shown above. When loading textures externally (e.g., using
 		[page:TextureLoader]) and applying them to a glTF model, colorspace and orientation must be given:</p>
-		
+
 		<code>
 		// If texture is used for color information, set colorspace.
 		texture.encoding = THREE.sRGBEncoding;
 
 		// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
 		texture.flipY = false;
-		</code>		
-		
+		</code>
+
 		<h2>Custom extensions</h2>
 
 		<p>

docs/examples/loaders/LoaderSupport.html

@@ -375,6 +375,15 @@
 		<p>
 			Set the content of this resource
 		</p>
+
+
+		<h3>[method:null setResourcePath] ( [param:String resourcePath] )</h3>
+		<p>
+			[page:String resourcePath] - URL
+		</p>
+		<p>
+			Allows to specify resourcePath for dependencies of specified resource.
+		</p>
 		<br>
 		<br>
 

docs/examples/loaders/OBJLoader2.html

@@ -123,6 +123,15 @@
 		</p>
 
 
+		<h3>[method:null setResourcePath] ( [param:String resourcePath] )</h3>
+		<p>
+			[page:String resourcePath] - URL
+		</p>
+		<p>
+			Allows to specify resourcePath for dependencies of specified resource.
+		</p>
+
+
 		<h3>[method:null setStreamMeshesTo] ( [param:Object3D streamMeshesTo] )</h3>
 		<p>
 			[page:Object3D streamMeshesTo] - Object already attached to scenegraph where new meshes will be attached to

docs/examples/loaders/SVGLoader.html

@@ -91,7 +91,7 @@
 		<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
 		<p>
 		[page:String url] — A string containing the path/URL of the <em>.svg</em> file.<br />
-		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives the loaded [page:SVGDocument] as an argument.<br />
+		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives an array of [page:ShapePath] as an argument.<br />
 		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains [page:Integer total] and [page:Integer loaded] bytes.<br />
 		[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives the error as an argument.<br />
 		</p>

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>

docs/index.html

@@ -41,18 +41,30 @@
 
 			var hash = window.location.hash.substring( 1 );
 
-			// Route non-localised api links
+			// Localisation
 
-			if ( /^(api|manual)/.test( hash ) && /^(api|manual)\/(en|zh)\//.test( hash ) === false ) {
+			var language = 'en';
+
+			if ( /^(api|manual)/.test( hash ) ) {
+
+				var hashLanguage = /^(api|manual)\/(en|zh)\//.exec( hash );
+
+				if ( hashLanguage === null ) {
+
+					// Route old non-localised api links
+
+					window.location.hash = hash.replace( /^(api|manual)/, '$1/en' );
 
-				window.location.hash = hash.replace( /^(api|manual)/, '$1/en' );
+				} else {
+
+					language = hashLanguage[ 2 ];
+
+				}
 
 			}
 
 			//
 
-			var language = 'en';
-
 			function setLanguage( value ) {
 
 				language = value;
@@ -406,7 +418,8 @@
 
 		</script>
 
-		<script src="../build/three.min.js"></script> <!-- console sandbox -->
+		<!-- console sandbox -->
+		<script src="../build/three.min.js"></script>
 
 	</body>
 

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>

docs/manual/en/introduction/How-to-use-WebGL2.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="list.js"></script>
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>[name]</h1>
+	<br />
+
+	<p>
+		Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a
+		WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look
+		at the following workflow.
+	</p>
+
+	<h2>Workflow</h2>
+
+	<p>
+		Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability.
+		To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js] into your project.
+	</p>
+
+	<code>
+&lt;script src="/path/to/WebGL.js"&gt;&lt;/script&gt;
+	</code>
+
+	<p>
+		Next, use a code similar to the following in order to perform the availability check.
+	</p>
+
+	<code>
+
+if ( WEBGL.isWebGL2Available() === false ) {
+
+	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+}
+	</code>
+
+	<p>
+		Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context
+		to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and
+		automatically convert the built-in material's shader code to GLSL ES 3.00.
+	</p>
+
+	<code>
+var canvas = document.createElement( 'canvas' );
+var context = canvas.getContext( 'webgl2' );
+var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+	</code>
+
+	<p>
+		Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own
+		implementation. First, the GLSL ES 3.00 code.
+	</p>
+
+	<code>
+&lt;script id="vs" type="x-shader/x-vertex"&gt;
+#version 300 es
+
+void main() {
+
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
+&lt;/script&gt;
+&lt;script id="fs" type="x-shader/x-fragment"&gt;
+#version 300 es
+
+precision highp float;
+precision highp int;
+out vec4 out_FragColor;
+
+void main() {
+
+	out_FragColor = vec4( 1.0 );
+
+}
+&lt;/script&gt;
+	</code>
+	<p>
+		Second, the corresponding material creation in JavaScript.
+	</p>
+	<code>
+var material = new THREE.ShaderMaterial( {
+	vertexShader: document.getElementById( 'vs' ).textContent.trim(),
+	fragmentShader: document.getElementById( 'fs' ).textContent.trim()
+} );
+	</code>
+
+	<h2>Next Steps</h2>
+
+	<p>
+		Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
+
+		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
+		[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
+	</p>
+
+	<h2>Supported features</h2>
+
+	<p>
+		Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an
+		overview about what's already available in the latest version of three.js.
+		<ul>
+			<li>3D Textures</li>
+		</ul>
+
+	</p>
+
+</body>
+
+</html>

docs/manual/en/introduction/Loading-3D-models.html

@@ -2,127 +2,174 @@
 <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" />
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="list.js"></script>
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
 </head>
 
 <body>
-  <h1>[name]</h1>
-  <br />
-
-  <p>
-    3D models are available in hundreds of file formats, each with different
-    purposes, assorted features, and varying complexity. Although
-    <a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
-    three.js provides many loaders</a>, choosing the right format and
-    workflow will save time and frustration later on. Some formats are
-    difficult to work with, inefficient for realtime experiences, or simply not
-    fully supported at this time.
-  </p>
-
-  <p>
-    This guide provides a workflow recommended for most users, and suggestions
-    for what to try if things don't go as expected.
-  </p>
-
-  <h2>Before we start</h2>
-
-  <p>
-    If you're new to running a local server, begin with
-    [link:#manual/introduction/How-to-run-things-locally how to run things locally]
-    first. Many common errors viewing 3D models can be avoided by hosting files
-    correctly.
-  </p>
-
-  <h2>Recommended workflow</h2>
-
-  <p>
-    Where possible, we recommend using glTF (GL Transmission Format). Both
-    <small>.GLB</small> and <small>.GLTF</small> versions of the format are
-    well supported. Because glTF is focused on runtime asset delivery, it is
-    compact to transmit and fast to load. Features include meshes, materials,
-    textures, skins, skeletons, morph targets, animations, lights, and
-    cameras.
-  </p>
-
-  <p>
-    Public-domain glTF files are available on sites like
-    <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-    Sketchfab</a>, or various tools include glTF export:
-  </p>
-
-  <ul>
-    <li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
-    <li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
-    <li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
-    <li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
-    <li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
-    <li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
-    <li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
-    <li>&hellip;and <a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">many more</a></li>
-  </ul>
-
-  <p>
-    If your preferred tools do not support glTF, consider requesting glTF
-    export from the authors, or posting on
-    <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
-  </p>
-
-  <p>
-    When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA
-    are also available and regularly maintained.
-  </p>
-
-  <h2>Troubleshooting</h2>
-
-  <p>
-    You've spent hours modeling an artisanal masterpiece, you load it into
-    the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely.
-    Start with these troubleshooting steps:
-  </p>
-
-  <ol>
-    <li>
-      Check the JavaScript console for errors, and make sure you've used an
-      <em>onError</em> callback when calling <em>.load()</em> to log the result.
-    </li>
-    <li>
-      View the model in another application. For glTF, drag-and-drop viewers
-      are available for
-      <a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> and
-      <a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. If the model
-      appears correctly in one or more applications,
-      <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">file a bug against three.js</a>.
-      If the model cannot be shown in any application, we strongly encourage
-      filing a bug with the application used to create the model.
-    </li>
-    <li>
-      Try scaling the model up or down by a factor of 1000. Many models are
-      scaled differently, and large models may not appear if the camera is
-      inside the model.
-    </li>
-    <li>
-      Look for failed texture requests in the network tab, like
-      <em>C:\\Path\To\Model\texture.jpg</em>. Use paths relative to your
-      model instead, such as <em>images/texture.jpg</em> — this may require
-      editing the model file in a text editor.
-    </li>
-  </ol>
-
-  <h2>Asking for help</h2>
-
-  <p>
-    If you've gone through the troubleshooting process above and your model
-    still isn't working, the right approach to asking for help will get you to
-    a solution faster. Post a question on the
-    <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> and, whenever possible,
-    include your model (or a simpler model with the same problem) in any formats
-    you have available. Include enough information for someone else to reproduce
-    the issue quickly — ideally, a live demo.
-  </p>
+	<h1>[name]</h1>
+	<br />
+
+	<p>
+		3D models are available in hundreds of file formats, each with different
+		purposes, assorted features, and varying complexity. Although
+		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
+		three.js provides many loaders</a>, choosing the right format and
+		workflow will save time and frustration later on. Some formats are
+		difficult to work with, inefficient for realtime experiences, or simply not
+		fully supported at this time.
+	</p>
+
+	<p>
+		This guide provides a workflow recommended for most users, and suggestions
+		for what to try if things don't go as expected.
+	</p>
+
+	<h2>Before we start</h2>
+
+	<p>
+		If you're new to running a local server, begin with
+		[link:#manual/introduction/How-to-run-things-locally how to run things locally]
+		first. Many common errors viewing 3D models can be avoided by hosting files
+		correctly.
+	</p>
+
+	<h2>Recommended workflow</h2>
+
+	<p>
+		Where possible, we recommend using glTF (GL Transmission Format). Both
+		<small>.GLB</small> and <small>.GLTF</small> versions of the format are
+		well supported. Because glTF is focused on runtime asset delivery, it is
+		compact to transmit and fast to load. Features include meshes, materials,
+		textures, skins, skeletons, morph targets, animations, lights, and
+		cameras.
+	</p>
+
+	<p>
+		Public-domain glTF files are available on sites like
+		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
+		Sketchfab</a>, or various tools include glTF export:
+	</p>
+
+	<ul>
+		<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
+		<li>&hellip;and <a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">many more</a></li>
+	</ul>
+
+	<p>
+		If your preferred tools do not support glTF, consider requesting glTF
+		export from the authors, or posting on
+		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
+	</p>
+
+	<p>
+		When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA
+		are also available and regularly maintained.
+	</p>
+
+	<h2>Loading</h2>
+
+	<p>
+		Only a few loaders ([page:ObjectLoader] and [page:JSONLoader]) are included by default with
+		three.js — others should be added to your page individually. Depending on your
+		preference and comfort with build tools, choose one of the following:
+	</p>
+
+	<code>
+		// global script
+		&lt;script src="GLTFLoader.js"&gt;&lt;/script&gt;
+
+		// commonjs
+		var THREE = window.THREE = require('three');
+		require('three/examples/js/loaders/GLTFLoader');
+	</code>
+
+	<p>
+		Currently three.js examples are not available as ES modules (import &hellip; from '&hellip;').
+		Several workarounds are discussed in
+		<a href="https://github.com/KhronosGroup/glTF/issues/9562" target="_blank" rel="noopener">#9562</a>.
+	</p>
+
+	<p>
+		Once you've imported a loader, you're ready to add a model to your scene. Syntax varies among
+		different loaders — when using another format, check the examples and documentation for that
+		loader. For glTF, basic usage would be:
+	</p>
+
+	<code>
+		var loader = new THREE.GLTFLoader();
+
+		loader.load( 'path/to/model.glb', function ( gltf ) {
+
+			scene.add( gltf.scene );
+
+		}, undefined, function ( error ) {
+
+			console.error( error );
+
+		} );
+	</code>
+
+	<p>
+		See [page:GLTFLoader GLTFLoader documentation] for further details.
+	</p>
+
+	<h2>Troubleshooting</h2>
+
+	<p>
+		You've spent hours modeling an artisanal masterpiece, you load it into
+		the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely.
+		Start with these troubleshooting steps:
+	</p>
+
+	<ol>
+		<li>
+			Check the JavaScript console for errors, and make sure you've used an
+			<em>onError</em> callback when calling <em>.load()</em> to log the result.
+		</li>
+		<li>
+			View the model in another application. For glTF, drag-and-drop viewers
+			are available for
+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> and
+			<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. If the model
+			appears correctly in one or more applications,
+			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">file a bug against three.js</a>.
+			If the model cannot be shown in any application, we strongly encourage
+			filing a bug with the application used to create the model.
+		</li>
+		<li>
+			Try scaling the model up or down by a factor of 1000. Many models are
+			scaled differently, and large models may not appear if the camera is
+			inside the model.
+		</li>
+		<li>
+			Look for failed texture requests in the network tab, like
+			<em>C:\\Path\To\Model\texture.jpg</em>. Use paths relative to your
+			model instead, such as <em>images/texture.jpg</em> — this may require
+			editing the model file in a text editor.
+		</li>
+	</ol>
+
+	<h2>Asking for help</h2>
+
+	<p>
+		If you've gone through the troubleshooting process above and your model
+		still isn't working, the right approach to asking for help will get you to
+		a solution faster. Post a question on the
+		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> and, whenever possible,
+		include your model (or a simpler model with the same problem) in any formats
+		you have available. Include enough information for someone else to reproduce
+		the issue quickly — ideally, a live demo.
+	</p>
 
 </body>
 

docs/manual/zh/introduction/How-to-use-WebGL2.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="list.js"></script>
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>[name]</h1>
+	<br />
+
+	<p>
+		Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a
+		WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look
+		at the following workflow.
+	</p>
+
+	<h2>Workflow</h2>
+
+	<p>
+		Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability.
+		To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js] into your project.
+	</p>
+
+	<code>
+&lt;script src="/path/to/WebGL.js"&gt;&lt;/script&gt;
+	</code>
+
+	<p>
+		Next, use a code similar to the following in order to perform the availability check.
+	</p>
+
+	<code>
+
+if ( WEBGL.isWebGL2Available() === false ) {
+
+	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+}
+	</code>
+
+	<p>
+		Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context
+		to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and
+		automatically convert the built-in material's shader code to GLSL ES 3.00.
+	</p>
+
+	<code>
+var canvas = document.createElement( 'canvas' );
+var context = canvas.getContext( 'webgl2' );
+var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+	</code>
+
+	<p>
+		Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own
+		implementation. First, the GLSL ES 3.00 code.
+	</p>
+
+	<code>
+&lt;script id="vs" type="x-shader/x-vertex"&gt;
+#version 300 es
+
+void main() {
+
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
+&lt;/script&gt;
+&lt;script id="fs" type="x-shader/x-fragment"&gt;
+#version 300 es
+
+precision highp float;
+precision highp int;
+out vec4 out_FragColor;
+
+void main() {
+
+	out_FragColor = vec4( 1.0 );
+
+}
+&lt;/script&gt;
+	</code>
+	<p>
+		Second, the corresponding material creation in JavaScript.
+	</p>
+	<code>
+var material = new THREE.ShaderMaterial( {
+	vertexShader: document.getElementById( 'vs' ).textContent.trim(),
+	fragmentShader: document.getElementById( 'fs' ).textContent.trim()
+} );
+	</code>
+
+	<h2>Next Steps</h2>
+
+	<p>
+		Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
+
+		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
+		[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
+	</p>
+
+	<h2>Supported features</h2>
+
+	<p>
+		Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an
+		overview about what's already available in the latest version of three.js.
+		<ul>
+			<li>3D Textures</li>
+		</ul>
+
+	</p>
+
+</body>
+
+</html>

docs/manual/zh/introduction/Loading-3D-models.html

@@ -2,107 +2,111 @@
 <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" />
+	<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>载入3D模型（[name]）</h1>
-  <br />
+	<h1>载入3D模型（[name]）</h1>
+	<br />
 
-  <p>
+	<p>
 	3D模型目前的有成千上万种格式可供选择，但每一种格式都具有不同的目的、用途以及复杂性。
-    虽然<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
+		虽然<a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders" target="_blank" rel="noopener">
 	three.js已经提供了多种导入工具</a>
 	但是选择正确的文件格式以及工作流程将可以节省很多时间，以及避免很多挫折。某些格式难以使用，或者实时体验效率低下，或者目前尚未得到完全支持。
-  </p>
+	</p>
 
-  <p>
+	<p>
 		对大多数用户，本指南向你推荐了一个工作流程，并向你提供了一些当没有达到预期效果时的建议。
 
-  </p>
+	</p>
 
-  <h2>在开始之前</h2>
+	<h2>在开始之前</h2>
 
-  <p>
-	  如果你是第一次运行一个本地服务器，可以先阅读[link:#manual/introduction/How-to-run-things-locally how to run things locally]。
-	  正确地托管文件，可以避免很多查看3D模型时的常见错误。
-  </p>
+	<p>
+		如果你是第一次运行一个本地服务器，可以先阅读[link:#manual/introduction/How-to-run-things-locally how to run things locally]。
+		正确地托管文件，可以避免很多查看3D模型时的常见错误。
+	</p>
 
-  <h2>推荐的工作流程</h2>
+	<h2>推荐的工作流程</h2>
 
-  <p>
-	  如果有可能的话，我们推荐使用glTF（gl传输格式）。<small>.GLB</small>和<small>.GLTF</small>是这种格式的这两种不同版本，
-	  都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。
-	  功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。
-  </p>
+	<p>
+		如果有可能的话，我们推荐使用glTF（gl传输格式）。<small>.GLB</small>和<small>.GLTF</small>是这种格式的这两种不同版本，
+		都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。
+		功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。
+	</p>
 
-  <p>
-	  公共领域的glTF文件可以在网上找到，例如
-    <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-    Sketchfab</a>，或者很多工具包含了glTF的导出功能：
-  </p>
+	<p>
+		公共领域的glTF文件可以在网上找到，例如
+		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
+		Sketchfab</a>，或者很多工具包含了glTF的导出功能：
+	</p>
 
-  <ul>
-    <li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
-    <li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
-    <li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
-    <li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
-    <li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
-    <li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
-    <li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
-    <li>……<a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">还有更多</a></li>
-  </ul>
+	<ul>
+		<li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter" target="_blank" rel="noopener">glTF-Blender-Exporter</a> by the Khronos Group</li>
+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
+		<li>……<a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">还有更多</a></li>
+	</ul>
 
-  <p>
-	  倘若你所喜欢的工具不支持glTF格式，请考虑向该工具的作者请求glTF导出功能，
-	  或者在<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>贴出你的想法。
+	<p>
+		倘若你所喜欢的工具不支持glTF格式，请考虑向该工具的作者请求glTF导出功能，
+		或者在<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>贴出你的想法。
 
-  </p>
+	</p>
 
-  <p>
-	  当glTF不可用的时候，诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。
-  </p>
+	<p>
+		当glTF不可用的时候，诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。
+	</p>
 
-  <h2>故障排除</h2>
+	<h2>Loading</h2>
 
-  <p>
-	  你花了几个小时亲手建了一个堪称杰作的模型，现在你把它给导入到网页中——
-	  哦，天呐~😭它导入以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了！<br>
-	  接下来我们来按照下面的步骤排除故障：
-  </p>
+	<p>TODO.</p>
 
-  <ol>
-    <li>
+	<h2>故障排除</h2>
+
+	<p>
+		你花了几个小时亲手建了一个堪称杰作的模型，现在你把它给导入到网页中——
+		哦，天呐~😭它导入以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了！<br>
+		接下来我们来按照下面的步骤排除故障：
+	</p>
+
+	<ol>
+		<li>
 		在Javascript的Console中查找错误，并确定当你调用<em>.load()</em>的时候，使用了<em>onError</em>回调函数来输出结果。
-    </li>
-    <li>
+		</li>
+		<li>
 		请在别的应用程序中查看3D模型。对于glTF格式的模型来说，可以直接在下面的应用程序中进行查看：
-      <a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>和
-	  <a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>。
+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>和
+		<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>。
 	 如果该模型能够在一个或者更多应用程序里正确地呈现，请<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">点击这里向three.js提交Bug报告</a>。
 	 如果模型不能在任意一个应用程序里显示，我们强烈鼓励你向我们提交Bug报告，并告知我们你的模型是使用哪一款应用程序创建的。
 
-    </li>
-    <li>
+		</li>
+		<li>
 		尝试将模型放大或缩小到原来的1000倍。许多模型的缩放比例各不相同，倘若摄像机位于相机内，则大型模型将可能不会显示。
-    </li>
-    <li>
+		</li>
+		<li>
 		在网络面板中查找失败的纹理贴图请求，像<em>C:\\Path\To\Model\texture.jpg</em>。使用相对于你的模型的文件路径，例如
 		<em>images/texture.jpg</em>——这或许需要在文本编辑器中来对模型文件进行修改。
-    </li>
-  </ol>
+		</li>
+	</ol>
 
-  <h2>请求帮助</h2>
+	<h2>请求帮助</h2>
 
-  <p>
+	<p>
 	倘若你已经尝试经历了以上故障排除的过程，但是你的模型仍然无法工作，寻求正确的方法来获得帮助将使您更快地获得解决方案。
 您可以将您的问题发布到<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a>，
 	同时，尽可能将你的模型（或者一个简单的、具有相同问题的模型）包含在你能够使用的任何格式中，为其他人提供足够的信息，以便快速重现这个问题——最好是一个能够现场演示的Demo。
-  </p>
+	</p>
 
 </body>
 

docs/page.css

@@ -130,3 +130,14 @@ span.param {
 a.param:hover {
 	color: #777;
 }
+
+sup, sub {
+	/* prevent superscript and subscript elements from affecting line-height */
+	vertical-align: baseline;
+	position: relative;
+	top: -0.4em;
+}
+
+sub {
+	top: 0.4em;
+}

docs/scenes/js/material.js

@@ -302,7 +302,6 @@ function guiMaterial( gui, mesh, material, geometry ) {
 	// folder.add( material, 'polygonOffsetFactor' );
 	// folder.add( material, 'polygonOffsetUnits' );
 	folder.add( material, 'alphaTest', 0, 1 );
-	// folder.add( material, 'overdraw', 0, 5 );
 	folder.add( material, 'visible' );
 	folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
 

editor/css/dark.css

@@ -220,6 +220,8 @@ select {
 
 	#toolbar button {
 		margin-right: 6px;
+		line-height: 14px;
+		height: 24px;
 	}
 
 .Outliner {

editor/css/light.css

@@ -213,6 +213,8 @@ select {
 
 	#toolbar button {
 		margin-right: 6px;
+		line-height: 14px;
+		height: 24px;
 	}
 
 .Outliner {

editor/index.html

@@ -6,10 +6,10 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<!-- Origin Trial Token, feature = WebVR (For Chrome M62+), origin = https://threejs.org, expires = 2018-09-11 -->
 		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="2018-09-11" content="AqhFUYKxq/d+E8CDT0fuYRCg8TvlTP52x0Jv7I9t27sLhR30LmcahBRfSwzP89ukjs2+ia99VrrLoRyaFAwJVA0AAABQeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMU02MiIsImV4cGlyeSI6MTUzNjYyNDAwMH0=">
-		<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2018-10-27 -->
-		<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2018-10-27" content="An4ZYOGvf6kVHNxqZxS02TPAvpZESkmBhcVCM/byViDDuEB2XKvCF43aCJjrAU/R8H3WDlv+1bDGTL/XxstHGgoAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU0MDY1NTAyMn0=">
-		<!-- Origin Trial Token, feature = WebXR Gamepad Support, origin = https://threejs.org, expires = 2018-10-24 -->
-		<meta http-equiv="origin-trial" data-feature="WebXR Gamepad Support" data-expires="2018-10-24" content="Agrr6lZhlwzv5jmv/mpLZA37DIiVcg3HvX8bH8EWB+OBruV3sUJuzDfYz6qs/je+LcH41DkrmPn4k9RaUaqpQAAAAABYeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkdhbWVwYWRTdXBwb3J0IiwiZXhwaXJ5IjoxNTQwMzg4NjI0fQ==">
+		<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2018-12-02 -->
+		<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2018-12-02" content="Ah46myef4Ax/+fcLtkeotXmIqnvun4lg4bYbHVttuJvbsWiE4oacrvroId7hbCEb4/byxFHIO6+uwq4pwr6RfQkAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU0Mzc1ODIyNn0=">
+		<!-- Origin Trial Token, feature = WebXR Gamepad Support, origin = https://threejs.org, expires = 2018-12-02 -->
+		<meta http-equiv="origin-trial" data-feature="WebXR Gamepad Support" data-expires="2018-12-02" content="AqI9LIanbGxr/HoTOsYCUNxG82Vy94NZbjhv83R+bF+5NX2jiZOaf7ny+mFoTUP5wrWpYlPjQ6+HeVas9f1lRwYAAABYeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkdhbWVwYWRTdXBwb3J0IiwiZXhwaXJ5IjoxNTQzNzU4MjI2fQ==">
 	</head>
 	<body ontouchstart="">
 		<link href="css/main.css" rel="stylesheet" />
@@ -54,7 +54,6 @@
 		<script src="../examples/js/exporters/STLExporter.js"></script>
 
 		<script src="../examples/js/renderers/Projector.js"></script>
-		<script src="../examples/js/renderers/CanvasRenderer.js"></script>
 		<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
 		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
 		<script src="../examples/js/renderers/SVGRenderer.js"></script>
@@ -139,6 +138,7 @@
 		<script src="js/Sidebar.Animation.js"></script>
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Sidebar.History.js"></script>
+		<script src="js/Strings.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
 		<script src="js/Viewport.Info.js"></script>

editor/js/Config.js

@@ -7,6 +7,8 @@ var Config = function () {
 	var name = 'threejs-editor';
 
 	var storage = {
+		'language': 'en',
+
 		'autosave': true,
 		'theme': 'css/light.css',
 

editor/js/Editor.js

@@ -75,6 +75,8 @@ var Editor = function () {
 	this.config = new Config();
 	this.history = new History( this );
 	this.storage = new Storage();
+	this.strings = new Strings( this.config );
+
 	this.loader = new Loader( this );
 
 	this.camera = this.DEFAULT_CAMERA.clone();

editor/js/Menubar.Add.js

@@ -4,12 +4,14 @@
 
 Menubar.Add = function ( editor ) {
 
+	var strings = editor.strings;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'Add' );
+	title.setTextContent( strings.getKey( 'menubar/add' ) );
 	container.add( title );
 
 	var options = new UI.Panel();
@@ -20,7 +22,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Group' );
+	option.setTextContent( strings.getKey( 'menubar/add/group' ) );
 	option.onClick( function () {
 
 		var mesh = new THREE.Group();
@@ -39,7 +41,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Plane' );
+	option.setTextContent( strings.getKey( 'menubar/add/plane' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
@@ -56,7 +58,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Box' );
+	option.setTextContent( strings.getKey( 'menubar/add/box' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
@@ -72,7 +74,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Circle' );
+	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
 	option.onClick( function () {
 
 		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
@@ -88,7 +90,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Cylinder' );
+	option.setTextContent( strings.getKey( 'menubar/add/cylinder' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
@@ -104,7 +106,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Sphere' );
+	option.setTextContent( strings.getKey( 'menubar/add/sphere' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
@@ -120,7 +122,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Icosahedron' );
+	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.IcosahedronGeometry( 1, 0 );
@@ -136,7 +138,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Torus' );
+	option.setTextContent( strings.getKey( 'menubar/add/torus' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
@@ -152,7 +154,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'TorusKnot' );
+	option.setTextContent( strings.getKey( 'menubar/add/torusknot' )  );
 	option.onClick( function () {
 
 		var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
@@ -197,7 +199,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Lathe' );
+	option.setTextContent( strings.getKey( 'menubar/add/lathe' )  );
 	option.onClick( function() {
 
 		var points = [
@@ -227,7 +229,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Sprite' );
+	option.setTextContent( strings.getKey( 'menubar/add/sprite' )  );
 	option.onClick( function () {
 
 		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
@@ -246,7 +248,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'PointLight' );
+	option.setTextContent( strings.getKey( 'menubar/add/pointlight' )  );
 	option.onClick( function () {
 
 		var color = 0xffffff;
@@ -265,7 +267,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'SpotLight' );
+	option.setTextContent( strings.getKey( 'menubar/add/spotlight' )  );
 	option.onClick( function () {
 
 		var color = 0xffffff;
@@ -289,7 +291,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'DirectionalLight' );
+	option.setTextContent( strings.getKey( 'menubar/add/directionallight' )  );
 	option.onClick( function () {
 
 		var color = 0xffffff;
@@ -310,7 +312,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'HemisphereLight' );
+	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' )  );
 	option.onClick( function () {
 
 		var skyColor = 0x00aaff;
@@ -331,7 +333,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'AmbientLight' );
+	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' )  );
 	option.onClick( function() {
 
 		var color = 0x222222;
@@ -352,7 +354,7 @@ Menubar.Add = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'PerspectiveCamera' );
+	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' )  );
 	option.onClick( function() {
 
 		var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );

editor/js/Menubar.Edit.js

@@ -4,12 +4,14 @@
 
 Menubar.Edit = function ( editor ) {
 
+	var strings = editor.strings;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'Edit' );
+	title.setTextContent( strings.getKey( 'menubar/edit' ) );
 	container.add( title );
 
 	var options = new UI.Panel();
@@ -20,7 +22,7 @@ Menubar.Edit = function ( editor ) {
 
 	var undo = new UI.Row();
 	undo.setClass( 'option' );
-	undo.setTextContent( 'Undo (Ctrl+Z)' );
+	undo.setTextContent( strings.getKey( 'menubar/edit/undo' ) );
 	undo.onClick( function () {
 
 		editor.undo();
@@ -32,7 +34,7 @@ Menubar.Edit = function ( editor ) {
 
 	var redo = new UI.Row();
 	redo.setClass( 'option' );
-	redo.setTextContent( 'Redo (Ctrl+Shift+Z)' );
+	redo.setTextContent( strings.getKey( 'menubar/edit/redo' ) );
 	redo.onClick( function () {
 
 		editor.redo();
@@ -44,7 +46,7 @@ Menubar.Edit = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Clear History' );
+	option.setTextContent( strings.getKey( 'menubar/edit/clear_history' ) );
 	option.onClick( function () {
 
 		if ( confirm( 'The Undo/Redo History will be cleared. Are you sure?' ) ) {
@@ -86,7 +88,7 @@ Menubar.Edit = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Clone' );
+	option.setTextContent( strings.getKey( 'menubar/edit/clone' ) );
 	option.onClick( function () {
 
 		var object = editor.selected;
@@ -104,7 +106,7 @@ Menubar.Edit = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Delete (Del)' );
+	option.setTextContent( strings.getKey( 'menubar/edit/delete' ) );
 	option.onClick( function () {
 
 		var object = editor.selected;
@@ -121,7 +123,7 @@ Menubar.Edit = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Minify Shaders' );
+	option.setTextContent( strings.getKey( 'menubar/edit/minify_shaders' ) );
 	option.onClick( function() {
 
 		var root = editor.selected || editor.scene;

editor/js/Menubar.Examples.js

@@ -4,12 +4,14 @@
 
 Menubar.Examples = function ( editor ) {
 
+	var strings = editor.strings;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'Examples' );
+	title.setTextContent( strings.getKey( 'menubar/examples' ) );
 	container.add( title );
 
 	var options = new UI.Panel();

editor/js/Menubar.File.js

@@ -15,13 +15,14 @@ Menubar.File = function ( editor ) {
 	//
 
 	var config = editor.config;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'File' );
+	title.setTextContent( strings.getKey( 'menubar/file' ) );
 	container.add( title );
 
 	var options = new UI.Panel();
@@ -32,7 +33,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'New' );
+	option.setTextContent( strings.getKey( 'menubar/file/new' ) );
 	option.onClick( function () {
 
 		if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
@@ -67,7 +68,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Import' );
+	option.setTextContent( strings.getKey( 'menubar/file/import' ) );
 	option.onClick( function () {
 
 		fileInput.click();
@@ -83,7 +84,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export Geometry' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/geometry' ) );
 	option.onClick( function () {
 
 		var object = editor.selected;
@@ -126,7 +127,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export Object' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/object' ) );
 	option.onClick( function () {
 
 		var object = editor.selected;
@@ -160,7 +161,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export Scene' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/scene' ) );
 	option.onClick( function () {
 
 		var output = editor.scene.toJSON();
@@ -189,7 +190,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export DAE' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/dae' ) );
 	option.onClick( function () {
 
 		var exporter = new THREE.ColladaExporter();
@@ -207,7 +208,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export GLB' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/glb' ) );
 	option.onClick( function () {
 
 		var exporter = new THREE.GLTFExporter();
@@ -227,7 +228,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export GLTF' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/gltf' ) );
 	option.onClick( function () {
 
 		var exporter = new THREE.GLTFExporter();
@@ -246,7 +247,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export OBJ' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/obj' ) );
 	option.onClick( function () {
 
 		var object = editor.selected;
@@ -265,11 +266,11 @@ Menubar.File = function ( editor ) {
 	} );
 	options.add( option );
 
-	// Export STL
+	// Export STL (ASCII)
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Export STL' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/stl' ) );
 	option.onClick( function () {
 
 		var exporter = new THREE.STLExporter();
@@ -279,6 +280,20 @@ Menubar.File = function ( editor ) {
 	} );
 	options.add( option );
 
+	// Export STL (Binary)
+
+	var option = new UI.Row();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/file/export/stl_binary' ) );
+	option.onClick( function () {
+
+		var exporter = new THREE.STLExporter();
+
+		saveArrayBuffer( exporter.parse( editor.scene, { binary: true } ), 'model-binary.stl' );
+
+	} );
+	options.add( option );
+
 	//
 
 	options.add( new UI.HorizontalRule() );
@@ -287,7 +302,7 @@ Menubar.File = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Publish' );
+	option.setTextContent( strings.getKey( 'menubar/file/publish' ) );
 	option.onClick( function () {
 
 		var zip = new JSZip();

editor/js/Menubar.Help.js

@@ -4,12 +4,14 @@
 
 Menubar.Help = function ( editor ) {
 
+	var strings = editor.strings;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'Help' );
+	title.setTextContent( strings.getKey( 'menubar/help' ) );
 	container.add( title );
 
 	var options = new UI.Panel();
@@ -20,7 +22,7 @@ Menubar.Help = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'Source code' );
+	option.setTextContent( strings.getKey( 'menubar/help/source_code' ) );
 	option.onClick( function () {
 
 		window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
@@ -32,7 +34,7 @@ Menubar.Help = function ( editor ) {
 
 	var option = new UI.Row();
 	option.setClass( 'option' );
-	option.setTextContent( 'About' );
+	option.setTextContent( strings.getKey( 'menubar/help/about' ) );
 	option.onClick( function () {
 
 		window.open( 'http://threejs.org', '_blank' );

editor/js/Menubar.Play.js

@@ -5,6 +5,7 @@
 Menubar.Play = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
@@ -13,7 +14,7 @@ Menubar.Play = function ( editor ) {
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
-	title.setTextContent( 'Play' );
+	title.setTextContent( strings.getKey( 'menubar/play' ) );
 	title.onClick( function () {
 
 		if ( isPlaying === false ) {

editor/js/Sidebar.Object.js

@@ -13,6 +13,7 @@ Sidebar.Object = function ( editor ) {
 
 	// Actions
 
+	/*
 	var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
 	objectActions.setOptions( {
 
@@ -50,7 +51,8 @@ Sidebar.Object = function ( editor ) {
 		this.setValue( 'Actions' );
 
 	} );
-	// container.addStatic( objectActions );
+	container.addStatic( objectActions );
+	*/
 
 	// type
 

editor/js/Sidebar.Project.js

@@ -6,11 +6,11 @@ Sidebar.Project = function ( editor ) {
 
 	var config = editor.config;
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var rendererTypes = {
 
 		'WebGLRenderer': THREE.WebGLRenderer,
-		'CanvasRenderer': THREE.CanvasRenderer,
 		'SVGRenderer': THREE.SVGRenderer,
 		'SoftwareRenderer': THREE.SoftwareRenderer,
 		'RaytracingRenderer': THREE.RaytracingRenderer
@@ -30,7 +30,7 @@ Sidebar.Project = function ( editor ) {
 
 	} );
 
-	titleRow.add( new UI.Text( 'Title' ).setWidth( '90px' ) );
+	titleRow.add( new UI.Text( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
 	titleRow.add( title );
 
 	container.add( titleRow );
@@ -44,7 +44,7 @@ Sidebar.Project = function ( editor ) {
 
 	} );
 
-	editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) );
+	editableRow.add( new UI.Text( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
 	editableRow.add( editable );
 
 	container.add( editableRow );
@@ -58,7 +58,7 @@ Sidebar.Project = function ( editor ) {
 
 	} );
 
-	vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) );
+	vrRow.add( new UI.Text( strings.getKey( 'sidebar/project/vr' ) ).setWidth( '90px' ) );
 	vrRow.add( vr );
 
 	container.add( vrRow );
@@ -86,7 +86,7 @@ Sidebar.Project = function ( editor ) {
 
 	} );
 
-	rendererTypeRow.add( new UI.Text( 'Renderer' ).setWidth( '90px' ) );
+	rendererTypeRow.add( new UI.Text( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
 	rendererTypeRow.add( rendererType );
 
 	container.add( rendererTypeRow );
@@ -153,12 +153,6 @@ Sidebar.Project = function ( editor ) {
 
 	function createRenderer( type, antialias, shadows, gammaIn, gammaOut ) {
 
-		if ( type === 'WebGLRenderer' && System.support.webgl === false ) {
-
-			type = 'CanvasRenderer';
-
-		}
-
 		rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
 
 		var renderer = new rendererTypes[ type ]( { antialias: antialias} );

editor/js/Sidebar.Properties.js

@@ -5,24 +5,24 @@
 Sidebar.Properties = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Span();
 
-	var objectTab = new UI.Text( 'OBJECT' ).onClick( onClick );
-	var geometryTab = new UI.Text( 'GEOMETRY' ).onClick( onClick );
-	var materialTab = new UI.Text( 'MATERIAL' ).onClick( onClick );
+	var objectTab = new UI.Text( strings.getKey( 'sidebar/properties/object' ) ).setTextTransform( 'uppercase' );
+	objectTab.onClick( function () { select( 'OBJECT' ) } );
+
+	var geometryTab = new UI.Text( strings.getKey( 'sidebar/properties/geometry' ) ).setTextTransform( 'uppercase' );
+	geometryTab.onClick( function () { select( 'GEOMETRY' ) } );
+
+	var materialTab = new UI.Text( strings.getKey( 'sidebar/properties/material' ) ).setTextTransform( 'uppercase' );
+	materialTab.onClick( function () { select( 'MATERIAL' ) } );
 
 	var tabs = new UI.Div();
 	tabs.setId( 'tabs' );
 	tabs.add( objectTab, geometryTab, materialTab );
 	container.add( tabs );
 
-	function onClick( event ) {
-
-		select( event.target.textContent );
-
-	}
-
 	//
 
 	var object = new UI.Span().add(

editor/js/Sidebar.Scene.js

@@ -5,6 +5,7 @@
 Sidebar.Scene = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setBorderTop( '0' );
@@ -119,7 +120,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
 
-	backgroundRow.add( new UI.Text( 'Background' ).setWidth( '90px' ) );
+	backgroundRow.add( new UI.Text( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
 	backgroundRow.add( backgroundColor );
 
 	container.add( backgroundRow );
@@ -153,7 +154,7 @@ Sidebar.Scene = function ( editor ) {
 
 	} );
 
-	fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ) );
+	fogTypeRow.add( new UI.Text( strings.getKey( 'sidebar/scene/fog' ) ).setWidth( '90px' ) );
 	fogTypeRow.add( fogType );
 
 	container.add( fogTypeRow );

editor/js/Sidebar.Settings.Shortcuts.js

@@ -4,7 +4,9 @@
 
 Sidebar.Settings.Shortcuts = function ( editor ) {
 
-	const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
+	var strings = editor.strings;
+
+	var IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
 
 	function isValidKeyBinding( key ) {
 
@@ -76,7 +78,7 @@ Sidebar.Settings.Shortcuts = function ( editor ) {
 		}
 
 		shortcutInput.dom.maxLength = 1;
-		shortcutRow.add( new UI.Text( name ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
+		shortcutRow.add( new UI.Text( strings.getKey( 'sidebar/settings/shortcuts/' + name ) ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
 		shortcutRow.add( shortcutInput );
 
 		container.add( shortcutRow );

editor/js/Sidebar.Settings.Viewport.js

@@ -5,11 +5,12 @@
 Sidebar.Settings.Viewport = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Div();
 	container.add( new UI.Break() );
 
-	container.add( new UI.Text( 'Grid' ).setWidth( '90px' ) );
+	container.add( new UI.Text( strings.getKey( 'sidebar/settings/viewport/grid' ) ).setWidth( '90px' ) );
 
 	var show = new UI.THREE.Boolean( true ).onChange( update );
 	container.add( show );

editor/js/Sidebar.Settings.js

@@ -6,13 +6,44 @@ Sidebar.Settings = function ( editor ) {
 
 	var config = editor.config;
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setBorderTop( '0' );
 	container.setPaddingTop( '20px' );
 	container.setPaddingBottom( '20px' );
 
-	// class
+	// language
+
+	var options = {
+		'en': 'English',
+		'zh': '中文'
+	};
+
+	var languageRow = new UI.Row();
+	var language = new UI.Select().setWidth( '150px' );
+	language.setOptions( options );
+
+	if ( config.getKey( 'language' ) !== undefined ) {
+
+		language.setValue( config.getKey( 'language' ) );
+
+	}
+
+	language.onChange( function () {
+
+		var value = this.getValue();
+
+		editor.config.setKey( 'language', value );
+
+	} );
+
+	languageRow.add( new UI.Text( strings.getKey( 'sidebar/settings/language' ) ).setWidth( '90px' ) );
+	languageRow.add( language );
+
+	container.add( languageRow );
+
+	// theme
 
 	var options = {
 		'css/light.css': 'light',
@@ -38,7 +69,7 @@ Sidebar.Settings = function ( editor ) {
 
 	} );
 
-	themeRow.add( new UI.Text( 'Theme' ).setWidth( '90px' ) );
+	themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) );
 	themeRow.add( theme );
 
 	container.add( themeRow );

editor/js/Sidebar.js

@@ -4,26 +4,27 @@
 
 var Sidebar = function ( editor ) {
 
+	var strings = editor.strings;
+
 	var container = new UI.Panel();
 	container.setId( 'sidebar' );
 
 	//
 
-	var sceneTab = new UI.Text( 'SCENE' ).onClick( onClick );
-	var projectTab = new UI.Text( 'PROJECT' ).onClick( onClick );
-	var settingsTab = new UI.Text( 'SETTINGS' ).onClick( onClick );
+	var sceneTab = new UI.Text( strings.getKey( 'sidebar/scene' ) ).setTextTransform( 'uppercase' );
+	sceneTab.onClick( function () { select( 'SCENE' ) } );
+
+	var projectTab = new UI.Text( strings.getKey( 'sidebar/project' ) ).setTextTransform( 'uppercase' );
+	projectTab.onClick( function () { select( 'PROJECT' ) } );
+
+	var settingsTab = new UI.Text( strings.getKey( 'sidebar/settings' ) ).setTextTransform( 'uppercase' );
+	settingsTab.onClick( function () { select( 'SETTINGS' ) } );
 
 	var tabs = new UI.Div();
 	tabs.setId( 'tabs' );
 	tabs.add( sceneTab, projectTab, settingsTab );
 	container.add( tabs );
 
-	function onClick( event ) {
-
-		select( event.target.textContent );
-
-	}
-
 	//
 
 	var scene = new UI.Span().add(

editor/js/Strings.js

@@ -0,0 +1,199 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Strings = function ( config ) {
+
+	var language = config.getKey( 'language' );
+
+	var values = {
+
+		en: {
+
+			'menubar/file': 'File',
+			'menubar/file/new': 'New',
+			'menubar/file/import': 'Import',
+			'menubar/file/export/geometry': 'Export Geometry',
+			'menubar/file/export/object': 'Export Object',
+			'menubar/file/export/scene': 'Export Scene',
+			'menubar/file/export/dae': 'Export DAE',
+			'menubar/file/export/glb': 'Export GLB',
+			'menubar/file/export/gltf': 'Export GLTF',
+			'menubar/file/export/obj': 'Export OBJ',
+			'menubar/file/export/stl': 'Export STL',
+			'menubar/file/export/stl_binary': 'Export STL (Binary)',
+			'menubar/file/publish': 'Publish',
+
+			'menubar/edit': 'Edit',
+			'menubar/edit/undo': 'Undo (Ctrl+Z)',
+			'menubar/edit/redo': 'Redo (Ctrl+Shift+Z)',
+			'menubar/edit/clear_history': 'Clear History',
+			'menubar/edit/clone': 'Clone',
+			'menubar/edit/delete': 'Delete (Del)',
+			'menubar/edit/minify_shaders': 'Minify Shaders',
+
+			'menubar/add': 'Add',
+			'menubar/add/group': 'Group',
+			'menubar/add/plane': 'Plane',
+			'menubar/add/box': 'Box',
+			'menubar/add/circle': 'Circle',
+			'menubar/add/cylinder': 'Cylinder',
+			'menubar/add/sphere': 'Sphere',
+			'menubar/add/icosahedron': 'Icosahedron',
+			'menubar/add/torus': 'Torus',
+			'menubar/add/torusknot': 'TorusKnot',
+			'menubar/add/lathe': 'Lathe',
+			'menubar/add/sprite': 'Sprite',
+			'menubar/add/pointlight': 'PointLight',
+			'menubar/add/spotlight': 'SpotLight',
+			'menubar/add/directionallight': 'DirectionalLight',
+			'menubar/add/hemispherelight': 'HemisphereLight',
+			'menubar/add/ambientlight': 'AmbientLight',
+			'menubar/add/perspectivecamera': 'PerspectiveCamera',
+
+			'menubar/play': 'Play',
+
+			'menubar/examples': 'Examples',
+
+			'menubar/help': 'Help',
+			'menubar/help/source_code': 'Source Code',
+			'menubar/help/about': 'About',
+
+			'sidebar/scene': 'Scene',
+			'sidebar/scene/background': 'Background',
+			'sidebar/scene/fog': 'Fog',
+
+			'sidebar/properties/object': 'Object',
+			'sidebar/properties/geometry': 'Geometry',
+			'sidebar/properties/material': 'Material',
+			'sidebar/properties/script': 'Script',
+
+			'sidebar/project': 'Project',
+			'sidebar/project/title': 'Title',
+			'sidebar/project/editable': 'Editable',
+			'sidebar/project/vr': 'VR',
+			'sidebar/project/renderer': 'Renderer',
+
+			'sidebar/settings': 'Settings',
+			'sidebar/settings/language': 'Language',
+			'sidebar/settings/theme': 'Theme',
+
+			'sidebar/settings/shortcuts/translate': 'Translate',
+			'sidebar/settings/shortcuts/rotate': 'Rotate',
+			'sidebar/settings/shortcuts/scale': 'Scale',
+			'sidebar/settings/shortcuts/undo': 'Undo',
+			'sidebar/settings/shortcuts/focus': 'Focus',
+
+			'sidebar/settings/viewport/grid': 'Grid',
+
+			'toolbar/translate': 'Translate',
+			'toolbar/rotate': 'Rotate',
+			'toolbar/scale': 'Scale',
+			'toolbar/local': 'Local',
+
+			'viewport/info/objects': 'Objects',
+			'viewport/info/vertices': 'Vertices',
+			'viewport/info/triangles': 'Triangles'
+
+		},
+
+		zh: {
+
+			'menubar/file': '文件',
+			'menubar/file/new': '新建',
+			'menubar/file/import': '导入',
+			'menubar/file/export/geometry': '导出几何体',
+			'menubar/file/export/object': '导出物体',
+			'menubar/file/export/scene': '导出场景',
+			'menubar/file/export/dae': '导出DAE',
+			'menubar/file/export/glb': '导出GLB',
+			'menubar/file/export/gltf': '导出GLTF',
+			'menubar/file/export/obj': '导出OBJ',
+			'menubar/file/export/stl': '导出STL',
+			'menubar/file/export/stl_binary': '导出STL(二进制)',
+			'menubar/file/publish': '发布',
+
+			'menubar/edit': '编辑',
+			'menubar/edit/undo': '撤销 (Ctrl+Z)',
+			'menubar/edit/redo': '重做 (Ctrl+Shift+Z)',
+			'menubar/edit/clear_history': '清空历史记录',
+			'menubar/edit/clone': '拷贝',
+			'menubar/edit/delete': '删除 (Del)',
+			'menubar/edit/minify_shaders': '压缩着色器',
+
+			'menubar/add': '添加',
+			'menubar/add/group': '组',
+			'menubar/add/plane': '平面',
+			'menubar/add/box': '正方体',
+			'menubar/add/circle': '圆',
+			'menubar/add/cylinder': '圆柱体',
+			'menubar/add/sphere': '球体',
+			'menubar/add/icosahedron': '二十面体',
+			'menubar/add/torus': '圆环体',
+			'menubar/add/torusknot': '环面纽结体',
+			'menubar/add/lathe': '酒杯',
+			'menubar/add/sprite': '精灵',
+			'menubar/add/pointlight': '点光源',
+			'menubar/add/spotlight': '聚光灯',
+			'menubar/add/directionallight': '平行光',
+			'menubar/add/hemispherelight': '半球光',
+			'menubar/add/ambientlight': '环境光',
+			'menubar/add/perspectivecamera': '透视相机',
+
+			'menubar/play': '启动',
+
+			'menubar/examples': '示例',
+
+			'menubar/help': '帮助',
+			'menubar/help/source_code': '源码',
+			'menubar/help/about': '关于',
+
+			'sidebar/scene': '场景',
+			'sidebar/scene/background': '背景',
+			'sidebar/scene/fog': '雾',
+
+			'sidebar/properties/object': '属性',
+			'sidebar/properties/geometry': '几何组件',
+			'sidebar/properties/material': '材质组件',
+			'sidebar/properties/script': '脚本',
+
+			'sidebar/project': '项目',
+			'sidebar/project/title': '标题',
+			'sidebar/project/editable': '编辑性',
+			'sidebar/project/vr': '虚拟现实',
+			'sidebar/project/renderer': '渲染器',
+
+			'sidebar/settings': '设置',
+			'sidebar/settings/language': '语言',
+			'sidebar/settings/theme': '主题',
+			'sidebar/settings/shortcuts/translate': '移动',
+			'sidebar/settings/shortcuts/rotate': '旋转',
+			'sidebar/settings/shortcuts/scale': '缩放',
+			'sidebar/settings/shortcuts/undo': '撤销',
+			'sidebar/settings/shortcuts/focus': '聚焦',
+			'sidebar/settings/viewport/grid': '网格',
+
+			'toolbar/translate': '移动',
+			'toolbar/rotate': '旋转',
+			'toolbar/scale': '缩放',
+			'toolbar/local': '本地',
+
+			'viewport/info/objects': '物体',
+			'viewport/info/vertices': '顶点',
+			'viewport/info/triangles': '三角形'
+
+		}
+
+	};
+
+	return {
+
+		getKey: function ( key ) {
+
+			return values[ language ][ key ] || '???';
+
+		}
+
+	};
+
+};

editor/js/Toolbar.js

@@ -5,6 +5,7 @@
 var Toolbar = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setId( 'toolbar' );
@@ -15,7 +16,7 @@ var Toolbar = function ( editor ) {
 
 	// translate / rotate / scale
 
-	var translate = new UI.Button( 'translate' );
+	var translate = new UI.Button( strings.getKey( 'toolbar/translate' ) );
 	translate.dom.className = 'Button selected';
 	translate.onClick( function () {
 
@@ -24,7 +25,7 @@ var Toolbar = function ( editor ) {
 	} );
 	buttons.add( translate );
 
-	var rotate = new UI.Button( 'rotate' );
+	var rotate = new UI.Button( strings.getKey( 'toolbar/rotate' ) );
 	rotate.onClick( function () {
 
 		signals.transformModeChanged.dispatch( 'rotate' );
@@ -32,7 +33,7 @@ var Toolbar = function ( editor ) {
 	} );
 	buttons.add( rotate );
 
-	var scale = new UI.Button( 'scale' );
+	var scale = new UI.Button( strings.getKey( 'toolbar/scale' ) );
 	scale.onClick( function () {
 
 		signals.transformModeChanged.dispatch( 'scale' );
@@ -40,7 +41,7 @@ var Toolbar = function ( editor ) {
 	} );
 	buttons.add( scale );
 
-	var local = new UI.THREE.Boolean( false, 'local' );
+	var local = new UI.THREE.Boolean( false, strings.getKey( 'toolbar/local' ) );
 	local.onChange( function () {
 
 		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );

editor/js/Viewport.Info.js

@@ -5,6 +5,7 @@
 Viewport.Info = function ( editor ) {
 
 	var signals = editor.signals;
+	var strings = editor.strings;
 
 	var container = new UI.Panel();
 	container.setId( 'info' );
@@ -18,9 +19,12 @@ Viewport.Info = function ( editor ) {
 	var verticesText = new UI.Text( '0' ).setMarginLeft( '6px' );
 	var trianglesText = new UI.Text( '0' ).setMarginLeft( '6px' );
 
-	container.add( new UI.Text( 'objects' ), objectsText, new UI.Break() );
-	container.add( new UI.Text( 'vertices' ), verticesText, new UI.Break() );
-	container.add( new UI.Text( 'triangles' ), trianglesText, new UI.Break() );
+	container.add( new UI.Text( strings.getKey( 'viewport/info/objects' ) ).setTextTransform( 'lowercase' ) );
+	container.add( objectsText, new UI.Break() );
+	container.add( new UI.Text( strings.getKey( 'viewport/info/vertices' ) ).setTextTransform( 'lowercase' ) );
+	container.add( verticesText, new UI.Break() );
+	container.add( new UI.Text( strings.getKey( 'viewport/info/triangles' ) ).setTextTransform( 'lowercase' ) );
+	container.add( trianglesText, new UI.Break() );
 
 	signals.objectAdded.add( update );
 	signals.objectRemoved.add( update );

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

examples/files.js

@@ -14,6 +14,7 @@ var files = {
 		"webgl_decals",
 		"webgl_depth_texture",
 		"webgl_effects_anaglyph",
+		"webgl_effects_ascii",
 		"webgl_effects_parallaxbarrier",
 		"webgl_effects_peppersghost",
 		"webgl_effects_stereo",
@@ -188,7 +189,6 @@ var files = {
 		"webgl_modifier_tessellation",
 		"webgl_morphtargets",
 		"webgl_morphtargets_horse",
-		"webgl_morphtargets_human",
 		"webgl_morphtargets_sphere",
 		"webgl_multiple_canvases_circle",
 		"webgl_multiple_canvases_complex",
@@ -196,6 +196,7 @@ var files = {
 		"webgl_multiple_elements",
 		"webgl_multiple_elements_text",
 		"webgl_multiple_renderers",
+		"webgl_multiple_scenes_comparison",
 		"webgl_multiple_views",
 		"webgl_nearestneighbour",
 		"webgl_octree",
@@ -215,6 +216,7 @@ var files = {
 		"webgl_points_billboards",
 		"webgl_points_dynamic",
 		"webgl_points_sprites",
+		"webgl_points_waves",
 		"webgl_postprocessing",
 		"webgl_postprocessing_advanced",
 		"webgl_postprocessing_afterimage",
@@ -325,7 +327,6 @@ var files = {
 		"webvr_ballshooter",
 		"webvr_cubes",
 		"webvr_dragging",
-		"webvr_frustum",
 		"webvr_lorenzattractor",
 		"webvr_panorama",
 		"webvr_paint",
@@ -340,6 +341,7 @@ var files = {
 		"misc_animation_authoring",
 		"misc_animation_groups",
 		"misc_animation_keys",
+		"misc_boxselection",
 		"misc_controls_deviceorientation",
 		"misc_controls_fly",
 		"misc_controls_map",
@@ -354,7 +356,6 @@ var files = {
 		"misc_lights_test",
 		"misc_lookat",
 		"misc_ubiquity_test",
-		"misc_ubiquity_test2",
 		"misc_uv_tests"
 	],
 	"css3d": [
@@ -370,40 +371,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"
 	],

examples/js/Cloth.js

@@ -243,19 +243,23 @@ function simulate( time ) {
 
 	if ( wind ) {
 
-		var face, faces = clothGeometry.faces, normal;
+		var indx;
+		var normal = new THREE.Vector3();
+		var indices = clothGeometry.index;
+		var normals = clothGeometry.attributes.normal;
 
 		particles = cloth.particles;
 
-		for ( i = 0, il = faces.length; i < il; i ++ ) {
+		for ( i = 0, il = indices.count; i < il; i += 3 ) {
 
-			face = faces[ i ];
-			normal = face.normal;
+			for ( j = 0; j < 3; j ++ ) {
 
-			tmpForce.copy( normal ).normalize().multiplyScalar( normal.dot( windForce ) );
-			particles[ face.a ].addForce( tmpForce );
-			particles[ face.b ].addForce( tmpForce );
-			particles[ face.c ].addForce( tmpForce );
+				indx = indices.getX( i + j );
+				normal.fromBufferAttribute( normals, indx )
+				tmpForce.copy( normal ).normalize().multiplyScalar( normal.dot( windForce ) );
+				particles[ indx ].addForce( tmpForce );
+
+			}
 
 		}
 

examples/js/UCSCharacter.js

@@ -1,141 +0,0 @@
-THREE.UCSCharacter = function () {
-
-	var scope = this;
-
-	var mesh;
-
-	this.scale = 1;
-
-	this.root = new THREE.Object3D();
-
-	this.numSkins = undefined;
-	this.numMorphs = undefined;
-
-	this.skins = [];
-	this.materials = [];
-	this.morphs = [];
-
-	this.mixer = new THREE.AnimationMixer( this.root );
-
-	this.onLoadComplete = function () {};
-
-	this.loadCounter = 0;
-
-	this.loadParts = function ( config ) {
-
-		this.numSkins = config.skins.length;
-		this.numMorphs = config.morphs.length;
-
-		// Character geometry + number of skins
-		this.loadCounter = 1 + config.skins.length;
-
-		// SKINS
-		this.skins = loadTextures( config.baseUrl + "skins/", config.skins );
-		this.materials = createMaterials( this.skins );
-
-		// MORPHS
-		this.morphs = config.morphs;
-
-		// CHARACTER
-		var loader = new THREE.JSONLoader();
-		console.log( config.baseUrl + config.character );
-		loader.load( config.baseUrl + config.character, function ( geometry ) {
-
-			geometry.computeBoundingBox();
-			geometry.computeVertexNormals();
-
-			mesh = new THREE.SkinnedMesh( geometry, [] );
-			mesh.name = config.character;
-			scope.root.add( mesh );
-
-			var bb = geometry.boundingBox;
-			scope.root.scale.set( config.s, config.s, config.s );
-			scope.root.position.set( config.x, config.y - bb.min.y * config.s, config.z );
-
-			mesh.castShadow = true;
-			mesh.receiveShadow = true;
-
-			scope.mixer.clipAction( geometry.animations[ 0 ], mesh ).play();
-
-			scope.setSkin( 0 );
-
-			scope.checkLoadComplete();
-
-		} );
-
-	};
-
-	this.setSkin = function ( index ) {
-
-		if ( mesh && scope.materials ) {
-
-			mesh.material = scope.materials[ index ];
-
-		}
-
-	};
-
-	this.updateMorphs = function ( influences ) {
-
-		if ( mesh ) {
-
-			for ( var i = 0; i < scope.numMorphs; i ++ ) {
-
-				mesh.morphTargetInfluences[ i ] = influences[ scope.morphs[ i ] ] / 100;
-
-			}
-
-		}
-
-	};
-
-	function loadTextures( baseUrl, textureUrls ) {
-
-		var textureLoader = new THREE.TextureLoader();
-		var textures = [];
-
-		for ( var i = 0; i < textureUrls.length; i ++ ) {
-
-			textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], scope.checkLoadComplete );
-			textures[ i ].mapping = THREE.UVMapping;
-			textures[ i ].name = textureUrls[ i ];
-
-		}
-
-		return textures;
-
-	}
-
-	function createMaterials( skins ) {
-
-		var materials = [];
-
-		for ( var i = 0; i < skins.length; i ++ ) {
-
-			materials[ i ] = new THREE.MeshLambertMaterial( {
-				color: 0xeeeeee,
-				specular: 10.0,
-				map: skins[ i ],
-				skinning: true,
-				morphTargets: true
-			} );
-
-		}
-
-		return materials;
-
-	}
-
-	this.checkLoadComplete = function () {
-
-		scope.loadCounter -= 1;
-
-		if ( scope.loadCounter === 0 ) {
-
-			scope.onLoadComplete();
-
-		}
-
-	};
-
-};

examples/js/controls/MapControls.js

@@ -11,7 +11,7 @@
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
 // This is very similar to OrbitControls, another set of touch behavior
 //
-//    Orbit - right mouse, or left mouse + ctrl/metaKey / touch: two-finger rotate
+//    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
 //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
 //    Pan - left mouse, or arrow keys / touch: one-finger move
 
@@ -777,7 +777,7 @@ THREE.MapControls = function ( object, domElement ) {
 
 			case scope.mouseButtons.LEFT:
 
-				if ( event.ctrlKey || event.metaKey ) {
+				if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
 
 					if ( scope.enableRotate === false ) return;
 

examples/js/controls/OrbitControls.js

@@ -11,7 +11,7 @@
 //
 //    Orbit - left mouse / touch: one-finger move
 //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - right mouse, or left mouse + ctrl/metaKey, or arrow keys / touch: two-finger move
+//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
 
 THREE.OrbitControls = function ( object, domElement ) {
 
@@ -679,7 +679,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 			case scope.mouseButtons.LEFT:
 
-				if ( event.ctrlKey || event.metaKey ) {
+				if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
 
 					if ( scope.enablePan === false ) return;
 

examples/js/geometries/hilbert2D.js

@@ -15,17 +15,18 @@
  * @param v2         Corner index +X, +Z.
  * @param v3         Corner index +X, -Z.
  */
+
 function hilbert2D( center, size, iterations, v0, v1, v2, v3 ) {
 
 	// Default Vars
-	var center = undefined !== center ? center : new THREE.Vector3( 0, 0, 0 ),
-		size = undefined !== size ? size : 10,
+	var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
+		size = size !== undefined ? size : 10,
 		half = size / 2,
-		iterations = undefined !== iterations ? iterations : 1,
-		v0 = undefined !== v0 ? v0 : 0,
-		v1 = undefined !== v1 ? v1 : 1,
-		v2 = undefined !== v2 ? v2 : 2,
-		v3 = undefined !== v3 ? v3 : 3
+		iterations = iterations !== undefined ? iterations : 1,
+		v0 = v0 !== undefined ? v0 : 0,
+		v1 = v1 !== undefined ? v1 : 1,
+		v2 = v2 !== undefined ? v2 : 2,
+		v3 = v3 !== undefined ? v3 : 3
 	;
 
 	var vec_s = [

examples/js/geometries/hilbert3D.js

@@ -7,11 +7,6 @@
  * @author Thomas Diewald
  * @link http://www.openprocessing.org/visuals/?visualID=15599
  *
- * Based on `examples/canvas_lines_colors.html`:
- * @author OpenShift guest
- * @link https://github.com/mrdoob/three.js/blob/8413a860aa95ed29c79cbb7f857c97d7880d260f/examples/canvas_lines_colors.html
- * @see  Line 149 - 186
- *
  * @param center     Center of Hilbert curve.
  * @param size       Total width of Hilbert curve.
  * @param iterations Number of subdivisions.
@@ -24,21 +19,22 @@
  * @param v6         Corner index +X, +Y, +Z.
  * @param v7         Corner index +X, +Y, -Z.
  */
+
 function hilbert3D( center, size, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
 	// Default Vars
-	var center = undefined !== center ? center : new THREE.Vector3( 0, 0, 0 ),
-		size = undefined !== size ? size : 10,
+	var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
+		size = size !== undefined ? size : 10,
 		half = size / 2,
-		iterations = undefined !== iterations ? iterations : 1,
-		v0 = undefined !== v0 ? v0 : 0,
-		v1 = undefined !== v1 ? v1 : 1,
-		v2 = undefined !== v2 ? v2 : 2,
-		v3 = undefined !== v3 ? v3 : 3,
-		v4 = undefined !== v4 ? v4 : 4,
-		v5 = undefined !== v5 ? v5 : 5,
-		v6 = undefined !== v6 ? v6 : 6,
-		v7 = undefined !== v7 ? v7 : 7
+		iterations = iterations !== undefined ? iterations : 1,
+		v0 = v0 !== undefined ? v0 : 0,
+		v1 = v1 !== undefined ? v1 : 1,
+		v2 = v2 !== undefined ? v2 : 2,
+		v3 = v3 !== undefined ? v3 : 3,
+		v4 = v4 !== undefined ? v4 : 4,
+		v5 = v5 !== undefined ? v5 : 5,
+		v6 = v6 !== undefined ? v6 : 6,
+		v7 = v7 !== undefined ? v7 : 7
 	;
 
 	var vec_s = [

examples/js/interactive/SelectionBox.js

@@ -0,0 +1,116 @@
+/**
+ * @author HypnosNova / https://www.threejs.org.cn/gallery
+ * This is a class to check whether objects are in a selection area in 3D space
+ */
+
+function SelectionBox ( camera, scene, deep ) {
+	
+	this.camera = camera;
+	this.scene = scene;
+	this.startPoint = new THREE.Vector3();
+	this.endPoint = new THREE.Vector3();
+	this.collection = [];
+	this.deep = deep || Number.MAX_VALUE;
+	
+}
+
+SelectionBox.prototype.select = function ( startPoint, endPoint ) {
+	
+	this.startPoint = startPoint || this.startPoint;
+	this.endPoint = endPoint || this.endPoint;
+	this.collection = [];
+    
+	var boxSelectionFrustum = this.createFrustum( this.startPoint, this.endPoint );
+	this.searchChildInFrustum( boxSelectionFrustum, this.scene );
+    
+	return this.collection;
+	
+}
+
+SelectionBox.prototype.createFrustum = function ( startPoint, endPoint ) {
+	
+	startPoint = startPoint || this.startPoint;
+	endPoint = endPoint || this.endPoint
+
+	this.camera.updateProjectionMatrix();
+	this.camera.updateMatrixWorld();
+	this.camera.updateMatrix();
+
+	var tmpPoint = startPoint.clone();
+	tmpPoint.x = Math.min( startPoint.x, endPoint.x );
+	tmpPoint.y = Math.max( startPoint.y, endPoint.y );
+	endPoint.x = Math.max( startPoint.x, endPoint.x );
+	endPoint.y = Math.min( startPoint.y, endPoint.y );
+
+	var vecNear = this.camera.position.clone();
+	var vecTopLeft = tmpPoint.clone();
+	var vecTopRight = new THREE.Vector3( endPoint.x, tmpPoint.y, 0 );
+	var vecDownRight = endPoint.clone();
+	var vecDownLeft = new THREE.Vector3( tmpPoint.x, endPoint.y, 0 );
+	vecTopLeft.unproject( this.camera );
+	vecTopRight.unproject( this.camera );
+	vecDownRight.unproject( this.camera );
+	vecDownLeft.unproject( this.camera );
+
+	var vectemp1 = vecTopLeft.clone().sub( vecNear );
+	var vectemp2 = vecTopRight.clone().sub( vecNear );
+	var vectemp3 = vecDownRight.clone().sub( vecNear );
+	vectemp1.normalize();
+	vectemp2.normalize();
+	vectemp3.normalize();
+
+	vectemp1.multiplyScalar( this.deep );
+	vectemp2.multiplyScalar( this.deep );
+	vectemp3.multiplyScalar( this.deep );
+	vectemp1.add( vecNear );
+	vectemp2.add( vecNear );
+	vectemp3.add( vecNear );
+
+	var planeTop = new THREE.Plane();
+	planeTop.setFromCoplanarPoints( vecNear, vecTopLeft, vecTopRight );
+	var planeRight = new THREE.Plane();
+	planeRight.setFromCoplanarPoints( vecNear, vecTopRight, vecDownRight );
+	var planeDown = new THREE.Plane();
+	planeDown.setFromCoplanarPoints( vecDownRight, vecDownLeft, vecNear );
+	var planeLeft = new THREE.Plane();
+	planeLeft.setFromCoplanarPoints( vecDownLeft, vecTopLeft, vecNear );
+	var planeFront = new THREE.Plane();
+	planeFront.setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft );
+	var planeBack = new THREE.Plane();
+	planeBack.setFromCoplanarPoints( vectemp3, vectemp2, vectemp1 );
+	planeBack.normal = planeBack.normal.multiplyScalar( -1 );
+
+	return new THREE.Frustum( planeTop, planeRight, planeDown, planeLeft, planeFront, planeBack );
+
+}
+
+SelectionBox.prototype.searchChildInFrustum = function ( frustum, object ) {
+
+	if ( object instanceof THREE.Mesh ) {
+
+		if ( object.material !== undefined ) {
+
+			object.geometry.computeBoundingSphere();
+			var center = object.geometry.boundingSphere.center.clone().applyMatrix4( object.matrixWorld );
+
+			if ( frustum.containsPoint( center ) ) {
+
+				this.collection.push( object );
+
+			}
+
+		}
+
+	}
+
+	if ( object.children.length > 0 ) {
+
+		for ( var x = 0; x < object.children.length; x++ ) {
+
+			this.searchChildInFrustum( frustum, object.children[x] );
+
+		}
+
+	}
+    
+}

examples/js/interactive/SelectionHelper.js

@@ -0,0 +1,73 @@
+function SelectionHelper ( selectionBox, renderer, cssClassName ) {
+
+	this.element = document.createElement( "div" );
+	this.element.classList.add( cssClassName );
+	this.element.style.pointerEvents = "none";
+
+	this.renderer = renderer;
+
+	this.startPoint = { x: 0, y: 0 };
+	this.pointTopLeft = { x: 0, y: 0 };
+	this.pointBottomRight = { x: 0, y: 0 };
+
+	this.isDown = false;
+
+	this.renderer.domElement.addEventListener( "mousedown", function ( event ) {
+		
+		this.isDown = true;
+		this.onSelectStart( event );
+
+	}.bind( this ), false );
+
+	this.renderer.domElement.addEventListener( "mousemove", function ( event ) {
+
+		if ( this.isDown ) {
+
+			this.onSelectMove( event );
+
+		}
+
+	}.bind( this ), false );
+
+	this.renderer.domElement.addEventListener( "mouseup", function ( event ) {
+
+		this.isDown = false;
+		this.onSelectOver( event );
+
+	}.bind( this ), false );
+	
+}
+
+SelectionHelper.prototype.onSelectStart = function ( event ) {
+	
+	this.renderer.domElement.parentElement.appendChild( this.element );
+
+	this.element.style.left = event.clientX + "px";
+	this.element.style.top = event.clientY + "px";
+	this.element.style.width = "0px";
+	this.element.style.height = "0px";
+
+	this.startPoint.x = event.clientX;
+	this.startPoint.y = event.clientY;
+
+}
+
+SelectionHelper.prototype.onSelectMove = function ( event ) {
+
+	this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX );
+	this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY );
+	this.pointTopLeft.x = Math.min( this.startPoint.x, event.clientX );
+	this.pointTopLeft.y = Math.min( this.startPoint.y, event.clientY );
+
+	this.element.style.left = this.pointTopLeft.x + "px";
+	this.element.style.top = this.pointTopLeft.y + "px";
+	this.element.style.width = ( this.pointBottomRight.x - this.pointTopLeft.x ) + "px";
+	this.element.style.height = ( this.pointBottomRight.y - this.pointTopLeft.y ) + "px";
+	
+}
+
+SelectionHelper.prototype.onSelectOver = function ( event ) {
+
+	this.element.parentElement.removeChild( this.element );
+	
+}