Docs: Improve Installation page. (#24887)

docs/manual/ar/introduction/Installation.html

@@ -85,13 +85,21 @@
 		</p>
 
 		<code>
-		&lt;script type="module">
+		&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"
+			}
+			}
+		&lt;/script>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three.
+		&lt;script type="module">
 
-		  import * as THREE from 'https://cdn.skypack.dev/three@&lt;version&gt;';
+			import * as THREE from 'three';
 
-		  const scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 
 		&lt;/script>
 		</code>
@@ -118,13 +126,23 @@
 		</p>
 
 		<code>
-		&lt;script type="module">
+		&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>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three.
+		&lt;script type="module">
 
-		  import { OrbitControls } from 'https://cdn.skypack.dev/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 );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
 		&lt;/script>
 		</code>

docs/manual/fr/introduction/Installation.html

@@ -91,14 +91,14 @@
 			Étant donné que les Import maps ne sont pas encore supportées par tous les navigateurs, il est nécessaire d'ajouter le polyfill *es-module-shims.js*.
 		</p>
 
-		<h2>Exemples</h2>
+		<h2>Addons</h2>
 
 		<p>
 			Le noyau de three.js est concentré sur les composants les plus importans d'un moteur 3D. Plusieurs autres composants utiles - comme les contrôles, les loaders, et les effets de post-processing - font partie du dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Ils sont désignés comme "exemples", parce que, en plus de pouvoir les utiliser directement tel qu'ils sont, ils sont aussi supposés être remixés et customisés. Ces composants sont toujours synchronisés avec le noyau de la librarie, là où des packages tiers similaires sur npm sont maintenus par différentes personnes et peuvent ne pas être à jour.
 		</p>
 
 		<p>
-			Les examples n'ont pas besoin d'être <em>installés</em> séparément, mais doivent être <em>importés</em> séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec:
+			Les addons n'ont pas besoin d'être <em>installés</em> séparément, mais doivent être <em>importés</em> séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec:
 		</p>
 
 
@@ -113,17 +113,29 @@
 		</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 );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
 		&lt;/script>
 		</code>
 
 		<p>
-			Il est important que tous les fichiers utilisent la même version. N'importez pas différents exemples de différentes versions, ou n'utilisez pas d'examples d'une version de three.js différente de celle de la librarie elle-même.
+			Il est important que tous les fichiers utilisent la même version. N'importez pas différents addons de différentes versions, ou n'utilisez pas d'addons d'une version de three.js différente de celle de la librarie elle-même.
 		</p>
 
 		<h2>Compatibilité</h2>

docs/manual/it/introduction/Installation.html

@@ -92,14 +92,14 @@
       Poiché le mappe di importazione non sono ancora supportate da tutti i browser, è necessario aggiungere il polyfill *es-module-shims.js*.
 		</p>
 
-		<h2>Esempi</h2>
+		<h2>Addons</h2>
 
 		<p>
 			Il core di three.js è incentrato sui componenti più importanti di un engine 3D. Molti altri componenti utili - come i controls, i loaders e gli effetti post-processing - sono parte della sottocartella [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Vengono definiti "esempi" perché, pur potendo essere utilizzati in modo immediato, sono anche destinati a essere remixati e personalizzati. Questi componenti vengono sempre mantenuti sincronizzati con la libreria principale, mentre i pacchetti di terze parti su npm sono gestiti da persone differenti e potrebbero non essere aggiornati.
 		</p>
 
-    <p>
-			Non è necessario <em>installare</em> gli esempi separatamente, ma dovranno essere <em>importati</em> separatamente. Se three.js è stato installato con npm, è possibile caricare il componente [page:OrbitControls] con:
+		<p>
+			Non è necessario <em>installare</em> gli addons separatamente, ma dovranno essere <em>importati</em> separatamente. Se three.js è stato installato con npm, è possibile caricare il componente [page:OrbitControls] con:
 		</p>
 
 		<code>
@@ -113,17 +113,29 @@
 		</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 );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
 		&lt;/script>
 		</code>
 
 		<p>
-			È importante che tutti i file usino la stessa versione. Non devono essere importati esempi diversi con versioni diverse, o usare esempi che derivano da una versione differente di three.js.
+			È importante che tutti i file usino la stessa versione. Non devono essere importati addons diversi con versioni diverse, o usare addons che derivano da una versione differente di three.js.
 		</p>
 
 		<h2>Compatibilità</h2>

docs/manual/ja/introduction/Installation.html

@@ -69,25 +69,33 @@
     </p>
 
     <code>
-		&lt;script type="module">
+&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three.
+&lt;script type="importmap">
+    {
+    "imports": {
+        "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js"
+    }
+    }
+&lt;/script>
 
-		  import * as THREE from 'https://cdn.skypack.dev/three@&lt;version&gt;';
+&lt;script type="module">
 
-		  const scene = new THREE.Scene();
+    import * as THREE from 'three';
 
-		&lt;/script>
-		</code>
+    const scene = new THREE.Scene();
+
+&lt;/script>
+</code>
 
-    <h2>Examples</h2>
+    <h2>Addons</h2>
 
     <p>
         three.jsのコアは、3Dエンジンの最も重要なコンポーネントに焦点を当てています。コントロール、ローダー、エフェクトの前処理といった、他の多くの便利なコンポーネントは [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] ディレクトリの一部です。これらは「examples」と呼ばれています。その理由としては、ユーザーが既製品を使用でき、リミックスやカスタマイズも可能だからです。これらのコンポーネントは常にコアライブラリと同期していますが、npm上の同様のサードパーティ製パッケージは別の人によってメンテナンスされており、最新ではないかもしれません。
     </p>
 
     <p>
-        Examplesはそれだけ別でインストールする必要はありませんが、importは分けて行う必要があります。 three.jsをnpmでインストールしている場合、以下のようにして[page:OrbitControls]コンポーネントを読み込むことができます。
+        Addonsはそれだけ別でインストールする必要はありませんが、importは分けて行う必要があります。 three.jsをnpmでインストールしている場合、以下のようにして[page:OrbitControls]コンポーネントを読み込むことができます。
     </p>
 
 
@@ -102,19 +110,29 @@
     </p>
 
     <code>
-		&lt;script type="module">
+&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three. The URL will
-		  // redirect to the newest stable release.
-		  import { OrbitControls } from 'https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js';
+&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>
 
-		  const controls = new OrbitControls( camera, renderer.domElement );
+&lt;script type="module">
 
-		&lt;/script>
-		</code>
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+    const controls = new OrbitControls( camera, renderer.domElement );
+
+&lt;/script>
+</code>
 
     <p>
-        重要なのは、すべてのファイルで同じバージョンを使用することです。異なるバージョンの異なるExamplesをインポートしたり、three.jsライブラリ自体とは異なるバージョンのExamplesを使用したりしないでください。
+        重要なのは、すべてのファイルで同じバージョンを使用することです。異なるバージョンの異なるAddonsをインポートしたり、three.jsライブラリ自体とは異なるバージョンのAddonsを使用したりしないでください。
     </p>
 
     <h2>互換性について</h2>

docs/manual/ko/introduction/Installation.html

@@ -77,18 +77,26 @@
     </p>
 
     <code>
-		&lt;script type="module">
+&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three.
+&lt;script type="importmap">
+    {
+    "imports": {
+        "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js"
+    }
+    }
+&lt;/script>
 
-		  import * as THREE from 'https://cdn.skypack.dev/three@&lt;version&gt;';
+&lt;script type="module">
 
-		  const scene = new THREE.Scene();
+    import * as THREE from 'three';
 
-		&lt;/script>
-		</code>
+    const scene = new THREE.Scene();
+
+&lt;/script>
+</code>
 
-    <h2>예제</h2>
+    <h2>Addons</h2>
 
     <p>
         three.js는 3D 엔진의 주요 컴포넌트들에 초점을 두고 있습니다. 다른 여러 유용한 컴포넌트들 —
@@ -114,16 +122,26 @@
     </p>
 
     <code>
-		&lt;script type="module">
+&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
 
-		  // Find the latest version by visiting https://cdn.skypack.dev/three.
+&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>
 
-		  import { OrbitControls } from 'https://cdn.skypack.dev/three@&lt;version&gt;/examples/jsm/controls/OrbitControls.js';
+&lt;script type="module">
 
-		  const controls = new OrbitControls( camera, renderer.domElement );
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-		&lt;/script>
-		</code>
+    const controls = new OrbitControls( camera, renderer.domElement );
+
+&lt;/script>
+</code>
 
     <p>
         모든 파일들의 버전을 동일하게 맞추는것이 무엇보다 중요합니다. 서로 다른 버전에서 import를 하거나, three.js 라이브러리 자체가 아닌 다른 버전의 예제를 사용하지 마세요.

docs/manual/pt-br/introduction/Installation.html

@@ -80,14 +80,14 @@
 			Como os mapas de importação ainda não são suportados por todos os navegadores, é necessário adicionar o polyfill *es-module-shims.js*.
 		</p>
 
-		<h2>Exemplos</h2>
+		<h2>Addons</h2>
 
 		<p>
 			O núcleo do three.js está focado nos componentes mais importantes de uma engine 3D. Muitos outros componentes úteis - como controls, loaders e post-processing effects - fazem parte da pasta [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Eles são chamados de "exemplos" porque embora você possa usá-los diretamente, eles também podem ser remixados e personalizados. Esses componentes são sempre mantidos em sincronia com a biblioteca principal, enquanto pacotes semelhantes de terceiros no npm são mantidos por pessoas diferentes e podem estar desatualizados.
 		</p>
 
 		<p>
-			Os exemplos não precisam ser <em>instalados</em> separadamente, mas precisam ser <em>importados</em> separadamente. Se o three.js foi instalado com npm, você pode carregar o componente [page:OrbitControls] com:
+			Os addons não precisam ser <em>instalados</em> separadamente, mas precisam ser <em>importados</em> separadamente. Se o three.js foi instalado com npm, você pode carregar o componente [page:OrbitControls] com:
 		</p>
 
 		<code>
@@ -99,17 +99,29 @@
 		<p>Se o three.js foi instalado de um CDN, use o mesmo CDN para instalar outros componentes:</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 );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
 		&lt;/script>
 		</code>
 
 		<p>
-			É importante que todos os arquivos utilizem a mesma versão. Não importe diferentes exemplos de diferentes versões, ou use exemplos de uma versão diferente que a própria biblioteca three.js.
+			É importante que todos os arquivos utilizem a mesma versão. Não importe diferentes addons de diferentes versões, ou use addons de uma versão diferente que a própria biblioteca three.js.
 		</p>
 
 		<h2>Compatibilidade</h2>

docs/manual/zh/introduction/Installation.html

@@ -67,18 +67,26 @@
 		</p>
 
 		<code>
-		&lt;script type="module">
+		&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"
+			}
+			}
+		&lt;/script>
 
-		  // 通过访问 https://cdn.skypack.dev/three 来查找最新版本。
+		&lt;script type="module">
 
-		  import * as THREE from 'https://cdn.skypack.dev/three@&lt;version&gt;';
+			import * as THREE from 'three';
 
-		  const scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 
 		&lt;/script>
 		</code>
 
-		<h2>示例</h2>
+		<h2>Addons</h2>
 
 		<p>
 			three.js的核心专注于3D引擎最重要的组件。其它很多有用的组件 —— 如控制器（control）、加载器（loader）以及后期处理效果（post-processing effect） —— 是 [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 目录的一部分。它们被称为“示例”，虽然你可以直接将它们拿来使用，但它们也需要重新混合以及定制。这些组件和 three.js 的核心保持同步，而 npm 上类似的第三方包则由不同的作者进行维护，可能不是最新的。
@@ -100,13 +108,23 @@
 		</p>
 
 		<code>
-		&lt;script type="module">
+		&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>
 
-		  // 通过访问 https://cdn.skypack.dev/three 来查找最新版本。
+		&lt;script type="module">
 
-		  import { OrbitControls } from 'https://cdn.skypack.dev/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 );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
 		&lt;/script>
 		</code>