.github/ISSUE_TEMPLATE.md

@@ -17,7 +17,7 @@ Please also include a live example if possible. You can start from these templat
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r114
+- [ ] r115
 - [ ] ...
 
 ##### Browser

README.md

@@ -17,7 +17,8 @@ The aim of the project is to create an easy to use, lightweight, 3D library with
 [Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) —
 [Questions](http://stackoverflow.com/questions/tagged/three.js) —
 [Forum](https://discourse.threejs.org/) —
-[Slack](https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLTQ1YmY4YTQxOTFjNDAzYmQ4NjU2YzRhNzliY2RiNDEyYjU2MjhhODgyYWQ5Y2MyZTU3MWNkOGVmOGRhOTQzYTk)
+[Slack](https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLTQ1YmY4YTQxOTFjNDAzYmQ4NjU2YzRhNzliY2RiNDEyYjU2MjhhODgyYWQ5Y2MyZTU3MWNkOGVmOGRhOTQzYTk) —
+[Discord](https://discordapp.com/invite/HF4UdyF)
 
 ### Usage ###
 
@@ -63,7 +64,7 @@ function animate() {
 }
 ```
 
-If everything went well you should see [this](https://jsfiddle.net/f2Lommf5/).
+If everything went well you should see [this](https://jsfiddle.net/8kubjpL5/).
 
 ### Change log ###
 

docs/api/en/audio/Audio.html

@@ -18,13 +18,7 @@ <h1>[name]</h1>
 			This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webaudio_sandbox webaudio / sandbox ]<br />
-			[example:webaudio_visualizer webaudio / visualizer ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// create an AudioListener and add it to the camera
@@ -44,6 +38,12 @@ <h2>Example</h2>
 		});
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/audio/AudioAnalyser.html

@@ -18,13 +18,7 @@ <h1>[name]</h1>
 
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webaudio_sandbox webaudio / sandbox ]<br />
-			[example:webaudio_visualizer webaudio / visualizer ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// create an AudioListener and add it to the camera
@@ -50,6 +44,12 @@ <h2>Example</h2>
 		var data = analyser.getAverageFrequency();
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/audio/AudioListener.html

@@ -18,14 +18,7 @@ <h1>[name]</h1>
 			In most cases, the listener object is a child of the camera. So the 3D transformation of the camera represents the 3D transformation of the listener.
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webaudio_sandbox webaudio / sandbox ]<br />
-			[example:webaudio_timing webaudio / timing ]<br />
-			[example:webaudio_visualizer webaudio / visualizer ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// create an AudioListener and add it to the camera
@@ -45,6 +38,13 @@ <h2>Example</h2>
 		});
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_timing webaudio / timing ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/audio/PositionalAudio.html

@@ -18,14 +18,7 @@ <h1>[name]</h1>
 			This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webaudio_orientation webaudio / orientation ]<br />
-			[example:webaudio_sandbox webaudio / sandbox ]<br />
-			[example:webaudio_timing webaudio / timing ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// create an AudioListener and add it to the camera
@@ -53,6 +46,13 @@ <h2>Example</h2>
 		mesh.add( sound );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webaudio_orientation webaudio / orientation ]<br />
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_timing webaudio / timing ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/cameras/ArrayCamera.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			An instance of [name] always has an array of sub cameras. It's mandatory to define for each sub camera the *viewport* property which determines the part of the viewport that is rendered with this camera.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 
 		<p>[example:webgl_camera_array camera / array ]</p>
 

docs/api/en/cameras/CubeCamera.html

@@ -14,10 +14,7 @@ <h1>[name]</h1>
 
 		<p class="desc">Creates 6 cameras that render to a [page:WebGLCubeRenderTarget].</p>
 
-		<h2>Examples</h2>
-
-		<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
-		<p>[example:webgl_shading_physical shading / physical ]</p>
+		<h2>Code Example</h2>
 
 		<code>// Create cube camera
 		var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
@@ -38,6 +35,12 @@ <h2>Examples</h2>
 		renderer.render( scene, camera );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
+			[example:webgl_shading_physical shading / physical ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/cameras/OrthographicCamera.html

@@ -21,22 +21,26 @@ <h1>[name]</h1>
 			This can be useful for rendering 2D scenes and UI elements, amongst other things.
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+		var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
+		scene.add( camera );
+		</code>
 
-		<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>
-		<p>[example:webgl_postprocessing_advanced postprocessing / advanced ]</p>
-		<p>[example:webgl_postprocessing_dof2 postprocessing / dof2 ]</p>
-		<p>[example:webgl_postprocessing_godrays postprocessing / godrays ]</p>
-		<p>[example:webgl_rtt rtt ]</p>
-		<p>[example:webgl_shaders_tonemapping shaders / tonemapping ]</p>
-		<p>[example:webgl_shadowmap shadowmap ]</p>
-
-		<code>var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
-scene.add( camera );</code>
+		<h2>Examples</h2>
 
+		<p>
+			[example:webgl_camera camera ]<br />
+			[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]<br />
+			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
+			[example:webgl_postprocessing_advanced postprocessing / advanced ]<br />
+			[example:webgl_postprocessing_dof2 postprocessing / dof2 ]<br />
+			[example:webgl_postprocessing_godrays postprocessing / godrays ]<br />
+			[example:webgl_rtt rtt ]<br />
+			[example:webgl_shaders_tonemapping shaders / tonemapping ]<br />
+			[example:webgl_shadowmap shadowmap ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/cameras/PerspectiveCamera.html

@@ -19,18 +19,22 @@ <h1>[name]</h1>
 			common projection mode used for rendering a 3D scene.
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+		var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+		scene.add( camera );
+		</code>
 
-		<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>
-		<p>[example:webgl_interactive_cubes interactive / cubes ]</p>
-		<p>[example:webgl_loader_collada_skinning loader / collada / skinning ]</p>
-
-		<code>var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
-scene.add( camera );</code>
+		<h2>Examples</h2>
 
+		<p>
+			[example:webgl_animation_skinning_blending animation / skinning / blending ]<br />
+			[example:webgl_animation_skinning_morph animation / skinning / blending ]<br />
+			[example:webgl_effects_stereo effects / stereo ]<br />
+			[example:webgl_interactive_cubes interactive / cubes ]<br />
+			[example:webgl_loader_collada_skinning loader / collada / skinning ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/cameras/StereoCamera.html

@@ -16,22 +16,14 @@ <h1>[name]</h1>
 		[link:https://en.wikipedia.org/wiki/Anaglyph_3D 3D Anaglyph] or [link:https://en.wikipedia.org/wiki/parallax_barrier Parallax Barrier].
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>[example:webgl_effects_anaglyph effects / anaglyph ]</p>
-		<p>[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]</p>
-		<p>[example:webgl_effects_stereo effects / stereo ]</p>
+		<h2>Examples</h2>
 
 		<p>
-		This class is used internally in the files<br /><br />
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/AnaglyphEffect.js examples/jsm/effects/AnaglyphEffect.js]<br /><br />
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/ParallaxBarrierEffect.js examples/jsm/effects/ParallaxBarrierEffect.js]<br /><br />
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/StereoEffect.js examples/jsm/effects/StereoEffect.js]<br /><br />
-		used in the above examples.
+			[example:webgl_effects_anaglyph effects / anaglyph ]<br />
+			[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
+			[example:webgl_effects_stereo effects / stereo ]
 		</p>
 
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( )</h3>

docs/api/en/constants/CustomBlendingEquations.html

@@ -10,15 +10,12 @@
 	<body>
 		<h1>Custom Blending Equation Constants</h1>
 
-
-		<h2>Example</h2>
-		<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
-
-		<h2>Usage</h2>
 		<p>
 			These work with all material types. First set the material's blending mode to THREE.CustomBlending, then set the desired Blending Equation, Source Factor and Destination Factor.
 		</p>
 
+		<h2>Code Example</h2>
+
 		<code>
 		var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
 		material.blending = THREE.CustomBlending;
@@ -27,6 +24,9 @@ <h2>Usage</h2>
 		material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
 		</code>
 
+		<h2>Examples</h2>
+		<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
+
 		<h2>Blending Equations</h2>
 		<code>
 		THREE.AddEquation

docs/api/en/core/BufferGeometry.html

@@ -22,7 +22,7 @@ <h1>[name]</h1>
 		For a less efficient but easier-to-use representation of geometry, see [page:Geometry].
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 		<code>
 		var geometry = new THREE.BufferGeometry();
 		// create a simple square shape. We duplicate the top left and bottom right
@@ -42,6 +42,8 @@ <h2>Example</h2>
 		var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 		var mesh = new THREE.Mesh( geometry, material );
 		</code>
+
+		<h2>Examples</h2>
 		<p>
 			[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
 			[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />

docs/api/en/core/EventDispatcher.html

@@ -15,36 +15,36 @@ <h1>[name]</h1>
 			[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
-// Adding events to a custom object
+		// Adding events to a custom object
 
-var Car = function () {
+		var Car = function () {
 
-    this.start = function () {
+		    this.start = function () {
 
-        this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
+		        this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
 
-    };
+		    };
 
-};
+		};
 
-// Mixing the EventDispatcher.prototype with the custom object prototype
+		// Mixing the EventDispatcher.prototype with the custom object prototype
 
-Object.assign( Car.prototype, EventDispatcher.prototype );
+		Object.assign( Car.prototype, EventDispatcher.prototype );
 
-// Using events with the custom object
+		// Using events with the custom object
 
-var car = new Car();
+		var car = new Car();
 
-car.addEventListener( 'start', function ( event ) {
+		car.addEventListener( 'start', function ( event ) {
 
-    alert( event.message );
+		    alert( event.message );
 
-} );
+		} );
 
-car.start();
+		car.start();
 		</code>
 
 		<h2>Constructor</h2>

docs/api/en/core/Face3.html

@@ -16,39 +16,40 @@ <h1>[name]</h1>
 		create them manually.
 		</p>
 
-
-		<h2>Examples</h2>
-
-		<p>[example:svg_sandbox svg / sandbox ]</p>
-		<p>[example:misc_exporter_obj exporter / obj ]</p>
-		<p>[example:webgl_shaders_vector WebGL / shaders / vector ]</p>
-
+		<h2>Code Example</h2>
 
 		<code>
-var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
+		var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
 
-//create a triangular geometry
-var geometry = new THREE.Geometry();
-geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
-geometry.vertices.push( new THREE.Vector3(  50, -50, 0 ) );
-geometry.vertices.push( new THREE.Vector3(  50,  50, 0 ) );
+		//create a triangular geometry
+		var geometry = new THREE.Geometry();
+		geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
+		geometry.vertices.push( new THREE.Vector3(  50, -50, 0 ) );
+		geometry.vertices.push( new THREE.Vector3(  50,  50, 0 ) );
 
-//create a new face using vertices 0, 1, 2
-var normal = new THREE.Vector3( 0, 0, 1 ); //optional
-var color = new THREE.Color( 0xffaa00 ); //optional
-var materialIndex = 0; //optional
-var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
+		//create a new face using vertices 0, 1, 2
+		var normal = new THREE.Vector3( 0, 0, 1 ); //optional
+		var color = new THREE.Color( 0xffaa00 ); //optional
+		var materialIndex = 0; //optional
+		var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
 
-//add the face to the geometry's faces array
-geometry.faces.push( face );
+		//add the face to the geometry's faces array
+		geometry.faces.push( face );
 
-//the face normals and vertex normals can be calculated automatically if not supplied above
-geometry.computeFaceNormals();
-geometry.computeVertexNormals();
+		//the face normals and vertex normals can be calculated automatically if not supplied above
+		geometry.computeFaceNormals();
+		geometry.computeVertexNormals();
 
-scene.add( new THREE.Mesh( geometry, material ) );
+		scene.add( new THREE.Mesh( geometry, material ) );
 	</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:svg_sandbox svg / sandbox ]<br />
+			[example:misc_exporter_obj exporter / obj ]<br />
+			[example:webgl_shaders_vector WebGL / shaders / vector ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/core/Geometry.html

@@ -21,20 +21,10 @@ <h1>[name]</h1>
 		</p>
 		</div>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
-
-		<div>[example:webgl_geometry_minecraft WebGL / geometry / minecraft ]</div>
-		<div>[example:webgl_geometry_minecraft_ao WebGL / geometry / minecraft / ao ]</div>
-		<div>[example:webgl_geometry_nurbs WebGL / geometry / nurbs ]</div>
-		<div>[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor ]</div>
-		<div>[example:webgl_interactive_cubes_gpu WebGL / interactive / cubes / gpu ]</div>
-		<div>[example:webgl_interactive_lines WebGL / interactive / lines ]</div>
-		<div>[example:webgl_interactive_raycasting_points WebGL / interactive / raycasting / points ]</div>
-		<div>[example:webgl_interactive_voxelpainter WebGL / interactive / voxelpainter ]</div>
-
-
-		<code>var geometry = new THREE.Geometry();
+		<code>
+		var geometry = new THREE.Geometry();
 
 		geometry.vertices.push(
 			new THREE.Vector3( -10,  10, 0 ),
@@ -47,6 +37,20 @@ <h2>Example</h2>
 		geometry.computeBoundingSphere();
 		</code>
 
+
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_geometry_minecraft WebGL / geometry / minecraft ]<br />
+			[example:webgl_geometry_minecraft_ao WebGL / geometry / minecraft / ao ]<br />
+			[example:webgl_geometry_nurbs WebGL / geometry / nurbs ]<br />
+			[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor ]<br />
+			[example:webgl_interactive_cubes_gpu WebGL / interactive / cubes / gpu ]<br />
+			[example:webgl_interactive_lines WebGL / interactive / lines ]<br />
+			[example:webgl_interactive_raycasting_points WebGL / interactive / raycasting / points ]<br />
+			[example:webgl_interactive_voxelpainter WebGL / interactive / voxelpainter ]
+		</p>
+
 		<h2>Constructor</h2>
 
 

docs/api/en/core/InterleavedBuffer.html

@@ -16,7 +16,7 @@ <h1>[name]</h1>
 			An introduction into interleaved arrays can be found here: [link:https://blog.tojicode.com/2011/05/interleaved-array-basics.html Interleaved array basics]
 		</p>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 
 		<p>[example:webgl_buffergeometry_points_interleaved webgl / buffergeometry / points / interleaved]</p>
 

docs/api/en/core/Raycaster.html

@@ -16,7 +16,7 @@ <h1>[name]</h1>
 		other things.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 		<code>
 		var raycaster = new THREE.Raycaster();
 		var mouse = new THREE.Vector2();
@@ -54,8 +54,11 @@ <h2>Example</h2>
 		window.requestAnimationFrame(render);
 
 		</code>
-		<div>
-			Examples: [example:webgl_interactive_cubes Raycasting to a Mesh]<br />
+
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_interactive_cubes Raycasting to a Mesh]<br />
 			[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
 			[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]<br />
 			[example:webgl_instancing_raycast Raycasting to a InstancedMesh]<br />
@@ -64,13 +67,8 @@ <h2>Example</h2>
 			[example:webgl_geometry_terrain_raycast Terrain raycasting]<br />
 			[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
 			[example:webgl_raycast_texture Raycast to a Texture]
-		</div>
-
-
-		<p>
 		</p>
 
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] ) {</h3>

docs/api/en/core/Uniform.html

@@ -13,15 +13,15 @@ <h1>[name]</h1>
 		<p class="desc">Uniforms are global [link:https://www.opengl.org/documentation/glsl/ GLSL] variables. They are passed to shader programs.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 		<p>
 		When declaring a uniform of a [page:ShaderMaterial], it is declared by value or by object.
 		</p>
 		<code>
 		uniforms: {
 			time: { value: 1.0 },
-			resolution: new THREE.Uniform(new THREE.Vector2())
-		}
+			resolution: new Uniform( new Vector2() )
+		};
 		</code>
 
 		<h2>Uniform types</h2>
@@ -186,6 +186,63 @@ <h2>Uniform types</h2>
 		(*) Same for an (innermost) array (dimension) of the same GLSL type, containing the components of all vectors or matrices in the array.
 		</p>
 
+		<h2>Structured Uniforms</h2>
+
+		<p>
+			Sometimes you want to organize uniforms as *structs* in your shader code. The following style must be used so *three.js* is able
+			to process structured uniform data.
+		</p>
+		<code>
+		uniforms = {
+			data: {
+				value: {
+					position: new Vector3(),
+					direction: new Vector3( 0, 0, 1 )
+				 }
+			}
+		};
+		</code>
+		This definition can be mapped on the following GLSL code:
+		<code>
+		struct Data {
+			vec3 position;
+			vec3 direction;
+		};
+
+		uniform Data data;
+		</code>
+
+		<h2>Structured Uniforms with Arrays</h2>
+
+		<p>
+			It's also possible to manage *structs* in arrays. The syntax for this use case looks like so:
+		</p>
+		<code>
+		var entry1 = {
+			position: new Vector3(),
+			direction: new Vector3( 0, 0, 1 )
+		};
+		var entry2 = {
+			position: new Vector3( 1, 1, 1 ),
+			direction: new Vector3( 0, 1, 0 )
+		};
+
+		uniforms = {
+			data: {
+				value: [ entry1, entry2 ]
+			}
+		};
+		</code>
+		This definition can be mapped on the following GLSL code:
+		<code>
+		struct Data {
+			vec3 position;
+			vec3 direction;
+		};
+
+		uniform Data data[ 2 ];
+		</code>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Object value] )</h3>

docs/api/en/extras/core/CurvePath.html

@@ -51,7 +51,14 @@ <h3>[method:null closePath]()</h3>
 
 		<h3>[method:Float getCurveLengths]()</h3>
 		<p>Adds together the lengths of the curves in the [page:.curves] array.</p>
-
+
+		<h3>[method:Vector getPoint]( [param:Float t] )</h3>
+		<p>
+			[page:Float t] - A position on the curve. Must be in the range [ 0, 1 ]. <br><br />
+
+			Returns a vector for a given position on the curve path.
+		</p>
+
 		<h3>[method:Array getPoints]( [param:Integer divisions] )</h3>
 		<p>
 			divisions -- number of pieces to divide the curve into. Default is *12*.<br /><br />

docs/api/en/extras/core/Path.html

@@ -16,7 +16,7 @@ <h1>[name]</h1>
 		A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var path = new THREE.Path();

docs/api/en/extras/core/Shape.html

@@ -17,6 +17,8 @@ <h1>[name]</h1>
 		[page:ShapeGeometry], to get points, or to get triangulated faces.
 		</p>
 
+		<h2>Code Example</h2>
+
 		<code>
 		var heartShape = new THREE.Shape();
 

docs/api/en/extras/core/ShapePath.html

@@ -16,7 +16,7 @@ <h1>[name]</h1>
 		series of paths.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 		<p>
 			[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2]
 		</p>
@@ -88,6 +88,8 @@ <h3>[method:Array toShapes]( [param:Boolean isCCW], [param:Boolean noHoles] )</h
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/ShapePath.js src/extras/core/ShapePath.js]
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/ShapePath.js src/extras/core/ShapePath.js]
+		</p>
 	</body>
 </html>

docs/api/en/extras/curves/CatmullRomCurve3.html

@@ -15,30 +15,32 @@ <h1>[name]</h1>
 		<p class="desc">Create a smooth 3d spline curve from a series of points using the
 			[link:https://en.wikipedia.org/wiki/Centripetal_Catmull-Rom_spline Catmull-Rom] algorithm.</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-		<p>
-			[example:webgl_geometry_extrude_splines WebGL / geometry / extrude / splines]
-		</p>
+		<code>
+		//Create a closed wavey loop
+		var curve = new THREE.CatmullRomCurve3( [
+			new THREE.Vector3( -10, 0, 10 ),
+			new THREE.Vector3( -5, 5, 5 ),
+			new THREE.Vector3( 0, 0, 0 ),
+			new THREE.Vector3( 5, -5, 5 ),
+			new THREE.Vector3( 10, 0, 10 )
+		] );
+
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-<code>
-//Create a closed wavey loop
-var curve = new THREE.CatmullRomCurve3( [
-	new THREE.Vector3( -10, 0, 10 ),
-	new THREE.Vector3( -5, 5, 5 ),
-	new THREE.Vector3( 0, 0, 0 ),
-	new THREE.Vector3( 5, -5, 5 ),
-	new THREE.Vector3( 10, 0, 10 )
-] );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		// Create the final object to add to the scene
+		var curveObject = new THREE.Line( geometry, material );
+		</code>
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		<h2>Examples</h2>
 
-// Create the final object to add to the scene
-var curveObject = new THREE.Line( geometry, material );
-</code>
+		<p>
+			[example:webgl_geometry_extrude_splines WebGL / geometry / extrude / splines]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/CubicBezierCurve.html

@@ -18,24 +18,24 @@ <h1>[name]</h1>
 			defined by a start point, endpoint and two control points.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-<code>
-var curve = new THREE.CubicBezierCurve(
-	new THREE.Vector2( -10, 0 ),
-	new THREE.Vector2( -5, 15 ),
-	new THREE.Vector2( 20, 15 ),
-	new THREE.Vector2( 10, 0 )
-);
+		<code>
+		var curve = new THREE.CubicBezierCurve(
+			new THREE.Vector2( -10, 0 ),
+			new THREE.Vector2( -5, 15 ),
+			new THREE.Vector2( 20, 15 ),
+			new THREE.Vector2( 10, 0 )
+		);
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-// Create the final object to add to the scene
-var curveObject = new THREE.Line( geometry, material );
-</code>
+		// Create the final object to add to the scene
+		var curveObject = new THREE.Line( geometry, material );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/CubicBezierCurve3.html

@@ -18,25 +18,25 @@ <h1>[name]</h1>
 			defined by a start point, endpoint and two control points.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-<code>
-var curve = new THREE.CubicBezierCurve3(
-	new THREE.Vector3( -10, 0, 0 ),
-	new THREE.Vector3( -5, 15, 0 ),
-	new THREE.Vector3( 20, 15, 0 ),
-	new THREE.Vector3( 10, 0, 0 )
-);
+		<code>
+		var curve = new THREE.CubicBezierCurve3(
+			new THREE.Vector3( -10, 0, 0 ),
+			new THREE.Vector3( -5, 15, 0 ),
+			new THREE.Vector3( 20, 15, 0 ),
+			new THREE.Vector3( 10, 0, 0 )
+		);
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-// Create the final object to add to the scene
-var curveObject = new THREE.Line( geometry, material );
+		// Create the final object to add to the scene
+		var curveObject = new THREE.Line( geometry, material );
 
-</code>
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/EllipseCurve.html

@@ -17,25 +17,25 @@ <h1>[name]</h1>
 			[page:Number xRadius] equal to the [page:Number yRadius] will result in a circle.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-<code>
-var curve = new THREE.EllipseCurve(
-	0,  0,            // ax, aY
-	10, 10,           // xRadius, yRadius
-	0,  2 * Math.PI,  // aStartAngle, aEndAngle
-	false,            // aClockwise
-	0                 // aRotation
-);
+		<code>
+		var curve = new THREE.EllipseCurve(
+			0,  0,            // ax, aY
+			10, 10,           // xRadius, yRadius
+			0,  2 * Math.PI,  // aStartAngle, aEndAngle
+			false,            // aClockwise
+			0                 // aRotation
+		);
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-// Create the final object to add to the scene
-var ellipse = new THREE.Line( geometry, material );
-</code>
+		// Create the final object to add to the scene
+		var ellipse = new THREE.Line( geometry, material );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/QuadraticBezierCurve.html

@@ -18,23 +18,23 @@ <h1>[name]</h1>
 			defined by a startpoint, endpoint and a single control point.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-<code>
-var curve = new THREE.QuadraticBezierCurve(
-	new THREE.Vector2( -10, 0 ),
-	new THREE.Vector2( 20, 15 ),
-	new THREE.Vector2( 10, 0 )
-);
+		<code>
+		var curve = new THREE.QuadraticBezierCurve(
+			new THREE.Vector2( -10, 0 ),
+			new THREE.Vector2( 20, 15 ),
+			new THREE.Vector2( 10, 0 )
+		);
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-//Create the final object to add to the scene
-var curveObject = new THREE.Line( geometry, material );
-</code>
+		//Create the final object to add to the scene
+		var curveObject = new THREE.Line( geometry, material );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/QuadraticBezierCurve3.html

@@ -18,23 +18,23 @@ <h1>[name]</h1>
 			defined by a startpoint, endpoint and a single control point.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-<code>
-var curve = new THREE.QuadraticBezierCurve3(
-	new THREE.Vector3( -10, 0, 0 ),
-	new THREE.Vector3( 20, 15, 0 ),
-	new THREE.Vector3( 10, 0, 0 )
-);
+		<code>
+		var curve = new THREE.QuadraticBezierCurve3(
+			new THREE.Vector3( -10, 0, 0 ),
+			new THREE.Vector3( 20, 15, 0 ),
+			new THREE.Vector3( 10, 0, 0 )
+		);
 
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-// Create the final object to add to the scene
-var curveObject = new THREE.Line( geometry, material );
-</code>
+		// Create the final object to add to the scene
+		var curveObject = new THREE.Line( geometry, material );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/extras/curves/SplineCurve.html

@@ -17,26 +17,26 @@ <h1>[name]</h1>
 		[page:Interpolations.CatmullRom] to create the curve.
 		</p>
 
-		<h2>Example</h2>
-
-<code>
-// Create a sine-like wave
-var curve = new THREE.SplineCurve( [
-	new THREE.Vector2( -10, 0 ),
-	new THREE.Vector2( -5, 5 ),
-	new THREE.Vector2( 0, 0 ),
-	new THREE.Vector2( 5, -5 ),
-	new THREE.Vector2( 10, 0 )
-] );
-
-var points = curve.getPoints( 50 );
-var geometry = new THREE.BufferGeometry().setFromPoints( points );
-
-var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
-
-// Create the final object to add to the scene
-var splineObject = new THREE.Line( geometry, material );
-</code>
+		<h2>Code Example</h2>
+
+		<code>
+		// Create a sine-like wave
+		var curve = new THREE.SplineCurve( [
+			new THREE.Vector2( -10, 0 ),
+			new THREE.Vector2( -5, 5 ),
+			new THREE.Vector2( 0, 0 ),
+			new THREE.Vector2( 5, -5 ),
+			new THREE.Vector2( 10, 0 )
+		] );
+
+		var points = curve.getPoints( 50 );
+		var geometry = new THREE.BufferGeometry().setFromPoints( points );
+
+		var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+
+		// Create the final object to add to the scene
+		var splineObject = new THREE.Line( geometry, material );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/geometries/BoxBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 		var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

docs/api/en/geometries/BoxGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

docs/api/en/geometries/CircleBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var geometry = new THREE.CircleBufferGeometry( 5, 32 );

docs/api/en/geometries/CircleGeometry.html

@@ -33,7 +33,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var geometry = new THREE.CircleGeometry( 5, 32 );

docs/api/en/geometries/ConeBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.ConeBufferGeometry( 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/ConeGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.ConeGeometry( 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/CylinderBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/CylinderGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/EdgesGeometry.html

@@ -14,9 +14,7 @@ <h1>[name]</h1>
 
 		<p class="desc">This can be used as a helper object to view the edges of a [page:Geometry Geometry] object.</p>
 
-		<h2>Example</h2>
-
-		[example:webgl_helpers helpers]
+		<h2>Code Example</h2>
 
 		<code>
 var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
@@ -25,6 +23,11 @@ <h2>Example</h2>
 scene.add( line );
 		</code>
 
+		<h2>Examples</h2>
+		<p>
+			[example:webgl_helpers helpers]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Geometry geometry], [param:Integer thresholdAngle] )</h3>

docs/api/en/geometries/ExtrudeBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/ExtrudeGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/LatheBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var points = [];

docs/api/en/geometries/LatheGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var points = [];

docs/api/en/geometries/ParametricBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );

docs/api/en/geometries/ParametricGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );

docs/api/en/geometries/PlaneBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.PlaneBufferGeometry( 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

docs/api/en/geometries/PlaneGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

docs/api/en/geometries/PolyhedronBufferGeometry.html

@@ -19,7 +19,7 @@ <h1>[name]</h1>
 			and [page:TetrahedronBufferGeometry] to generate their respective geometries.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 <code>
 var verticesOfCube = [
     -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,

docs/api/en/geometries/PolyhedronGeometry.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			project them onto a sphere, and then divide them up to the desired level of detail.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 <code>
 var verticesOfCube = [
     -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,

docs/api/en/geometries/RingBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.RingBufferGeometry( 1, 5, 32 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );

docs/api/en/geometries/RingGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.RingGeometry( 1, 5, 32 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );

docs/api/en/geometries/ShapeBufferGeometry.html

@@ -33,7 +33,7 @@ <h1>[name]</h1>
 		</script>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/ShapeGeometry.html

@@ -33,7 +33,7 @@ <h1>[name]</h1>
 		</script>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/SphereBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/SphereGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.SphereGeometry( 5, 32, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/en/geometries/TextBufferGeometry.html

@@ -36,11 +36,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Examples</h2>
-
-		<p>
-		[example:webgl_geometry_text geometry / text ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var loader = new THREE.FontLoader();
@@ -61,6 +57,12 @@ <h2>Examples</h2>
 		} );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+		[example:webgl_geometry_text geometry / text ]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]([param:String text], [param:Object parameters])</h3>

docs/api/en/geometries/TextGeometry.html

@@ -36,11 +36,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Examples</h2>
-
-		<p>
-		[example:webgl_geometry_text geometry / text ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var loader = new THREE.FontLoader();
@@ -61,6 +57,12 @@ <h2>Examples</h2>
 		} );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+		[example:webgl_geometry_text geometry / text ]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]([param:String text], [param:Object parameters])</h3>

docs/api/en/geometries/TorusBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.TorusBufferGeometry( 10, 3, 16, 100 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

docs/api/en/geometries/TorusGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

docs/api/en/geometries/TorusKnotBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

docs/api/en/geometries/TorusKnotGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

docs/api/en/geometries/TubeBufferGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		function CustomSinCurve( scale ) {

docs/api/en/geometries/TubeGeometry.html

@@ -32,7 +32,7 @@ <h1>[name]</h1>
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		function CustomSinCurve( scale ) {

docs/api/en/geometries/WireframeGeometry.html

@@ -14,41 +14,27 @@ <h1>[name]</h1>
 
 		<p class="desc">This can be used as a helper object to view a [page:Geometry Geometry] object as a wireframe.</p>
 
-		<!-- <iframe id="scene" src="scenes/geometry-browser.html#EdgeGeometry"></iframe>
-
-		<script>
-
-		// iOS iframe auto-resize workaround
-
-		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
-
-			var scene = document.getElementById( 'scene' );
-
-			scene.style.width = getComputedStyle( scene ).width;
-			scene.style.height = getComputedStyle( scene ).height;
-			scene.setAttribute( 'scrolling', 'no' );
-
-		}
-
-		</script> -->
-
-		<h2>Example</h2>
-
-		[example:webgl_helpers helpers]
+		<h2>Code Example</h2>
 
 		<code>
-var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );
+		var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );
 
-var wireframe = new THREE.WireframeGeometry( geometry );
+		var wireframe = new THREE.WireframeGeometry( geometry );
 
-var line = new THREE.LineSegments( wireframe );
-line.material.depthTest = false;
-line.material.opacity = 0.25;
-line.material.transparent = true;
+		var line = new THREE.LineSegments( wireframe );
+		line.material.depthTest = false;
+		line.material.opacity = 0.25;
+		line.material.transparent = true;
 
-scene.add( line );
+		scene.add( line );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_helpers helpers]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Geometry geometry] )</h3>

docs/api/en/helpers/ArrowHelper.html

@@ -14,13 +14,7 @@ <h1>[name]</h1>
 
 		<p class="desc">An 3D arrow object for visualizing directions.</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_geometries WebGL / geometries]<br/>
-			[example:webgl_geometry_normals WebGL / geometry / normals]<br/>
-			[example:webgl_shadowmesh WebGL / shadowmesh]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var dir = new THREE.Vector3( 1, 2, 0 );
@@ -36,6 +30,14 @@ <h2>Example</h2>
 		scene.add( arrowHelper );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_geometries WebGL / geometries]<br/>
+			[example:webgl_geometry_normals WebGL / geometry / normals]<br/>
+			[example:webgl_shadowmesh WebGL / shadowmesh]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]([param:Vector3 dir], [param:Vector3 origin], [param:Number length], [param:Number hex], [param:Number headLength], [param:Number headWidth] )</h3>

docs/api/en/helpers/AxesHelper.html

@@ -13,21 +13,24 @@
 		<h1>[name]</h1>
 
 		<p class="desc">An axis object to visualize the 3 axes in a simple way. <br />
-			The X axis is red. The Y axis is green. The Z axis is blue.</p>
+			The X axis is red. The Y axis is green. The Z axis is blue.
+		</p>
+
+		<h2>Code Example</h2>
+
+		<code>
+var axesHelper = new THREE.AxesHelper( 5 );
+scene.add( axesHelper );
+		</code>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 
 		<p>
 			[example:webgl_geometries WebGL / geometries]<br/>
 			[example:webgl_geometry_convex WebGL / geometry / convex]<br/>
 			[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor]
 		</p>
 
-		<code>
-var axesHelper = new THREE.AxesHelper( 5 );
-scene.add( axesHelper );
-    </code>
-
 		<h2>Constructor</h2>
 
 

docs/api/en/helpers/Box3Helper.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 		</p>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var box = new THREE.Box3();

docs/api/en/helpers/BoxHelper.html

@@ -19,13 +19,7 @@ <h1>[name]</h1>
 			so it won't work with [page:Sprite Sprites].
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_helpers WebGL / helpers]<br/>
-			[example:webgl_loader_nrrd WebGL / loader / nrrd]<br/>
-			[example:webgl_buffergeometry_drawrange WebGL / buffergeometry / drawrange]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var sphere = new THREE.SphereBufferGeometry();
@@ -34,6 +28,13 @@ <h2>Example</h2>
 		scene.add( box );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_helpers WebGL / helpers]<br/>
+			[example:webgl_loader_nrrd WebGL / loader / nrrd]<br/>
+			[example:webgl_buffergeometry_drawrange WebGL / buffergeometry / drawrange]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/helpers/CameraHelper.html

@@ -17,18 +17,18 @@ <h1>[name]</h1>
 		It visualizes the frustum of a camera using a [page:LineSegments].
 		</p>
 
-		<h2>Example</h2>
-		<p>
-			[example:webgl_camera WebGL / camera]<br/>
-			[example:webgl_geometry_extrude_splines WebGL / extrude / splines]
-		</p>
-
+		<h2>Code Example</h2>
 		<code>
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 var helper = new THREE.CameraHelper( camera );
 scene.add( helper );
 		</code>
 
+		<h2>Examples</h2>
+		<p>
+			[example:webgl_camera WebGL / camera]<br/>
+			[example:webgl_geometry_extrude_splines WebGL / extrude / splines]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/helpers/DirectionalLightHelper.html

@@ -18,17 +18,14 @@ <h1>[name]</h1>
 			This consists of plane and a line representing the light's position and direction.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var light = new THREE.DirectionalLight( 0xFFFFFF );
-
 		var helper = new THREE.DirectionalLightHelper( light, 5 );
-
 		scene.add( helper );
 		</code>
 
-
 		<h2>Constructor</h2>
 
 

docs/api/en/helpers/GridHelper.html

@@ -14,11 +14,7 @@ <h1>[name]</h1>
 
 		<p class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_helpers WebGL / helpers]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>var size = 10;
 		var divisions = 10;
@@ -27,6 +23,12 @@ <h2>Example</h2>
 		scene.add( gridHelper );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_helpers WebGL / helpers]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:number size], [param:Number divisions], [param:Color colorCenterLine], [param:Color colorGrid] )</h3>

docs/api/en/helpers/HemisphereLightHelper.html

@@ -16,12 +16,12 @@ <h1>[name]</h1>
 			Creates a visual aid consisting of a spherical [page:Mesh] for a [page:HemisphereLight HemisphereLight].
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
-var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
-var helper = new THREE.HemisphereLightHelper( light, 5 );
-scene.add( helper );
+		var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
+		var helper = new THREE.HemisphereLightHelper( light, 5 );
+		scene.add( helper );
 		</code>
 
 

docs/api/en/helpers/PlaneHelper.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 		</p>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );

docs/api/en/helpers/PointLightHelper.html

@@ -17,12 +17,7 @@ <h1>[name]</h1>
 			 a [page:PointLight].
 		 </p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_helpers WebGL /  helpers]
-		</p>
+		 <h2>Code Example</h2>
 
 		<code>
 		var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
@@ -34,8 +29,11 @@ <h2>Example</h2>
 		scene.add( pointLightHelper );
 		</code>
 
+		<h2>Examples</h2>
 
-
+		<p>
+			[example:webgl_helpers WebGL /  helpers]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/helpers/PolarGridHelper.html

@@ -14,13 +14,10 @@ <h1>[name]</h1>
 
 		<p class="desc">The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines.</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-		<p>
-			[example:webgl_helpers WebGL / helpers]
-		</p>
-
-		<code>var radius = 10;
+		<code>
+		var radius = 10;
 		var radials = 16;
 		var circles = 8;
 		var divisions = 64;
@@ -29,6 +26,12 @@ <h2>Example</h2>
 		scene.add( helper );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_helpers WebGL / helpers]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Number radius], [param:Number radials], [param:Number circles], [param:Number divisions], [param:Color color1], [param:Color color2] )</h3>

docs/api/en/helpers/SkeletonHelper.html

@@ -17,22 +17,21 @@ <h1>[name]</h1>
 		The helper is renderered using a [page:LineBasicMaterial LineBasicMaterial].
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+		var helper = new THREE.SkeletonHelper( skinnedMesh );
+		scene.add( helper );
+		</code>
+
+		<h2>Examples</h2>
 
 		<p>
 			[example:webgl_animation_skinning_blending WebGL / animation / skinning / blending]<br />
 			[example:webgl_animation_skinning_morph WebGL / animation / skinning / morph]<br />
 			[example:webgl_loader_bvh WebGL / loader / bvh ]
 		</p>
 
-		<code>
-var helper = new THREE.SkeletonHelper( skinnedMesh );
-scene.add( helper );
-		</code>
-
-
-
 		<h2>Constructor</h2>
 
 

docs/api/en/helpers/SpotLightHelper.html

@@ -14,11 +14,6 @@ <h1>[name]</h1>
 
 		<p class="desc">This displays a cone shaped helper object for a [page:SpotLight].</p>
 
-		<h2>Examples</h2>
-		<p>
-			[example:webgl_lights_spotlights WebGL/ lights / spotlights ]
-		</p>
-
 		<h2>Code Example</h2>
 		<code>
 		var spotLight = new THREE.SpotLight( 0xffffff );
@@ -29,6 +24,11 @@ <h2>Code Example</h2>
 		scene.add( spotLightHelper );
 		</code>
 
+		<h2>Examples</h2>
+		<p>
+			[example:webgl_lights_spotlights WebGL/ lights / spotlights ]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:SpotLight light], [param:Hex color] )</h3>

docs/api/en/lights/AmbientLight.html

@@ -18,16 +18,19 @@ <h1>[name]</h1>
 			This light cannot be used to cast shadows as it does not have a direction.
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+		var light = new THREE.AmbientLight( 0x404040 ); // soft white light
+		scene.add( light );
+		</code>
+
+		<h2>Examples</h2>
 		<p>
-		  [example:webgl_animation_cloth animation / cloth ]<br />
-		  [example:webgl_animation_skinning_blending animation / skinning / blending ]
+			[example:webgl_animation_cloth animation / cloth ]<br />
+			[example:webgl_animation_skinning_blending animation / skinning / blending ]
 		</p>
 
-<code>var light = new THREE.AmbientLight( 0x404040 ); // soft white light
-scene.add( light );</code>
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Integer color], [param:Float intensity] )</h3>

docs/api/en/lights/DirectionalLight.html

@@ -37,8 +37,15 @@ <h2>A Note about Position, Target and rotation</h2>
 			See the [page:.target target] property below for details on updating the target.
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+		// White directional light at half intensity shining from the top.
+		var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+		scene.add( directionalLight );
+		</code>
+
+		<h2>Examples</h2>
 		<p>
 			[example:misc_controls_fly controls / fly ]<br />
 			[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
@@ -48,13 +55,6 @@ <h2>Example</h2>
 			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection ]
 		</p>
 
-		<code>
-		// White directional light at half intensity shining from the top.
-		var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-		scene.add( directionalLight );
-		</code>
-
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Integer color], [param:Float intensity] )</h3>

docs/api/en/lights/HemisphereLight.html

@@ -19,21 +19,23 @@ <h1>[name]</h1>
 			This light cannot be used to cast shadows.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
-		<div>
+		<code>
+		var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
+		scene.add( light );
+		</code>
+
+		<h2>Examples</h2>
+
+		<p>
 			[example:webgl_lights_hemisphere lights / hemisphere ]<br />
-		  [example:misc_controls_pointerlock controls / pointerlock ]<br />
-		  [example:webgl_decals decals ]<br />
-		  [example:webgl_loader_collada_kinematics loader / collada / kinematics ]<br />
-		  [example:webgl_materials_lightmap materials / lightmap ]<br />
-		  [example:webgl_shaders_ocean shaders / ocean ]
-		</div>
-
-<code>
-var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
-scene.add( light );
-</code>
+			[example:misc_controls_pointerlock controls / pointerlock ]<br />
+			[example:webgl_decals decals ]<br />
+			[example:webgl_loader_collada_kinematics loader / collada / kinematics ]<br />
+			[example:webgl_materials_lightmap materials / lightmap ]<br />
+			[example:webgl_shaders_ocean shaders / ocean ]
+		</p>
 
 		<h2>Constructor</h2>
 		<h3>[name]( [param:Integer skyColor], [param:Integer groundColor], [param:Float intensity] )</h3>

docs/api/en/lights/PointLight.html

@@ -19,8 +19,15 @@ <h1>[name]</h1>
 			 This light can cast shadows - see [page:PointLightShadow] page for details.
 		</p>
 
+		<h2>Code Example</h2>
 
-		<h2>Example</h2>
+		<code>
+var light = new THREE.PointLight( 0xff0000, 1, 100 );
+light.position.set( 50, 50, 50 );
+scene.add( light );
+		</code>
+
+		<h2>Examples</h2>
 
 		<p>
 			[example:webgl_lights_pointlights lights / pointlights ]<br />
@@ -30,13 +37,6 @@ <h2>Example</h2>
 			[example:webgl_lensflares lensflares ]
 		</p>
 
-		<code>
-var light = new THREE.PointLight( 0xff0000, 1, 100 );
-light.position.set( 50, 50, 50 );
-scene.add( light );
-		</code>
-
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Integer color], [param:Float intensity], [param:Number distance], [param:Float decay] )</h3>

docs/api/en/lights/RectAreaLight.html

@@ -24,14 +24,9 @@ <h1>[name]</h1>
 			</ul>
 		</p>
 
+		<h2>Code Example</h2>
 
-
-		<h2>Examples</h2>
-
-		<p>
-			[example:webgl_lights_rectarealight WebGL / rectarealight ]
-
-			<code>
+		<code>
 var width = 10;
 var height = 10;
 var intensity = 1;
@@ -43,9 +38,13 @@ <h2>Examples</h2>
 rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
 rectLight.add( rectLightHelper );
 
-			</code>
-		</p>
+		</code>
+
+		<h2>Examples</h2>
 
+		<p>
+			[example:webgl_lights_rectarealight WebGL / rectarealight ]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/lights/SpotLight.html

@@ -19,13 +19,6 @@ <h1>[name]</h1>
 			This light can cast shadows - see the [page:SpotLightShadow] page for details.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_lights_spotlight lights / spotlight ]<br />
-			[example:webgl_lights_spotlights lights / spotlights ]
-		</p>
-
 		<h2>Code Example</h2>
 		<code>
 		// white spotlight shining from the side, casting a shadow
@@ -45,6 +38,13 @@ <h2>Code Example</h2>
 		scene.add( spotLight );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_lights_spotlight lights / spotlight ]<br />
+			[example:webgl_lights_spotlights lights / spotlights ]
+		</p>
+
 		<h2>Constructor</h2>
 
 

docs/api/en/lights/shadows/DirectionalLightShadow.html

@@ -20,46 +20,45 @@ <h1>[name]</h1>
 			are parallel.
 		</p>
 
-		<h2>Example</h2>
-		<p>
-			<code>
-//Create a WebGLRenderer and turn on shadows in the renderer
-var renderer = new THREE.WebGLRenderer();
-renderer.shadowMap.enabled = true;
-renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
-
-//Create a DirectionalLight and turn on shadows for the light
-var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
-light.position.set( 0, 1, 0 ); 			//default; light shining from top
-light.castShadow = true;            // default false
-scene.add( light );
-
-//Set up shadow properties for the light
-light.shadow.mapSize.width = 512;  // default
-light.shadow.mapSize.height = 512; // default
-light.shadow.camera.near = 0.5;    // default
-light.shadow.camera.far = 500;     // default
-
-//Create a sphere that cast shadows (but does not receive them)
-var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
-var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
-var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
-sphere.castShadow = true; //default is false
-sphere.receiveShadow = false; //default
-scene.add( sphere );
-
-//Create a plane that receives shadows (but does not cast them)
-var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
-var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
-var plane = new THREE.Mesh( planeGeometry, planeMaterial );
-plane.receiveShadow = true;
-scene.add( plane );
-
-//Create a helper for the shadow camera (optional)
-var helper = new THREE.CameraHelper( light.shadow.camera );
-scene.add( helper );
-			</code>
-		</p>
+		<h2>Code Example</h2>
+
+		<code>
+		//Create a WebGLRenderer and turn on shadows in the renderer
+		var renderer = new THREE.WebGLRenderer();
+		renderer.shadowMap.enabled = true;
+		renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+		//Create a DirectionalLight and turn on shadows for the light
+		var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
+		light.position.set( 0, 1, 0 ); 			//default; light shining from top
+		light.castShadow = true;            // default false
+		scene.add( light );
+
+		//Set up shadow properties for the light
+		light.shadow.mapSize.width = 512;  // default
+		light.shadow.mapSize.height = 512; // default
+		light.shadow.camera.near = 0.5;    // default
+		light.shadow.camera.far = 500;     // default
+
+		//Create a sphere that cast shadows (but does not receive them)
+		var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+		var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+		var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+		sphere.castShadow = true; //default is false
+		sphere.receiveShadow = false; //default
+		scene.add( sphere );
+
+		//Create a plane that receives shadows (but does not cast them)
+		var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+		var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+		var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+		plane.receiveShadow = true;
+		scene.add( plane );
+
+		//Create a helper for the shadow camera (optional)
+		var helper = new THREE.CameraHelper( light.shadow.camera );
+		scene.add( helper );
+		</code>
 
 		<h2>Constructor</h2>
 		<h3>[name]( )</h3>

docs/api/en/lights/shadows/PointLightShadow.html

@@ -16,46 +16,44 @@ <h1>[name]</h1>
 		</p>
 
 
-		<h2>Example</h2>
-		<p>
-			<code>
-//Create a WebGLRenderer and turn on shadows in the renderer
-var renderer = new THREE.WebGLRenderer();
-renderer.shadowMap.enabled = true;
-renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
-
-//Create a PointLight and turn on shadows for the light
-var light = new THREE.PointLight( 0xffffff, 1, 100 );
-light.position.set( 0, 10, 0 );
-light.castShadow = true;            // default false
-scene.add( light );
-
-//Set up shadow properties for the light
-light.shadow.mapSize.width = 512;  // default
-light.shadow.mapSize.height = 512; // default
-light.shadow.camera.near = 0.5;       // default
-light.shadow.camera.far = 500      // default
-
-//Create a sphere that cast shadows (but does not receive them)
-var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
-var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
-var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
-sphere.castShadow = true; //default is false
-sphere.receiveShadow = false; //default
-scene.add( sphere );
-
-//Create a plane that receives shadows (but does not cast them)
-var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
-var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
-var plane = new THREE.Mesh( planeGeometry, planeMaterial );
-plane.receiveShadow = true;
-scene.add( plane );
-
-//Create a helper for the shadow camera (optional)
-var helper = new THREE.CameraHelper( light.shadow.camera );
-scene.add( helper );
-			</code>
-		</p>
+		<h2>Code Example</h2>
+		<code>
+		//Create a WebGLRenderer and turn on shadows in the renderer
+		var renderer = new THREE.WebGLRenderer();
+		renderer.shadowMap.enabled = true;
+		renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+		//Create a PointLight and turn on shadows for the light
+		var light = new THREE.PointLight( 0xffffff, 1, 100 );
+		light.position.set( 0, 10, 0 );
+		light.castShadow = true;            // default false
+		scene.add( light );
+
+		//Set up shadow properties for the light
+		light.shadow.mapSize.width = 512;  // default
+		light.shadow.mapSize.height = 512; // default
+		light.shadow.camera.near = 0.5;       // default
+		light.shadow.camera.far = 500      // default
+
+		//Create a sphere that cast shadows (but does not receive them)
+		var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+		var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+		var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+		sphere.castShadow = true; //default is false
+		sphere.receiveShadow = false; //default
+		scene.add( sphere );
+
+		//Create a plane that receives shadows (but does not cast them)
+		var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+		var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+		var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+		plane.receiveShadow = true;
+		scene.add( plane );
+
+		//Create a helper for the shadow camera (optional)
+		var helper = new THREE.CameraHelper( light.shadow.camera );
+		scene.add( helper );
+		</code>
 
 		<h2>Constructor</h2>
 		<h3>[name]( )</h3>

docs/api/en/lights/shadows/SpotLightShadow.html

@@ -16,46 +16,43 @@ <h1>[name]</h1>
 			This is used internally by [page:SpotLight SpotLights] for calculating shadows.
 		</p>
 
-		<h2>Example</h2>
-		<p>
-			<code>
-//Create a WebGLRenderer and turn on shadows in the renderer
-var renderer = new THREE.WebGLRenderer();
-renderer.shadowMap.enabled = true;
-renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
-
-//Create a SpotLight and turn on shadows for the light
-var light = new THREE.SpotLight( 0xffffff );
-light.castShadow = true;            // default false
-scene.add( light );
-
-//Set up shadow properties for the light
-light.shadow.mapSize.width = 512;  // default
-light.shadow.mapSize.height = 512; // default
-light.shadow.camera.near = 0.5;       // default
-light.shadow.camera.far = 500      // default
-
-//Create a sphere that cast shadows (but does not receive them)
-var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
-var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
-var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
-sphere.castShadow = true; //default is false
-sphere.receiveShadow = false; //default
-scene.add( sphere );
-
-//Create a plane that receives shadows (but does not cast them)
-var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
-var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
-var plane = new THREE.Mesh( planeGeometry, planeMaterial );
-plane.receiveShadow = true;
-scene.add( plane );
-
-//Create a helper for the shadow camera (optional)
-var helper = new THREE.CameraHelper( light.shadow.camera );
-scene.add( helper );
-			</code>
-		</p>
-
+		<h2>Code Example</h2>
+		<code>
+		//Create a WebGLRenderer and turn on shadows in the renderer
+		var renderer = new THREE.WebGLRenderer();
+		renderer.shadowMap.enabled = true;
+		renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+		//Create a SpotLight and turn on shadows for the light
+		var light = new THREE.SpotLight( 0xffffff );
+		light.castShadow = true;            // default false
+		scene.add( light );
+
+		//Set up shadow properties for the light
+		light.shadow.mapSize.width = 512;  // default
+		light.shadow.mapSize.height = 512; // default
+		light.shadow.camera.near = 0.5;       // default
+		light.shadow.camera.far = 500      // default
+
+		//Create a sphere that cast shadows (but does not receive them)
+		var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+		var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+		var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+		sphere.castShadow = true; //default is false
+		sphere.receiveShadow = false; //default
+		scene.add( sphere );
+
+		//Create a plane that receives shadows (but does not cast them)
+		var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+		var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+		var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+		plane.receiveShadow = true;
+		scene.add( plane );
+
+		//Create a helper for the shadow camera (optional)
+		var helper = new THREE.CameraHelper( light.shadow.camera );
+		scene.add( helper );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/api/en/loaders/AnimationLoader.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			This uses the [page:FileLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a loader

docs/api/en/loaders/AudioLoader.html

@@ -18,7 +18,7 @@ <h1>[name]</h1>
 			This uses the [page:FileLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a listener

docs/api/en/loaders/BufferGeometryLoader.html

@@ -17,11 +17,7 @@ <h1>[name]</h1>
 			This uses the [page:FileLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_performance WebGL / performance]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a loader
@@ -51,6 +47,12 @@ <h2>Example</h2>
 		);
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_performance WebGL / performance]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:LoadingManager manager] )</h3>

docs/api/en/loaders/Cache.html

@@ -14,6 +14,14 @@ <h1>[name]</h1>
 			A simple caching system, used internally by [page:FileLoader].
 		</p>
 
+		<h2>Code Example</h2>
+
+		<p>To enable caching across all loaders	that use [page:FileLoader], set</p>
+		<code>
+		THREE.Cache.enabled = true.
+		</code>
+
+
 		<h2>Examples</h2>
 
 		<p>
@@ -22,14 +30,6 @@ <h2>Examples</h2>
 			[example:webgl_loader_ttf WebGL / loader / ttf]
 		</p>
 
-		<h2>Usage</h2>
-
-		<p>To enable caching across all loaders	that use [page:FileLoader], set</p>
-		<code>
-THREE.Cache.enabled = true.
-		</code>
-
-
 		<h2>Properties</h2>
 
 		<h3>[property:Boolean enabled]</h3>

docs/api/en/loaders/CubeTextureLoader.html

@@ -17,15 +17,7 @@ <h1>[name]</h1>
 			This uses the [page:ImageLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_materials_cubemap materials / cubemap]<br />
-			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
-			[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
-			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
-			[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 var scene = new THREE.Scene();
@@ -41,6 +33,16 @@ <h2>Example</h2>
 			] );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_materials_cubemap materials / cubemap]<br />
+			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
+			[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
+			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
+			[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:LoadingManager manager] )</h3>

docs/api/en/loaders/FileLoader.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			It can also be used directly to load any file type that does not have a loader.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 		<code>
 		var loader = new THREE.FileLoader();
 

docs/api/en/loaders/FontLoader.html

@@ -20,12 +20,7 @@ <h1>[name]</h1>
 		You can convert fonts online using [link:https://gero3.github.io/facetype.js/ facetype.js]
 		</p>
 
-		<h2>Examples</h2>
-
-		<p>
-		[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
-		[example:webgl_geometry_text geometry / text ]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var loader = new THREE.FontLoader();
@@ -51,6 +46,13 @@ <h2>Examples</h2>
 		);
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+		[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
+		[example:webgl_geometry_text geometry / text ]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:LoadingManager manager] )</h3>

docs/api/en/loaders/ImageBitmapLoader.html

@@ -25,11 +25,7 @@ <h1>[name]</h1>
 			instead. Refer to [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.10 WebGL specification] for the detail.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_loader_imagebitmap WebGL / loader / ImageBitmap]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a loader
@@ -59,6 +55,11 @@ <h2>Example</h2>
 		);
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_loader_imagebitmap WebGL / loader / ImageBitmap]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/loaders/ImageLoader.html

@@ -18,12 +18,7 @@ <h1>[name]</h1>
 			[page:CubeTextureLoader], [page:ObjectLoader] and [page:TextureLoader].
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_loader_obj WebGL / loader / obj]<br />
-			[example:webgl_shaders_ocean WebGL / shaders / ocean]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a loader
@@ -57,6 +52,13 @@ <h2>Example</h2>
 		that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-275785639 this thread].
 		</p>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_loader_obj WebGL / loader / obj]<br />
+			[example:webgl_shaders_ocean WebGL / shaders / ocean]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:LoadingManager manager] )</h3>

docs/api/en/loaders/MaterialLoader.html

@@ -17,8 +17,7 @@ <h1>[name]</h1>
 			This uses the [page:FileLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
-
+		<h2>Code Example</h2>
 
 		<code>
 		// instantiate a loader

docs/api/en/loaders/ObjectLoader.html

@@ -18,12 +18,7 @@ <h1>[name]</h1>
 			This uses the [page:FileLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
-			[example:webgl_materials_lightmap WebGL / materials / lightmap]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var loader = new THREE.ObjectLoader();
@@ -57,7 +52,12 @@ <h2>Example</h2>
 		scene.add( object );
 		</code>
 
+		<h2>Examples</h2>
 
+		<p>
+			[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
+			[example:webgl_materials_lightmap WebGL / materials / lightmap]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/loaders/TextureLoader.html

@@ -17,11 +17,7 @@ <h1>[name]</h1>
 			This uses the [page:ImageLoader] internally for loading files.
 		</p>
 
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_geometry_cube geometry / cube]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
 		var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
@@ -30,7 +26,7 @@ <h2>Example</h2>
 		var material = new THREE.MeshBasicMaterial( { map: texture } );
 		</code>
 
-		<h2>Example with Callbacks</h2>
+		<h2>Code Example with Callbacks</h2>
 
 		<code>
 		// instantiate a loader
@@ -59,7 +55,15 @@ <h2>Example with Callbacks</h2>
 		);
 		</code>
 
-		Please note three.js r84 dropped support for TextureLoader progress events. For a TextureLoader that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-293260145 this thread].
+		<p>
+			Please note three.js r84 dropped support for TextureLoader progress events. For a TextureLoader that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-293260145 this thread].
+		</p>
+
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_geometry_cube geometry / cube]
+		</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/loaders/managers/DefaultLoadingManager.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			for say, textures and models.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<p>
 			You can optionally set the [page:LoadingManager.onStart onStart], [page:LoadingManager.onLoad onLoad],
@@ -66,6 +66,8 @@ <h2>Methods</h2>
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
+		</p>
 	</body>
 </html>

docs/api/en/loaders/managers/LoadingManager.html

@@ -19,15 +19,7 @@ <h1>[name]</h1>
 
 		</p>
 
-
-		<h2>Example</h2>
-
-		<p>
-			[example:webgl_loader_fbx WebGL / loader / fbx]<br />
-			[example:webgl_loader_obj WebGL / loader / obj]<br />
-			[example:webgl_materials_physical_reflectivity WebGL / materials / physical / reflectivity]<br />
-			[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
-		</p>
+		<h2>Code Example</h2>
 
 		<p>
 			This example shows how to use LoadingManager to track the progress of
@@ -105,6 +97,15 @@ <h2>Example</h2>
 		});
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_loader_fbx WebGL / loader / fbx]<br />
+			[example:webgl_loader_obj WebGL / loader / obj]<br />
+			[example:webgl_materials_physical_reflectivity WebGL / materials / physical / reflectivity]<br />
+			[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
@@ -203,7 +204,8 @@ <h3>[method:null setURLModifier]( [param:Function callback] )</h3>
 		behavior can be used to load assets from .ZIP files, drag-and-drop APIs, and Data URIs.
 		</p>
 
-		<br /><br />
+		<br />
+
 		<p>
 			<em>Note: The following methods are designed to be called internally by loaders. You shouldn't call
 			them directly.</em>
@@ -232,6 +234,8 @@ <h3>[method:null itemError]( [param:String url] )</h3>
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
+		</p>
 	</body>
 </html>

docs/api/en/materials/LineBasicMaterial.html

@@ -14,6 +14,17 @@ <h1>[name]</h1>
 
 		<p class="desc">A material for drawing wireframe-style geometries.</p>
 
+		<h2>Code Example</h2>
+
+		<code>
+		var material = new THREE.LineBasicMaterial( {
+			color: 0xffffff,
+			linewidth: 1,
+			linecap: 'round', //ignored by WebGLRenderer
+			linejoin:  'round' //ignored by WebGLRenderer
+		} );
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>
@@ -33,15 +44,6 @@ <h2>Examples</h2>
 			[example:webgl_physics_rope WebGL / phyics / rope]
 		</p>
 
-		<code>
-var material = new THREE.LineBasicMaterial( {
-	color: 0xffffff,
-	linewidth: 1,
-	linecap: 'round', //ignored by WebGLRenderer
-	linejoin:  'round' //ignored by WebGLRenderer
-} );
-		</code>
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Object parameters] )</h3>

docs/api/en/materials/LineDashedMaterial.html

@@ -8,69 +8,55 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:Material] &rarr;
+		[page:Material] &rarr; [page:LineBasicMaterial] &rarr;
 
 		<h1>[name]</h1>
 
 		<p class="desc">A material for drawing wireframe-style geometries with dashed lines.</p>
 
+		<h2>Code Example</h2>
+
+		<code>
+		var material = new THREE.LineDashedMaterial( {
+			color: 0xffffff,
+			linewidth: 1,
+			scale: 1,
+			dashSize: 3,
+			gapSize: 1,
+		} );
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>
 			[example:webgl_lines_dashed WebGL / lines / dashed]<br />
 		</p>
 
-		<code>
-var material = new THREE.LineDashedMaterial( {
-	color: 0xffffff,
-	linewidth: 1,
-	scale: 1,
-	dashSize: 3,
-	gapSize: 1,
-} );
-		</code>
-
 		<h2>Constructor</h2>
 
 
 		<h3>[name]( [param:Object parameters] )</h3>
 		<p>
 		[page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
-		Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
-
-		The exception is the property [page:Hexadecimal color], which can be passed i	as a hexadecimal
-		string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
+		Any property of the material (including any property inherited from [page:LineBasicMaterial]) can be passed in here.
 		</p>
 
 
 		<h2>Properties</h2>
-		<p>See the base [page:Material] class for common properties.</p>
-
-		<h3>[property:Color color]</h3>
-		<p>[page:Color] of the material, by default set to white (0xffffff).</p>
+		<p>See the base [page:LineBasicMaterial] class for common properties.</p>
 
 		<h3>[property:number dashSize]</h3>
 		<p>The size of the dash. This is both the gap with the stroke. Default is *3*.</p>
 
 		<h3>[property:number gapSize]</h3>
 		<p>The size of the gap. Default is *1*.</p>
 
-		<h3>[property:Float linewidth]</h3>
-		<p>
-			Controls line 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]
-			with the [page:WebGLRenderer WebGL] renderer on most platforms linewidth will
-			always be 1 regardless of the set value.
-		</p>
 
 		<h3>[property:number scale]</h3>
 		<p>The scale of the dashed part of a line. Default is *1*.</p>
 
 		<h2>Methods</h2>
-		<p>See the base [page:Material] class for common methods.</p>
-
-
+		<p>See the base [page:LineBasicMaterial] class for common methods.</p>
 
 		<h2>Source</h2>
 

docs/api/en/materials/MeshDistanceMaterial.html

@@ -19,7 +19,7 @@ <h1>[name]</h1>
 			The following examples demonstrates this approach in order to ensure transparent parts of objects do no cast shadows.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 
 		<p>
 			[example:webgl_shadowmap_pointlight WebGL / shadowmap / pointlight]

docs/api/en/materials/MeshPhysicalMaterial.html

@@ -13,9 +13,30 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			An extension of the [page:MeshStandardMaterial] that allows for greater control over reflectivity.<br /><br />
+			An extension of the [page:MeshStandardMaterial], providing more advanced physically-based rendering properties:
+		</p>
+
+		<ul>
+			<li>
+				<b>Clearcoat:</b> Some materials — like car paints, carbon fiber, and wet surfaces — require a
+				clear, reflective layer on top of another layer that may be irregular or rough. Clearcoat
+				approximates this effect, without the need for a separate transparent surface.
+			</li>
+			<li>
+				<b>Physically-based transparency:</b> One limitation of [page:Material.opacity .opacity] is
+				that highly transparent materials are less reflective. Physically-based [page:.transparency]
+				provides a more realistic option for thin, transparent surfaces like glass.
+			</li>
+			<li>
+				<b>Advanced reflectivity:</b> More flexible reflectivity for non-metallic materials.
+			</li>
+		</ul>
 
-			Note that for best results you should always specify an [page:.envMap environment map] when using this material.
+		<p>
+			As a result of these complex shading features, MeshPhysicalMaterial has a higher performance
+			cost, per pixel, than other three.js materials. Most effects are disabled by default, and add
+			cost as they are enabled. For best results, always specify an [page:.envMap environment map]
+			when using this material.
 		</p>
 
 		<iframe id="scene" src="scenes/material-browser.html#MeshPhysicalMaterial"></iframe>
@@ -61,9 +82,14 @@ <h2>Properties</h2>
 
 		<h3>[property:Float clearcoat]</h3>
 		<p>
-		Represents the thickness of the clear coat layer, from *0.0* to *1.0*. You can use clear coat related properties to enable multilayer
-		materials that have a thin translucent layer over the base layer. Typical examples for this model are car paints or acrylic.
-		Default is *0.0*.
+		Represents the thickness of the clear coat layer, from *0.0* to *1.0*. Use clear coat related properties to enable multilayer
+		materials that have a thin translucent layer over the base layer. Default is *0.0*.
+		</p>
+
+		<h3>[property:Texture clearcoatMap]</h3>
+		<p>
+		The red channel of this texture is multiplied against [page:.clearcoat], for per-pixel control
+		over a coating's thickness. Default is *null*.
 		</p>
 
 		<h3>[property:Float clearcoatNormalMap]</h3>
@@ -75,6 +101,12 @@ <h3>[property:Vector2 clearcoatNormalScale]</h3>
 		<h3>[property:Float clearcoatRoughness]</h3>
 		<p>Roughness of the clear coat layer, from *0.0* to *1.0*. Default is *0.0*.</p>
 
+		<h3>[property:Texture clearcoatRoughnessMap]</h3>
+		<p>
+		The green channel of this texture is multiplied against [page:.clearcoatRoughness], for per-pixel control
+		over a coating's roughness. Default is *null*.
+		</p>
+
 		<h3>[property:Object defines]</h3>
 		<p>An object of the form:
 			<code>
@@ -99,11 +131,11 @@ <h3>[property:Float reflectivity]</h3>
 		<h3>[property:Float transparency]</h3>
 		<p>
 		Degree of transparency, from *0.0* to *1.0*. Default is *0.0*.<br />
-		
+
 		Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are mostly transparent.
-		
+
 		The transparency property can be used to model these materials.<br />
-		
+
 		When transparency is non-zero, [page:Material.opacity opacity] should be set to *1*.
 		</p>
 

docs/api/en/materials/PointsMaterial.html

@@ -14,6 +14,30 @@ <h1>[name]</h1>
 
 		<p class="desc">The default material used by [page:Points].</p>
 
+		<h2>Code Example</h2>
+		<code>
+		var vertices = [];
+
+		for ( var i = 0; i < 10000; i ++ ) {
+
+			var x = THREE.MathUtils.randFloatSpread( 2000 );
+			var y = THREE.MathUtils.randFloatSpread( 2000 );
+			var z = THREE.MathUtils.randFloatSpread( 2000 );
+
+			vertices.push( x, y, z );
+
+		}
+
+		var geometry = new THREE.BufferGeometry();
+		geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
+		var material = new THREE.PointsMaterial( { color: 0x888888 } );
+
+		var points = new THREE.Points( geometry, material );
+
+		scene.add( points );
+		</code>
+
 		<h2>Examples</h2>
 		<p>
 			[example:misc_controls_fly misc / controls / fly]<br />
@@ -31,30 +55,7 @@ <h2>Examples</h2>
 			[example:webgl_trails WebGL / trails]
 		</p>
 
-		<code>
-var vertices = [];
-
-for ( var i = 0; i < 10000; i ++ ) {
-
-	var x = THREE.MathUtils.randFloatSpread( 2000 );
-	var y = THREE.MathUtils.randFloatSpread( 2000 );
-	var z = THREE.MathUtils.randFloatSpread( 2000 );
-
-	vertices.push( x, y, z );
-
-}
-
-var geometry = new THREE.BufferGeometry();
-geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-
-var material = new THREE.PointsMaterial( { color: 0x888888 } );
-
-var points = new THREE.Points( geometry, material );
-
-scene.add( points );
-		</code>
-
-		<h3>[name]( [param:Object parameters] )</h3>
+		<h2>[name]( [param:Object parameters] )</h2>
 		<p>
 			[page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
 			Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />

docs/api/en/materials/RawShaderMaterial.html

@@ -17,6 +17,19 @@ <h1>[name]</h1>
 			built-in uniforms and attributes are not automatically prepended to the GLSL shader code.
 		</p>
 
+		<h2>Code Example</h2>
+		<code>
+		var material = new THREE.RawShaderMaterial( {
+
+			uniforms: {
+				time: { value: 1.0 }
+			},
+			vertexShader: document.getElementById( 'vertexShader' ).textContent,
+			fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+
+		} );
+		</code>
+
 		<h2>Examples</h2>
 		<p>
 			[example:webgl_buffergeometry_rawshader WebGL / buffergeometry / rawshader]<br />
@@ -28,18 +41,6 @@ <h2>Examples</h2>
 			[example:webgl_raymarching_reflect WebGL / raymarching / reflect]
 		</p>
 
-		<code>
-var material = new THREE.RawShaderMaterial( {
-
-    uniforms: {
-        time: { value: 1.0 }
-    },
-    vertexShader: document.getElementById( 'vertexShader' ).textContent,
-    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-
-} );
-		</code>
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Object parameters] )</h3>

docs/api/en/materials/ShaderMaterial.html

@@ -45,7 +45,7 @@ <h1>[name]</h1>
 				[page:RawShaderMaterial] instead of this class.
 			</li>
 			<li>
-				You can use the directive #pragma unroll_loop in order to unroll a *for* loop in GLSL by the shader preprocessor.
+				You can use the directive #pragma unroll_loop_start and #pragma unroll_loop_end in order to unroll a *for* loop in GLSL by the shader preprocessor.
 				The directive has to be placed right above the loop. The loop formatting has to correspond to a defined standard.
 				<ul>
 					<li>
@@ -59,17 +59,37 @@ <h1>[name]</h1>
 					</li>
 				</ul>
 				<code>
-		#pragma unroll_loop
+		#pragma unroll_loop_start
 		for ( int i = 0; i < 10; i ++ ) {
 
 			// ...
 
 		}
+		#pragma unroll_loop_end
 				</code>
 			</li>
 		</ul>
 		</p>
 
+		<h2>Code Example</h2>
+
+		<code>
+		var material = new THREE.ShaderMaterial( {
+
+			uniforms: {
+
+				time: { value: 1.0 },
+				resolution: { value: new THREE.Vector2() }
+
+			},
+
+			vertexShader: document.getElementById( 'vertexShader' ).textContent,
+
+			fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+
+		} );
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>
@@ -101,26 +121,8 @@ <h2>Examples</h2>
 			[example:webgl_nearestneighbour webgl / nearestneighbour]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />
 			[example:webgl_postprocessing_godrays webgl / postprocessing / godrays]
-
 		</p>
 
-		<code>
-		var material = new THREE.ShaderMaterial( {
-
-			uniforms: {
-
-				time: { value: 1.0 },
-				resolution: { value: new THREE.Vector2() }
-
-			},
-
-			vertexShader: document.getElementById( 'vertexShader' ).textContent,
-
-			fragmentShader: document.getElementById( 'fragmentShader' ).textContent
-
-		} );
-		</code>
-
 		<h2>Vertex shaders and fragment shaders</h2>
 
 		<div>
@@ -260,8 +262,8 @@ <h2>Custom attributes and uniforms</h2>
 			<p>
 			You're recommended to update custom [page:Uniform] values depending on [page:Object3D object] and [page:Camera camera]
 			in [page:Object3D.onBeforeRender] because [page:Material] can be shared among [page:Mesh meshes], [page:Matrix4 matrixWorld]
-			of [page:Scene] and [page:Camera] are updated in [page:WebGLRenderer.render], and some effects(ex:VREffect) render a [page:Scene scene]
-			with private their own [page:Camera cameras].
+			of [page:Scene] and [page:Camera] are updated in [page:WebGLRenderer.render], and some effects render a [page:Scene scene]
+			with their own private [page:Camera cameras].
 			</p>
 
 		</div>

docs/api/en/materials/ShadowMaterial.html

@@ -16,25 +16,27 @@ <h1>[name]</h1>
 		This material can receive shadows, but otherwise is completely transparent.
 		</p>
 
-		<h3>Example</h3>
-
-		<p>
-			[example:webgl_geometry_spline_editor geometry / spline / editor]
-		</p>
+		<h2>Code Example</h2>
 
 		<code>
-var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
-planeGeometry.rotateX( - Math.PI / 2 );
+		var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
+		planeGeometry.rotateX( - Math.PI / 2 );
 
-var planeMaterial = new THREE.ShadowMaterial();
-planeMaterial.opacity = 0.2;
+		var planeMaterial = new THREE.ShadowMaterial();
+		planeMaterial.opacity = 0.2;
 
-var plane = new THREE.Mesh( planeGeometry, planeMaterial );
-plane.position.y = -200;
-plane.receiveShadow = true;
-scene.add( plane );
+		var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+		plane.position.y = -200;
+		plane.receiveShadow = true;
+		scene.add( plane );
 		</code>
 
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl_geometry_spline_editor geometry / spline / editor]
+		</p>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Object parameters] )</h3>

docs/api/en/materials/SpriteMaterial.html

@@ -14,6 +14,19 @@ <h1>[name]</h1>
 
 		<p class="desc">A material for a use with a [page:Sprite].</p>
 
+		<h2>Code Example</h2>
+
+		<code>
+		var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );
+
+		var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
+
+		var sprite = new THREE.Sprite( spriteMaterial );
+		sprite.scale.set(200, 200, 1)
+
+		scene.add( sprite );
+		</code>
+
 		<h2>Examples</h2>
 		<p>
 			[example:webgl_sprites WebGL / sprites]<br />
@@ -22,18 +35,6 @@ <h2>Examples</h2>
 			[example:webgl_materials_cubemap_dynamic webgl / materials / cubemap / dynamic]
 		</p>
 
-		<code>
-var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );
-
-var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
-
-var sprite = new THREE.Sprite( spriteMaterial );
-sprite.scale.set(200, 200, 1)
-
-scene.add( sprite );
-
-		</code>
-
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:Object parameters] )</h3>

docs/api/en/math/Box3.html

@@ -14,8 +14,7 @@ <h1>[name]</h1>
 			Represents an axis-aligned bounding box (AABB) in 3D space.
 		</p>
 
-
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var box = new THREE.Box3();

docs/api/en/math/Color.html

@@ -14,9 +14,11 @@ <h1>[name]</h1>
 		Class representing a color.
 		</p>
 
+		<h2>Code Examples</h2>
 
-		<h2>Examples</h2>
-		A Color can be initialised in any of the following ways:
+		<p>
+			A Color can be initialised in any of the following ways:
+		</p>
 		<code>
 //empty constructor - will default white
 var color = new THREE.Color();
@@ -39,8 +41,6 @@ <h2>Examples</h2>
 var color = new THREE.Color( 1, 0, 0 );
 		</code>
 
-
-
 		<h2>Constructor</h2>
 
 

docs/api/en/math/Euler.html

@@ -17,7 +17,7 @@ <h1>[name]</h1>
 			axes in specified amounts per axis, and a specified axis order.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>var a = new THREE.Euler( 0, 1, 1.57, 'XYZ' );
 		var b = new THREE.Vector3( 1, 0, 1 );

docs/api/en/math/Matrix3.html

@@ -14,7 +14,7 @@ <h1>[name]</h1>
 			A class representing a 3x3 [link:https://en.wikipedia.org/wiki/Matrix_(mathematics) matrix].
 		</p>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 		<code>
 var m = new Matrix3();
 		</code>
@@ -106,15 +106,14 @@ <h3>[method:this fromArray]( [param:Array array], [param:Integer offset] )</h3>
 		[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
 		</p>
 
-		<h3>[method:this getInverse]( [param:Matrix3 m], [param:Boolean throwOnDegenerate] )</h3>
+		<h3>[method:this getInverse]( [param:Matrix3 m] )</h3>
 		<p>
-		[page:Matrix3 m] - the matrix to take the inverse of.<br />
-		[page:Boolean throwOnDegenerate] - (optional) If true, throw an error if the matrix is degenerate (not invertible).<br /><br />
+		[page:Matrix3 m] - the matrix to take the inverse of.<br /><br />
 
 		Set this matrix to the [link:https://en.wikipedia.org/wiki/Invertible_matrix inverse] of the passed matrix [page:Matrix3 m],
 		using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
 
-		If [page:Boolean throwOnDegenerate] is not set and the matrix is not invertible, set this to the 3x3 identity matrix.
+		You can not invert a matrix with a determinant of zero. If you attempt this, the method returns a zero matrix instead.
 		</p>
 
 		<h3>[method:this getNormalMatrix]( [param:Matrix4 m] )</h3>

docs/api/en/math/Matrix4.html

@@ -190,15 +190,14 @@ <h3>[method:this fromArray]( [param:Array array], [param:Integer offset] )</h3>
 		[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
 		</p>
 
-		<h3>[method:this getInverse]( [param:Matrix4 m], [param:Boolean throwOnDegenerate] )</h3>
+		<h3>[method:this getInverse]( [param:Matrix4 m] )</h3>
 		<p>
-		[page:Matrix4 m] - the matrix to take the inverse of.<br />
-		[page:Boolean throwOnDegenerate] - (optional) If true, throw an error if the matrix is degenerate (not invertible).<br /><br />
+		[page:Matrix4 m] - the matrix to take the inverse of.<br /><br />
 
 		Set this matrix to the [link:https://en.wikipedia.org/wiki/Invertible_matrix inverse] of the passed matrix [page:Matrix4 m],
 		using the method outlined [link:http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm here].
 
-		If [page:Boolean throwOnDegenerate] is not set and the matrix is not invertible, set this to the 4x4 identity matrix.
+		You can not invert a matrix with a determinant of zero. If you attempt this, the method returns a zero matrix instead.
 		</p>