"Officialize" renaming of examples classes to addons (#24579)

* "Officialize" renaming of examples classes to addons

* Fix

* Fix spaces

Co-authored-by: Marco Fugaro <[email protected]>

* Fix spaces again

* Update README.md

Co-authored-by: Marco Fugaro <[email protected]>

README.md

@@ -8,7 +8,7 @@
 
 #### JavaScript 3D library
 
-The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
+The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons.
 
 [Examples](https://threejs.org/examples/) —
 [Docs](https://threejs.org/docs/) —

docs/manual/en/introduction/Installation.html

@@ -64,7 +64,7 @@
 
 		<p>
 			The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use <em>type="module"</em> as shown below.
-			It is also required to define an Import Map which resolves the bare module specifier `three`.
+			It is also required to define an import map which resolves the bare module specifier `three`.
 		</p>
 
 		<code>
@@ -88,20 +88,19 @@
 		</code>
 
 		<p>
-			Since Import maps are not yet supported by all browsers, it is necessary to add the polyfill *es-module-shims.js*.
+			Since import maps are not yet supported by all browsers, it is necessary to add the polyfill *es-module-shims.js*.
 		</p>
 
-		<h2>Examples</h2>
+		<h2>Addons</h2>
 
 		<p>
-			The core of three.js is focused on the most important components of a 3D engine. Many other useful components — such as controls, loaders, and post-processing effects — are part of the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] directory. They are referred to as "examples," because while you can use them off the shelf, they're also meant to be remixed and customized. These components are always kept in sync with the core library, whereas similar third-party packages on npm are maintained by different people and may not be up to date.
+			The core of three.js is focused on the most important components of a 3D engine. Many other useful components — such as controls, loaders, and post-processing effects — are part of the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] directory. They are referred to as "addons" (previously called "examples"), because while you can use them off the shelf, they're also meant to be remixed and customized. These components are always kept in sync with the core library, whereas similar third-party packages on npm are maintained by different people and may not be up to date.
 		</p>
 
 		<p>
-			Examples do not need to be <em>installed</em> separately, but do need to be <em>imported</em> separately. If three.js was installed with npm, you can load the [page:OrbitControls] component with:
+			Addons do not need to be <em>installed</em> separately, but do need to be <em>imported</em> separately. If three.js was installed with npm, you can load the [page:OrbitControls] component with:
 		</p>
 
-
 		<code>
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -109,13 +108,25 @@
 		</code>
 
 		<p>
-			If three.js was installed from a CDN, use the same CDN to install other components:
+			If three.js was installed from a CDN, use the same code, but with `three/addons/` in the import map.
 		</p>
 
 		<code>
+		&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
+
+		&lt;script type="importmap">
+		  {
+		    "imports": {
+		      "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js",
+		      "three/addons/": "https://unpkg.com/three@&lt;version&gt;/examples/jsm/"
+		    }
+		  }
+		&lt;/script>
+
 		&lt;script type="module">
 
-		  import { OrbitControls } from 'https://unpkg.com/three@&lt;version&gt;/examples/jsm/controls/OrbitControls.js';
+		  import * as THREE from 'three';
+		  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		  const controls = new OrbitControls( camera, renderer.domElement );
 
@@ -123,7 +134,7 @@
 		</code>
 
 		<p>
-			It's important that all files use the same version. Do not import different examples from different versions, or use examples from a different version than the three.js library itself.
+			It's important that all files use the same version. Do not import different addons from different versions, or use addons from a different version than the three.js library itself.
 		</p>
 
 		<h2>Compatibility</h2>