Docs: Consolidate examples section.

docs/api/en/audio/Audio.html

@@ -18,13 +18,7 @@
 			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 @@
 		});
 		</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 @@
 
 		</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 @@
 		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 @@
 			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 @@
 		});
 		</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 @@
 			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 @@
 		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 @@
 			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 @@
 
 		<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 @@
 		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 @@
 			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 @@
 			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 @@
 		[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 @@
 		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 @@
 		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 @@
 		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 @@
 			[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 @@
 		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 @@
 		</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 @@
 		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 @@
 			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 @@
 		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 @@
 		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 @@
 			[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,7 +13,7 @@
 		<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>

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

@@ -16,7 +16,7 @@
 		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 @@
 		[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 @@
 		series of paths.
 		</p>
 
-		<h2>Example</h2>
+		<h2>Examples</h2>
 		<p>
 			[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2]
 		</p>

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

@@ -15,30 +15,32 @@
 		<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 @@
 			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 @@
 			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 @@
 			[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 @@
 			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 @@
 			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 @@
 		[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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		<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 @@ var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color:
 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 @@
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/ExtrudeGeometry.html

@@ -32,7 +32,7 @@
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/LatheBufferGeometry.html

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

docs/api/en/geometries/LatheGeometry.html

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

docs/api/en/geometries/ParametricBufferGeometry.html

@@ -32,7 +32,7 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 			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 @@
 			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 @@
 
 		</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 @@
 
 		</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 @@
 		</script>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/ShapeGeometry.html

@@ -33,7 +33,7 @@
 		</script>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 
 		<code>

docs/api/en/geometries/SphereBufferGeometry.html

@@ -32,7 +32,7 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 		} );
 		</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 @@
 
 		</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 @@
 		} );
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</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 @@
 
 		</script>
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		function CustomSinCurve( scale ) {

docs/api/en/geometries/TubeGeometry.html

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

docs/api/en/geometries/WireframeGeometry.html

@@ -14,41 +14,27 @@
 
 		<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 @@
 
 		<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 @@
 		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,9 +13,17 @@
 		<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/>
@@ -23,11 +31,6 @@
 			[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 @@
 		</p>
 
 
-		<h2>Example</h2>
+		<h2>Code Example</h2>
 
 		<code>
 		var box = new THREE.Box3();

docs/api/en/helpers/BoxHelper.html

@@ -19,13 +19,7 @@
 			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 @@
 		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 @@
 		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 @@
 			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 @@
 
 		<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 @@
 		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 @@
 			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 @@
 		</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 @@
 			 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 @@
 		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 @@
 
 		<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 @@
 		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,8 +17,14 @@
 		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 />
@@ -26,13 +32,6 @@
 			[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 @@
 
 		<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 @@
 		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 @@
 			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 @@
 			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 @@
 			[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 @@
 			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 @@
 			 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 @@
 			[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 @@
 			</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 @@ scene.add( rectLight )
 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 @@
 			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 @@
 		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 @@
 			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 @@
 		</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 @@
 			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 @@
 			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 @@
 			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 @@
 			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 @@
 		);
 		</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 @@
 			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 @@
 			[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 @@
 			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 @@ scene.background = new THREE.CubeTextureLoader()
 			] );
 		</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 @@
 			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 @@
 		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 @@
 		);
 		</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 @@
 			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 @@
 		);
 		</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 @@
 			[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 @@
 		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 @@
 			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 @@
 			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 @@
 		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 @@
 			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 @@
 		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 @@
 		);
 		</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 @@
 			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],

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

@@ -19,15 +19,7 @@
 
 		</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 @@
 		});
 		</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>

docs/api/en/materials/LineBasicMaterial.html

@@ -14,6 +14,17 @@
 
 		<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 @@
 			[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

@@ -14,22 +14,24 @@
 
 		<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>
 
 

docs/api/en/materials/MeshDistanceMaterial.html

@@ -19,7 +19,7 @@
 			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]