Docs: Import Sections for Addons (#25467)

* Add import section: Animations

Add import section.

* Add import section: Controls

Add import sections.

* Add import section: Exporters

Add import sections.

* Add import section: Geometries

Add import sections.
Remove inline scripts that do not refer to an element found on page.

* Add import section: Helpers

Add import sections.

* Add import section: Lights

Add import section

* Add import section: Loaders

Add import sections.

* Add import section: ConvexHull

Add import sections.

* Add import section: Math

Add import sections.

* Add import section: Objects

Add import section.

* Add import section: Postprocessing

Add import section.

* Add import section: Renderers

Add import sections.

* Add import section: Utils

Add import sections.

docs/examples/en/animations/CCDIKSolver.html

@@ -16,6 +16,17 @@
 
 		<iframe id="scene" src="scenes/ccdiksolver-browser.html"></iframe>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { CCDIKSolver } from 'three/addons/animation/CCDIKSolver.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/animations/MMDAnimationHelper.html

@@ -14,6 +14,17 @@
 		It uses [page:CCDIKSolver] and [page:MMDPhysics] inside.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/animations/MMDPhysics.html

@@ -13,6 +13,17 @@
 		[name] calculates Physics for model loaded by [page:MMDLoader] with [link:https://github.com/kripken/ammo.js/ ammo.js] (Bullet-based JavaScript Physics engine).
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { MMDPhysics } from 'three/addons/animation/MMDPhysics.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/controls/ArcballControls.html

@@ -31,9 +31,19 @@
 
 		To use this, as with all files in the /examples directory, you will have to
 		include the file separately in your HTML.
+		</p>
+
+		<h2>Import</h2>
 
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
 		</p>
 
+		<code>
+			import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/controls/DragControls.html

@@ -12,9 +12,20 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		This class can be used to provide a drag'n'drop interaction.
+			This class can be used to provide a drag'n'drop interaction.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { DragControls } from 'three/addons/controls/DragControls.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/controls/FirstPersonControls.html

@@ -14,6 +14,17 @@
 			This class is an alternative implementation of [page:FlyControls].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>[example:webgl_geometry_terrain webgl / geometry / terrain ]</p>

docs/examples/en/controls/FlyControls.html

@@ -15,6 +15,17 @@
 			3D space without any limitations (e.g. focus on a specific target).
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { FlyControls } from 'three/addons/controls/FlyControls.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>[example:misc_controls_fly misc / controls / fly ]</p>

docs/examples/en/controls/OrbitControls.html

@@ -10,13 +10,23 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		Orbit controls allow the camera to orbit around a target.<br>
+			Orbit controls allow the camera to orbit around a target.<br>
 
-		To use this, as with all files in the /examples directory, you will have to
-		include the file separately in your HTML.
+			To use this, as with all files in the /examples directory, you will have to
+			include the file separately in your HTML.
+		</p>
+
+		<h2>Import</h2>
 
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
 		</p>
 
+		<code>
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/controls/PointerLockControls.html

@@ -12,10 +12,21 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		The implementation of this class is based on the [link:https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API Pointer Lock API].
-		[name] is a perfect choice for first person 3D games.
+			The implementation of this class is based on the [link:https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API Pointer Lock API].
+			[name] is a perfect choice for first person 3D games.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/controls/TrackballControls.html

@@ -18,6 +18,17 @@
 			</p>
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>[example:misc_controls_trackball misc / controls / trackball ]</p>

docs/examples/en/controls/TransformControls.html

@@ -18,6 +18,17 @@
 			[name] expects that its attached 3D object is part of the scene graph.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { TransformControls } from 'three/addons/controls/TransformControls.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>[example:misc_controls_transform misc / controls / transform ]</p>

docs/examples/en/exporters/ColladaExporter.html

@@ -17,6 +17,17 @@
 		This exporter only supports exporting geometry, materials, textures, and scene hierarchy.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { ColladaExporter } from 'three/addons/exporters/ColladaExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/exporters/DRACOExporter.html

@@ -24,6 +24,17 @@
 			using [link:https://github.com/AnalyticalGraphicsInc/gltf-pipeline glTF-Pipeline].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/exporters/EXRExporter.html

@@ -21,6 +21,17 @@
 		and DI.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { EXRExporter } from 'three/addons/exporters/EXRExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/exporters/GLTFExporter.html

@@ -20,6 +20,17 @@
 		textures, skins, skeletons, morph targets, animations, lights, and/or cameras.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
+		</code>
+
 		<h2>Extensions</h2>
 
 		<p>

docs/examples/en/exporters/OBJExporter.html

@@ -10,12 +10,22 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		An exporter for the [link:https://en.wikipedia.org/wiki/Wavefront_.obj_file OBJ] file format.
+			An exporter for the [link:https://en.wikipedia.org/wiki/Wavefront_.obj_file OBJ] file format.
+			<br/><br/>
+			[name] is not able to export material data into MTL files so only geometry data are supported.
 		</p>
-		<p class="desc">
-		[name] is not able to export material data into MTL files so only geometry data are supported.
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
 		</p>
 
+		<code>
+			import { OBJExporter } from 'three/addons/exporters/OBJExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/exporters/PLYExporter.html

@@ -18,6 +18,17 @@
 		uv coordinates. No textures or texture references are saved.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/exporters/STLExporter.html

@@ -17,6 +17,17 @@
 			STL files contain no scale information or indexes, and the units are arbitrary.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { STLExporter } from 'three/addons/exporters/STLExporter.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/geometries/ConvexGeometry.html

@@ -11,8 +11,21 @@
 
 		<h1>[name]</h1>
 
-		<p class="desc">[name] can be used to generate a convex hull for a given array of 3D points.
-			The average time complexity for this task is considered to be O(nlog(n)).</p>
+		<p class="desc">
+			[name] can be used to generate a convex hull for a given array of 3D points.
+			The average time complexity for this task is considered to be O(nlog(n)).
+		</p>
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
+		</code>
 
 		<h2>Code Example</h2>
 

docs/examples/en/geometries/DecalGeometry.html

@@ -11,7 +11,21 @@
 
 		<h1>[name]</h1>
 
-		<p class="desc">[name] can be used to create a decal mesh that serves different kinds of purposes e.g. adding unique details to models, performing dynamic visual environmental changes or covering seams.</p>
+		<p class="desc">
+			[name] can be used to create a decal mesh that serves different kinds of purposes e.g. adding unique details
+			to models, performing dynamic visual environmental changes or covering seams.
+		</p>
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { DecalGeometry } from 'three/addons/geometries/DecalGeometry.js';
+		</code>
 
 		<h2>Code Example</h2>
 

docs/examples/en/geometries/ParametricGeometry.html

@@ -11,23 +11,20 @@
 
 		<h1>[name]</h1>
 
-		<p class="desc">Generate geometry representing a parametric surface.</p>
-
-		<script>
-
-		// iOS iframe auto-resize workaround
-
-		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
-
-			const scene = document.getElementById( 'scene' );
+		<p class="desc">
+			Generate geometry representing a parametric surface.
+		</p>
 
-			scene.style.width = getComputedStyle( scene ).width;
-			scene.style.height = getComputedStyle( scene ).height;
-			scene.setAttribute( 'scrolling', 'no' );
+		<h2>Import</h2>
 
-		}
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
 
-		</script>
+		<code>
+			import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
+		</code>
 
 		<h2>Code Example</h2>
 

docs/examples/en/geometries/TextGeometry.html

@@ -17,21 +17,16 @@
 			See the [page:FontLoader] page for additional details.
 		</p>
 
-		<script>
+		<h2>Import</h2>
 
-		// iOS iframe auto-resize workaround
-
-		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
-
-			const scene = document.getElementById( 'scene' );
-
-			scene.style.width = getComputedStyle( scene ).width;
-			scene.style.height = getComputedStyle( scene ).height;
-			scene.setAttribute( 'scrolling', 'no' );
-
-		}
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
 
-		</script>
+		<code>
+			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+		</code>
 
 		<h2>Code Example</h2>
 

docs/examples/en/helpers/LightProbeHelper.html

@@ -15,6 +15,17 @@
 			Renders a sphere to visualize a light probe in the scene.
 		<p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { LightProbeHelper } from 'three/addons/helpers/LightProbeHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/helpers/PositionalAudioHelper.html

@@ -13,6 +13,17 @@
 
 		<p class="desc">This helper displays the directional cone of a [page:PositionalAudio].</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PositionalAudioHelper } from 'three/addons/helpers/PositionalAudioHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 		<code>
 		const positionalAudio = new THREE.PositionalAudio( listener );

docs/examples/en/helpers/RectAreaLightHelper.html

@@ -15,6 +15,17 @@
 			Creates a visual aid for a [page:RectAreaLight].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/helpers/VertexNormalsHelper.html

@@ -17,6 +17,17 @@
 			have been calculated using [page:BufferGeometry.computeVertexNormals computeVertexNormals].<br /><br />
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/helpers/VertexTangentsHelper.html

@@ -17,6 +17,17 @@
 			have been calculated using [page:BufferGeometry.computeTangents computeTangents].<br /><br />
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { VertexTangentsHelper } from 'three/addons/helpers/VertexTangentsHelper.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/lights/LightProbeGenerator.html

@@ -14,6 +14,17 @@
 			Utility class for creating instances of [page:LightProbe].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>

docs/examples/en/loaders/3DMLoader.html

@@ -17,6 +17,17 @@
 			The loader currently uses [link:https://www.npmjs.com/package/rhino3dm/v/0.15.0-beta rhino3dm.js 0.15.0-beta.]
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { 3DMLoader } from 'three/addons/loaders/3DMLoader.js';
+		</code>
+
 		<h2>Supported Conversions</h2>
 
 		<p>

docs/examples/en/loaders/DRACOLoader.html

@@ -31,6 +31,17 @@
 			decoder instances.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/FontLoader.html

@@ -19,6 +19,17 @@
 		You can convert fonts online using [link:https://gero3.github.io/facetype.js/ facetype.js]
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/KTX2Loader.html

@@ -27,6 +27,17 @@
 			directory.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/LDrawLoader.html

@@ -29,6 +29,16 @@
 		See section 'Packing LDraw models'. The LDrawLoader example loads several packed files.
 		The official parts library is not included due to its large size.</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';
+		</code>
 
 		<h2>Extensions</h2>
 

docs/examples/en/loaders/MMDLoader.html

@@ -17,6 +17,17 @@
 
 		If you want raw content of MMD resources, use .loadPMD/PMX/VMD/VPD methods.
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/MTLLoader.html

@@ -16,6 +16,17 @@
 		(material) properties of objects within one or more .OBJ files.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
+		</code>
+
 		<h2>Constructor</h2>
 
 		<h3>[name]( [param:LoadingManager loadingManager] )</h3>

docs/examples/en/loaders/OBJLoader.html

@@ -18,6 +18,17 @@
 		vertices, and texture vertices.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/PCDLoader.html

@@ -22,6 +22,17 @@
 			</ul>
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/PDBLoader.html

@@ -15,6 +15,17 @@
 		The [link:http://en.wikipedia.org/wiki/Protein_Data_Bank_(file_format) Protein Data Bank] file format is a textual file describing the three-dimensional structures of molecules.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PDBLoader } from 'three/addons/loaders/PDBLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/PRWMLoader.html

@@ -19,6 +19,17 @@
 		on this [link:https://github.com/kchapelier/PRWM here].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { PRWMLoader } from 'three/addons/loaders/PRWMLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/SVGLoader.html

@@ -15,6 +15,17 @@
 		[link:https://en.wikipedia.org/wiki/Scalable_Vector_Graphics Scalable Vector Graphics] is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/loaders/TGALoader.html

@@ -15,6 +15,17 @@
 		[link:https://en.wikipedia.org/wiki/Truevision_TGA TGA] is a raster graphics, image file format.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { TGALoader } from 'three/addons/loaders/TGALoader.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/math/Lut.html

@@ -10,9 +10,20 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		Represents a lookup table for colormaps. It is used to determine the color values from a range of data values.
+			Represents a lookup table for colormaps. It is used to determine the color values from a range of data values.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { Lut } from 'three/addons/math/Lut.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/math/MeshSurfaceSampler.html

@@ -13,6 +13,17 @@
 
 		<p>Weighted sampling is useful for effects like heavier foliage growth in certain areas of terrain, or concentrated particle emissions from specific parts of a mesh. Vertex weights may be written programmatically, or painted by hand as vertex colors in 3D tools like Blender.</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { MeshSurfaceSampler } from 'three/addons/math/MeshSurfaceSampler.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/math/OBB.html

@@ -13,6 +13,17 @@
 			Represents an oriented bounding box (OBB) in 3D space.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { OBB } from 'three/addons/math/OBB.js';
+		</code>
+
 		<h2>Examples</h2>
 		<p>
 			[example:webgl_math_obb]

docs/examples/en/math/convexhull/ConvexHull.html

@@ -13,6 +13,17 @@
 			A convex hull class. Implements the Quickhull algorithm by: Dirk Gregorius. March 2014, Game Developers Conference: [link:http://media.steampowered.com/apps/valve/2014/DirkGregorius_ImplementingQuickHull.pdf Implementing QuickHull].
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { ConvexHull } from 'three/addons/math/ConvexHull.js';
+		</code>
+
 
 		<h2>Constructor</h2>
 

docs/examples/en/math/convexhull/Face.html

@@ -10,9 +10,21 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			Represents a section bounded by a specific amount of half-edges. The current implementation assumes that a face always consist of three edges.
+			Represents a section bounded by a specific amount of half-edges. The current implementation 
+			assumes that a face always consist of three edges.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { Face } from 'three/addons/math/ConvexHull.js';
+		</code>
+
 
 		<h2>Constructor</h2>
 

docs/examples/en/math/convexhull/HalfEdge.html

@@ -10,9 +10,20 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			The basis for a half-edge data structure, also known as doubly connected edge list (DCEL).<br />
+			The basis for a half-edge data structure, also known as doubly connected edge list (DCEL).
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { HalfEdge } from 'three/addons/math/ConvexHull.js';
+		</code>
+
 
 		<h2>Constructor</h2>
 

docs/examples/en/math/convexhull/VertexList.html

@@ -13,6 +13,17 @@
 			A doubly linked list of vertices.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { VertexList } from 'three/addons/math/ConvexHull.js';
+		</code>
+
 
 		<h2>Constructor</h2>
 

docs/examples/en/math/convexhull/VertexNode.html

@@ -13,6 +13,17 @@
 			A vertex as a double linked list node.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { VertexNode } from 'three/addons/math/ConvexHull.js';
+		</code>
+
 
 		<h2>Constructor</h2>
 

docs/examples/en/objects/Lensflare.html

@@ -15,6 +15,17 @@
 			Creates a simulated lens flare that tracks a light. [name] can only be used when setting the `alpha` context parameter of [page:WebGLRenderer] to `true`.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { Lensflare } from 'three/addons/objects/Lensflare.js';
+		</code>
+
 		<h2>Code Example</h2>
 
 		<code>

docs/examples/en/postprocessing/EffectComposer.html

@@ -16,6 +16,17 @@
 			The last pass is automatically rendered to screen.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>

docs/examples/en/renderers/CSS2DRenderer.html

@@ -14,6 +14,17 @@
 			`[name]` only supports 100% browser and display zoom.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>

docs/examples/en/renderers/CSS3DRenderer.html

@@ -23,6 +23,17 @@
 			So `[name]` is just focused on ordinary DOM elements. These elements are wrapped into special objects (`CSS3DObject` or `CSS3DSprite`) and then added to the scene graph.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { CSS3DRenderer } from 'three/addons/renderers/CSS3DRenderer.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>

docs/examples/en/renderers/SVGRenderer.html

@@ -33,6 +33,17 @@
 			</ul>
 		</div>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js';
+		</code>
+
 		<h2>Examples</h2>
 
 		<p>

docs/examples/en/utils/BufferGeometryUtils.html

@@ -10,9 +10,19 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		A class containing utility functions for [page:BufferGeometry BufferGeometry] instances.
+			A class containing utility functions for [page:BufferGeometry BufferGeometry] instances.
 		</p>
 
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
+
+		<code>
+			import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
+		</code>
 
 		<h2>Methods</h2>
 

docs/examples/en/utils/CameraUtils.html

@@ -9,8 +9,20 @@
 	<body>
 		<h1>[name]</h1>
 
-		<p class="desc">A class containing useful utility functions for camera manipulation.</p>
+		<p class="desc">
+			A class containing useful utility functions for camera manipulation.
+		</p>
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
 
+		<code>
+			import { CameraUtils } from 'three/addons/utils/CameraUtils.js';
+		</code>
 
 		<h2>Methods</h2>
 

docs/examples/en/utils/SceneUtils.html

@@ -9,8 +9,20 @@
 	<body>
 		<h1>[name]</h1>
 
-		<p class="desc">A class containing useful utility functions for scene manipulation.</p>
+		<p class="desc">
+			A class containing useful utility functions for scene manipulation.
+		</p>
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
 
+		<code>
+			import { SceneUtils } from 'three/addons/utils/SceneUtils.js';
+		</code>
 
 		<h2>Methods</h2>
 

docs/examples/en/utils/SkeletonUtils.html

@@ -9,8 +9,20 @@
 	<body>
 		<h1>[name]</h1>
 
-		<p class="desc">Utility functions for [page:Skeleton], [page:SkinnedMesh], and [page:Bone] manipulation.</p>
+		<p class="desc">
+			Utility functions for [page:Skeleton], [page:SkinnedMesh], and [page:Bone] manipulation.
+		</p>
+
+		<h2>Import</h2>
+
+		<p>
+			[name] is an add-on, and must be imported explicitly.
+			See [link:#manual/introduction/Installation Installation / Addons].
+		</p>
 
+		<code>
+			import { SkeletonUtils } from 'three/addons/utils/SkeletonUtils.js';
+		</code>
 
 		<h2>Methods</h2>