Examples: add `three/addons/*` alias (#23406)

* Examples: use three/addons/* alias

* Npm: add three/addons/* alias

* Examples: remove unnecessary package.json

* Fix: remove build folder from PR

* Docs: use three/addons/ alias

* Editor: use three/addons/ alias

* Manual: use three/addons/ alias

* Manual: use three/addons/ alias in examples

* Add alias to new examples

* Add alias to new manual entries

docs/manual/ar/introduction/How-to-create-VR-content.html

@@ -22,7 +22,7 @@
 		</p>
 
 		<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 		</code>
 
 		<p>

docs/manual/ar/introduction/How-to-use-post-processing.html

@@ -24,9 +24,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -80,8 +80,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/ar/introduction/Installation.html

@@ -108,7 +108,7 @@
 		</p>
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/ar/introduction/Loading-3D-models.html

@@ -69,7 +69,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>

docs/manual/en/introduction/How-to-create-VR-content.html

@@ -24,7 +24,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>

docs/manual/en/introduction/How-to-use-post-processing.html

@@ -28,9 +28,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -92,8 +92,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/en/introduction/Installation.html

@@ -103,7 +103,7 @@
 
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/en/introduction/Loading-3D-models.html

@@ -84,7 +84,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>

docs/manual/fr/introduction/How-to-create-VR-content.html

@@ -24,12 +24,12 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>
 		*VRButton.createButton()* fait deux choses importantes: Cela crée un bouton qui indique
-		la compatibilité VR. De plus, cela initie une session VR si l'utilisateur active le bouton. La seule chose que vous avez 
+		la compatibilité VR. De plus, cela initie une session VR si l'utilisateur active le bouton. La seule chose que vous avez
 		à faire est d'ajouter la ligne de code suivante à votre application.
 	</p>
 

docs/manual/fr/introduction/How-to-use-post-processing.html

@@ -28,9 +28,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -92,8 +92,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/fr/introduction/Installation.html

@@ -103,7 +103,7 @@
 
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/fr/introduction/Loading-3D-models.html

@@ -84,7 +84,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>
@@ -114,7 +114,7 @@
 	<h2>Dépannage</h2>
 
 	<p>
-		Vous avez passé des heures à modeler votre chef-d'oeuvre artisanal, vous le chargez sur 
+		Vous avez passé des heures à modeler votre chef-d'oeuvre artisanal, vous le chargez sur
 		la page web, et — oh non! 😭 Il est tordu, mal coloré, ou tout simplement porté-disparu.
 		Commencez par ces étapes de dépannage:
 	</p>
@@ -135,8 +135,8 @@
 			le signalement d'un bug auprès de l'application avec laquelle vous avez réalisé le modèle 3D.
 		</li>
 		<li>
-			Essayez de divisier ou de multiplier la taille du modèle par un facteur de 1000. Plusieurs modèles sont mis à 
-			l'échelles différemment, et les gros modèles peuvent ne pas apparaître si la caméra est 
+			Essayez de divisier ou de multiplier la taille du modèle par un facteur de 1000. Plusieurs modèles sont mis à
+			l'échelles différemment, et les gros modèles peuvent ne pas apparaître si la caméra est
 			à l'intérieur du modèle.
 		</li>
 		<li>
@@ -145,7 +145,7 @@
 		<li>
 			Cherchez des requêtes concernant des textures erronnées dans votre onglet réseau, comme
 			`"C:\\Path\To\Model\texture.jpg"`. Utilisez des chemins relatifs menant à votre
-			modèle à la place, comme `images/texture.jpg` — cela peut nécessiter 
+			modèle à la place, comme `images/texture.jpg` — cela peut nécessiter
 			la modification du fichier du modèle dans un éditeur de texte.
 		</li>
 	</ol>
@@ -153,12 +153,12 @@
 	<h2>Demander de l'aide</h2>
 
 	<p>
-		Si vous avez effectué le processus de dépannage ci-dessus et que votre modèle 
-		ne fonctionne toujours pas, utiliser la bonne approche pour demander de l'aide vous mènera 
+		Si vous avez effectué le processus de dépannage ci-dessus et que votre modèle
+		ne fonctionne toujours pas, utiliser la bonne approche pour demander de l'aide vous mènera
 		plus rapidement à la solution. Postez une question sur le
 		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> et, incluez dès que possible,
-		votre modèle (ou un modèle plus simple avec le même problème) dans n'importe quel format 
-		qui vous est disponible. Incluez sufisamment d'informations pour que quelqu'un puisse reproduire 
+		votre modèle (ou un modèle plus simple avec le même problème) dans n'importe quel format
+		qui vous est disponible. Incluez sufisamment d'informations pour que quelqu'un puisse reproduire
 		ce problème rapidement — idéalement, une démo live.
 	</p>
 

docs/manual/it/introduction/How-to-create-VR-content.html

@@ -22,7 +22,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>

docs/manual/it/introduction/How-to-use-post-processing.html

@@ -13,7 +13,7 @@
       Molte applicazioni 3D visualizzano i loro oggetti 3D direttamente sullo schermo. A volte, tuttavia, si vuole applicare uno o più effetti grafici
       come Depth-Of-Field, Bloom, Film Grain o vari tipi di Anti-aliasing. Il Post-processing è una soluzione ampiamente utilizzata per implementare questi effetti.
       Prima di tutto, la scena viene renderizzata su un target di rendering che rappresenta un buffer nella memoria della scheda video.
-      Nella fase successiva, uno o più passaggi di post-processing applicano filtri ed effetti al buffer dell'immagine prima che questa venga infine renderizzata 
+      Nella fase successiva, uno o più passaggi di post-processing applicano filtri ed effetti al buffer dell'immagine prima che questa venga infine renderizzata
       sullo schermo.
 		</p>
 		<p>
@@ -23,15 +23,15 @@
 		<h2>Workflow</h2>
 
 		<p>
-      Il primo step, nel processo, è quello di importare tutti i file necessari dalla cartella degli esempi. La guida presuppone che si utilizzi 
-      il [link:https://www.npmjs.com/package/three pacchetto npm] ufficiale di three.js. Per la nostra demo di base in questa guida abbiamo 
+      Il primo step, nel processo, è quello di importare tutti i file necessari dalla cartella degli esempi. La guida presuppone che si utilizzi
+      il [link:https://www.npmjs.com/package/three pacchetto npm] ufficiale di three.js. Per la nostra demo di base in questa guida abbiamo
       bisogno dei seguenti file:
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -73,7 +73,7 @@
 		</code>
 
 		<p>
-      `RenderPass` viene normalmente posizionata all'inizio della catena per fornire la scena renderizzata come input per il passaggio successivo di post-processing. 
+      `RenderPass` viene normalmente posizionata all'inizio della catena per fornire la scena renderizzata come input per il passaggio successivo di post-processing.
       Nel nostro caso `GlitchPass` utilizzarà questi dati di immagine per applicare un effetto glitch selvaggio. Guarda questo [link:https://threejs.org/examples/webgl_postprocessing_glitch esempio live]
       per vederli in azione.
 		</p>
@@ -81,7 +81,7 @@
 		<h2>Passi Built-in</h2>
 
 		<p>
-      È possibile utilizzare un'ampia gamma di passaggi di post-processing predefiniti forniti dall'engine. Si possono trovare nella 
+      È possibile utilizzare un'ampia gamma di passaggi di post-processing predefiniti forniti dall'engine. Si possono trovare nella
       cartella di [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
 		</p>
 
@@ -89,13 +89,13 @@
 
 		<p>
       A volte si desidera scrivere uno shader di post-processing personalizzato e includerlo nella catena dei passi di post-processing.
-      Per questo scenario puoi utilizzare `ShaderPass`. Dopo aver importato il file e lo shader personalizzato, si può usare il seguente codice per 
+      Per questo scenario puoi utilizzare `ShaderPass`. Dopo aver importato il file e lo shader personalizzato, si può usare il seguente codice per
       impostare i passaggi:
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/it/introduction/Installation.html

@@ -14,7 +14,7 @@
 		</p>
 
     <p>
-			Qualsiasi soluzione venga scelta, sii coerente e importa tutti i file della stessa versione della libreria. 
+			Qualsiasi soluzione venga scelta, sii coerente e importa tutti i file della stessa versione della libreria.
       Mescolare file provenienti da fonti diverse può causare l'inclusione di codice duplicato o addirittura rompere l'applicazione in modo imprevisto.
 		</p>
 
@@ -95,7 +95,7 @@
 		<h2>Esempi</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. 
+			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>
@@ -103,7 +103,7 @@
 		</p>
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>
@@ -137,7 +137,7 @@
 		<h3>Node.js</h3>
 
 		<p>
-			Poiché three.js è stato creato per il web, dipende dal browser e dalle API del DOM che non sempre esistono in Node.js. Alcuni di questi problemi possono essere risolti usando dei "tappa buchi" come [link:https://github.com/stackgl/headless-gl headless-gl], o sostituendo i componenti come [page:TextureLoader] con alternative personalizzate. Altre API del DOM potrebbero essere profondamente intrecciate con il codice che le utilizza e potrebbe essere più difficile aggirarle. Accettiamo benvolentieri le pull request semplici e gestibili per migliorare il supporto di Node.js, ma raccomandiamo di aprire prima una issue per discutere dei tuoi miglioramenti.  
+			Poiché three.js è stato creato per il web, dipende dal browser e dalle API del DOM che non sempre esistono in Node.js. Alcuni di questi problemi possono essere risolti usando dei "tappa buchi" come [link:https://github.com/stackgl/headless-gl headless-gl], o sostituendo i componenti come [page:TextureLoader] con alternative personalizzate. Altre API del DOM potrebbero essere profondamente intrecciate con il codice che le utilizza e potrebbe essere più difficile aggirarle. Accettiamo benvolentieri le pull request semplici e gestibili per migliorare il supporto di Node.js, ma raccomandiamo di aprire prima una issue per discutere dei tuoi miglioramenti.
 		</p>
 
 		<p>

docs/manual/it/introduction/Loading-3D-models.html

@@ -14,7 +14,7 @@
   <p>
 		I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni
     e complessità varie. Sebbene <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-    three.js metta a disposizione molti loader</a>, la scelta del formato e del flusso di lavoro giusti farà risparmiare tempo e frustrazione in seguito. 
+    three.js metta a disposizione molti loader</a>, la scelta del formato e del flusso di lavoro giusti farà risparmiare tempo e frustrazione in seguito.
     Con alcuni formati è difficile lavorare, possono essere inefficienti per le esperienze in tempo reale, o semplicemente non supportati al momento.
 	</p>
 
@@ -26,7 +26,7 @@
 	<h2>Prima di iniziare</h2>
 
 	<p>
-		Se siete alle prime armi con la gestione di un server locale, 
+		Se siete alle prime armi con la gestione di un server locale,
     iniziate prima di tutto a capire [link:#manual/introduction/How-to-run-things-locally come gestire le cose a livello locale].
     Molti errori comuni nella visualizzazione dei modelli 3D possono essere evitati gestendo correttamente l'hosting dei file.
 	</p>
@@ -59,8 +59,8 @@
 	</ul>
 
 	<p>
-    Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF, 
-    considera di richiedere l'esportazione glTF agli autori, 
+    Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF,
+    considera di richiedere l'esportazione glTF agli autori,
     o di fare un post <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">sul thread della roadmap di glTF</a>.
 	</p>
 
@@ -76,12 +76,12 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>
-    Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi 
-    varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la 
+    Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi
+    varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la
     documentazione del loader. Per il formato glTF, l'utilizzo con gli script globali sarebbe:
 	</p>
 
@@ -120,10 +120,10 @@
 		<li>
       Visualizza il modello in un'altra applicazione. Per il formato glTF, sono disponibili visualizzatori drag-and-drop per
 			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. 
+			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
       Se il modello viene visualizzato correttamente in una o più applicazioni,
       <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">segnala il bug a three.js</a>.
-      Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug 
+      Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug
       all'applicazione utilizzata per creare il modello.
 		</li>
 		<li>
@@ -134,8 +134,8 @@
       Prova ad aggiungere e posizionare una luce nella scena. Il modello potrebbe essere nascosto nell'oscurità.
 		</li>
 		<li>
-      Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser, 
-      come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` - 
+      Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser,
+      come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` -
       ciò potrebbe richiedere una modifica del file del modello in un editor di testo.
 		</li>
 	</ol>
@@ -144,8 +144,8 @@
 
 	<p>
 		Se hai eseguito la procedura di risoluzione dei problemi qui sopra e il tuo modello ancora non funziona,
-    il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul 
-    <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> e, quando possibile, 
+    il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul
+    <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> e, quando possibile,
     includi il tuo modello (o un modello più semplice con lo stesso problema) in qualsiasi formato disponibile.
     Includi informazioni sufficienti per consentire a qualcun altro di riprodurre rapidamente il problema - idealmente, una demo dal vivo.
 	</p>

docs/manual/ja/introduction/How-to-create-VR-content.html

@@ -22,7 +22,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>

docs/manual/ja/introduction/How-to-use-post-processing.html

@@ -30,9 +30,9 @@
 	</p>
 
 	<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 	<p>
@@ -96,8 +96,8 @@
 	</p>
 
 	<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/ja/introduction/Installation.html

@@ -92,7 +92,7 @@
 
 
     <code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/ja/introduction/Loading-3D-models.html

@@ -84,7 +84,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>

docs/manual/ko/introduction/How-to-create-VR-content.html

@@ -23,7 +23,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>

docs/manual/ko/introduction/How-to-use-post-processing.html

@@ -28,9 +28,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -92,8 +92,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/ko/introduction/Installation.html

@@ -104,7 +104,7 @@
 
 
     <code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/ko/introduction/Loading-3D-models.html

@@ -76,7 +76,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>

docs/manual/pt-br/introduction/How-to-create-VR-content.html

@@ -24,7 +24,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>

docs/manual/pt-br/introduction/How-to-use-post-processing.html

@@ -12,8 +12,8 @@
 		<p>
 			Muitas aplicações three.js renderizam seus objetos 3D diretamente na tela. Às vezes, no entanto, você deseja aplicar um ou mais efeitos gráficos
 			como Depth-Of-Field, Bloom, Film Grain ou vários tipos de Anti-aliasing.
- 
-			O pós-processamento é uma abordagem amplamente utilizada para implementar tais efeitos. Primeiro, a cena é renderizada para um render target que representa 
+
+			O pós-processamento é uma abordagem amplamente utilizada para implementar tais efeitos. Primeiro, a cena é renderizada para um render target que representa
 			um buffer na memória da placa de vídeo. Na próxima etapa, um ou mais passos de pós-processamento aplicam filtros e efeitos ao buffer de imagem antes que ele seja renderizado para a tela.
 		</p>
 		<p>
@@ -28,9 +28,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -92,8 +92,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

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

@@ -87,11 +87,11 @@
 		</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 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:
 		</p>
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/pt-br/introduction/Loading-3D-models.html

@@ -15,7 +15,7 @@
 		Os modelos 3D estão disponíveis em centenas de formatos de arquivo, cada um com diferentes
 		propósitos, recursos variados e complexidade variável. Embora o
 		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-		three.js forneça muitos loaders</a>, escolher o formato e o fluxo de trabalho certos economizará tempo e frustração mais tarde. 
+		three.js forneça muitos loaders</a>, escolher o formato e o fluxo de trabalho certos economizará tempo e frustração mais tarde.
 		Alguns formatos são difíceis de trabalhar, ineficientes para experiências em tempo real
 		ou simplesmente não são totalmente suportados por enquanto.
 	</p>
@@ -37,9 +37,9 @@
 	<h2>Fluxo de trabalho recomendado</h2>
 
 	<p>
-		Sempre que possível, recomendamos o uso do glTF (GL Transmission Format). Ambas versões do formato, 
-		<small>.GLB</small> e <small>.GLTF</small>, são bem suportadas. 
-		Como o glTF está focado na entrega de recursos em tempo de execução, 
+		Sempre que possível, recomendamos o uso do glTF (GL Transmission Format). Ambas versões do formato,
+		<small>.GLB</small> e <small>.GLTF</small>, são bem suportadas.
+		Como o glTF está focado na entrega de recursos em tempo de execução,
 		ele é compacto para transmitir e rápido para carregar. Seus recursos incluem meshs, materiais,
 		texturas, skins, skeletons, morph targets, animações, luzes e câmeras.
 	</p>
@@ -76,12 +76,12 @@
 	<h2>Carregando</h2>
 
 	<p>
-		Apenas alguns poucos loaders (por exemplo [page:ObjectLoader]) são incluídos por padrão com o 
+		Apenas alguns poucos loaders (por exemplo [page:ObjectLoader]) são incluídos por padrão com o
 		three.js — outros devem ser adicionados ao seu aplicativo individualmente.
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>
@@ -125,7 +125,7 @@
 			Visualize o modelo em outro aplicativo. Para glTF, visualizadores drag-and-drop
 			estão disponíveis para
 			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. 
+			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
 			Se o modelo aparece corretamente em um ou mais aplicativos,
 			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">registre um bug do three.js</a>.
 			Se o modelo não puder ser mostrado em nenhum aplicativo, recomendamos
@@ -136,13 +136,13 @@
 			dimensionados de forma diferente, e modelos grandes podem não aparecer se a câmera estiver
 			dentro do modelo.
 		</li>
-		<li>	
+		<li>
 			Tente adicionar e posicionar uma fonte de luz. O modelo pode estar escondido no escuro.
 		</li>
 		<li>
 			Procure requisições de textura com falha na aba network, como
 			`"C:\\Path\To\Model\texture.jpg"`. Use caminhos relativos ao seu
-			modelo em vez disso, tal como `images/texture.jpg` — 
+			modelo em vez disso, tal como `images/texture.jpg` —
 			isso pode exigir edição do arquivo de modelo em um editor de texto.
 		</li>
 	</ol>
@@ -153,7 +153,7 @@
 		Se você passou pelo processo de solução de problemas acima e seu modelo
 		ainda não está funcionando, uma abordagem correta para pedir ajuda fará com que você
 		tenha uma solução mais rápida. Poste uma pergunta no
-		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">fórum three.js</a> 
+		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">fórum three.js</a>
 		e, sempre que possível,
 		inclua seu modelo (ou um modelo mais simples com o mesmo problema) em qualquer formato que
 		você tiver disponível. Inclua informações suficientes para outra pessoa reproduzir

docs/manual/zh/introduction/How-to-create-VR-content.html

@@ -23,7 +23,7 @@
 	</p>
 
 	<code>
-import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
 	</code>
 
 	<p>*VRButton.createButton()*做了两件重要的事情：首先，它创建了一个按钮，指示了VR的兼容性；

docs/manual/zh/introduction/How-to-use-post-processing.html

@@ -28,9 +28,9 @@
 		</p>
 
 		<code>
-		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
 		</code>
 
 		<p>
@@ -92,8 +92,8 @@
 		</p>
 
 		<code>
-		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 
 		// later in your init routine
 

docs/manual/zh/introduction/Installation.html

@@ -90,7 +90,7 @@
 
 
 		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		const controls = new OrbitControls( camera, renderer.domElement );
 		</code>

docs/manual/zh/introduction/Loading-3D-models.html

@@ -73,7 +73,7 @@
 	</p>
 
 	<code>
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	</code>
 
 	<p>

docs/scenes/bones-browser.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../../build/three.module.js"
+					"three": "../../build/three.module.js",
+					"three/addons/": "../../examples/jsm/"
 				}
 			}
 		</script>
@@ -56,8 +57,8 @@
 				WebGLRenderer
 			} from 'three';
 
-			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
-			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
 

docs/scenes/ccdiksolver-browser.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../../build/three.module.js"
+					"three": "../../build/three.module.js",
+					"three/addons/": "../../examples/jsm/"
 				}
 			}
 		</script>
@@ -58,10 +59,10 @@
 				Uint16BufferAttribute,
 				WebGLRenderer
 			} from 'three';
-			import { CCDIKSolver, CCDIKHelper } from '../../examples/jsm/animation/CCDIKSolver.js';
+			import { CCDIKSolver, CCDIKHelper } from 'three/addons/animation/CCDIKSolver.js';
 
-			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
-			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let gui, scene, camera, renderer, orbit, mesh, bones, skeletonHelper, ikSolver;
 
@@ -223,9 +224,9 @@
 						folder.add( bone.position, 'x', - delta + bone.position.x, delta + bone.position.x );
 						folder.add( bone.position, 'y', - bone.position.y, bone.position.y );
 						folder.add( bone.position, 'z', - delta + bone.position.z, delta + bone.position.z );
-			
+
 		} );
-			
+
 				gui.add( ikSolver, 'update' ).name( 'ikSolver.update()' );
 				gui.add( state, 'ikSolverAutoUpdate' );
 

docs/scenes/geometry-browser.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../../build/three.module.js"
+					"three": "../../build/three.module.js",
+					"three/addons/": "../../examples/jsm/"
 				}
 			}
 		</script>
@@ -77,8 +78,8 @@
 				WebGLRenderer
 			} from 'three';
 
-			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
-			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			const twoPi = Math.PI * 2;
 

docs/scenes/material-browser.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../../build/three.module.js"
+					"three": "../../build/three.module.js",
+					"three/addons/": "../../examples/jsm/"
 				}
 			}
 		</script>
@@ -40,8 +41,8 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
-			import { RoomEnvironment } from '../../examples/jsm/environments/RoomEnvironment.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
 			const constants = {
 

editor/index.html

@@ -52,7 +52,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "../examples/jsm/"
 				}
 			}
 		</script>
@@ -69,7 +70,7 @@
 			import { Sidebar } from './js/Sidebar.js';
 			import { Menubar } from './js/Menubar.js';
 			import { Resizer } from './js/Resizer.js';
-			import { VRButton } from '../examples/jsm/webxr/VRButton.js';
+			import { VRButton } from 'three/addons/webxr/VRButton.js';
 
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;

editor/js/Loader.js

@@ -1,13 +1,13 @@
 import * as THREE from 'three';
 
-import { TGALoader } from '../../examples/jsm/loaders/TGALoader.js';
+import { TGALoader } from 'three/addons/loaders/TGALoader.js';
 
 import { AddObjectCommand } from './commands/AddObjectCommand.js';
 import { SetSceneCommand } from './commands/SetSceneCommand.js';
 
 import { LoaderUtils } from './LoaderUtils.js';
 
-import { unzipSync, strFromU8 } from '../../examples/jsm/libs/fflate.module.js';
+import { unzipSync, strFromU8 } from 'three/addons/libs/fflate.module.js';
 
 function Loader( editor ) {
 
@@ -87,7 +87,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { Rhino3dmLoader } = await import( '../../examples/jsm/loaders/3DMLoader.js' );
+					const { Rhino3dmLoader } = await import( 'three/addons/loaders/3DMLoader.js' );
 
 					const loader = new Rhino3dmLoader();
 					loader.setLibraryPath( '../examples/jsm/libs/rhino3dm/' );
@@ -110,7 +110,7 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { TDSLoader } = await import( '../../examples/jsm/loaders/TDSLoader.js' );
+					const { TDSLoader } = await import( 'three/addons/loaders/TDSLoader.js' );
 
 					const loader = new TDSLoader();
 					const object = loader.parse( event.target.result );
@@ -130,7 +130,7 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { ThreeMFLoader } = await import( '../../examples/jsm/loaders/3MFLoader.js' );
+					const { ThreeMFLoader } = await import( 'three/addons/loaders/3MFLoader.js' );
 
 					const loader = new ThreeMFLoader();
 					const object = loader.parse( event.target.result );
@@ -150,7 +150,7 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { AMFLoader } = await import( '../../examples/jsm/loaders/AMFLoader.js' );
+					const { AMFLoader } = await import( 'three/addons/loaders/AMFLoader.js' );
 
 					const loader = new AMFLoader();
 					const amfobject = loader.parse( event.target.result );
@@ -172,7 +172,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { ColladaLoader } = await import( '../../examples/jsm/loaders/ColladaLoader.js' );
+					const { ColladaLoader } = await import( 'three/addons/loaders/ColladaLoader.js' );
 
 					const loader = new ColladaLoader( manager );
 					const collada = loader.parse( contents );
@@ -196,7 +196,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
 
 					const loader = new DRACOLoader();
 					loader.setDecoderPath( '../examples/js/libs/draco/' );
@@ -241,7 +241,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { FBXLoader } = await import( '../../examples/jsm/loaders/FBXLoader.js' );
+					const { FBXLoader } = await import( 'three/addons/loaders/FBXLoader.js' );
 
 					const loader = new FBXLoader( manager );
 					const object = loader.parse( contents );
@@ -263,8 +263,8 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
-					const { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
@@ -304,8 +304,8 @@ function Loader( editor ) {
 
 					} else {
 
-						const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
-						const { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+						const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+						const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
 
 						const dracoLoader = new DRACOLoader();
 						dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
@@ -393,10 +393,10 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { IFCLoader } = await import( '../../examples/jsm/loaders/IFCLoader.js' );
+					const { IFCLoader } = await import( 'three/addons/loaders/IFCLoader.js' );
 
-					const loader = new IFCLoader();
-					loader.ifcManager.setWasmPath( '../../examples/jsm/loaders/ifc/' );
+					var loader = new IFCLoader();
+					loader.ifcManager.setWasmPath( 'three/addons/loaders/ifc/' );
 
 					const model = await loader.parse( event.target.result );
 					model.mesh.name = filename;
@@ -416,7 +416,7 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { KMZLoader } = await import( '../../examples/jsm/loaders/KMZLoader.js' );
+					const { KMZLoader } = await import( 'three/addons/loaders/KMZLoader.js' );
 
 					const loader = new KMZLoader();
 					const collada = loader.parse( event.target.result );
@@ -439,7 +439,7 @@ function Loader( editor ) {
 
 				reader.addEventListener( 'load', async function ( event ) {
 
-					const { LDrawLoader } = await import( '../../examples/jsm/loaders/LDrawLoader.js' );
+					const { LDrawLoader } = await import( 'three/addons/loaders/LDrawLoader.js' );
 
 					const loader = new LDrawLoader();
 					loader.setPath( '../../examples/models/ldraw/officialLibrary/' );
@@ -468,7 +468,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { MD2Loader } = await import( '../../examples/jsm/loaders/MD2Loader.js' );
+					const { MD2Loader } = await import( 'three/addons/loaders/MD2Loader.js' );
 
 					const geometry = new MD2Loader().parse( contents );
 					const material = new THREE.MeshStandardMaterial();
@@ -495,7 +495,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { OBJLoader } = await import( '../../examples/jsm/loaders/OBJLoader.js' );
+					const { OBJLoader } = await import( 'three/addons/loaders/OBJLoader.js' );
 
 					const object = new OBJLoader().parse( contents );
 					object.name = filename;
@@ -539,7 +539,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { PLYLoader } = await import( '../../examples/jsm/loaders/PLYLoader.js' );
+					const { PLYLoader } = await import( 'three/addons/loaders/PLYLoader.js' );
 
 					const geometry = new PLYLoader().parse( contents );
 					let object;
@@ -578,7 +578,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { STLLoader } = await import( '../../examples/jsm/loaders/STLLoader.js' );
+					const { STLLoader } = await import( 'three/addons/loaders/STLLoader.js' );
 
 					const geometry = new STLLoader().parse( contents );
 					const material = new THREE.MeshStandardMaterial();
@@ -612,7 +612,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { SVGLoader } = await import( '../../examples/jsm/loaders/SVGLoader.js' );
+					const { SVGLoader } = await import( 'three/addons/loaders/SVGLoader.js' );
 
 					const loader = new SVGLoader();
 					const paths = loader.parse( contents ).paths;
@@ -664,7 +664,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { VOXLoader, VOXMesh } = await import( '../../examples/jsm/loaders/VOXLoader.js' );
+					const { VOXLoader, VOXMesh } = await import( 'three/addons/loaders/VOXLoader.js' );
 
 					const chunks = new VOXLoader().parse( contents );
 
@@ -698,7 +698,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { VTKLoader } = await import( '../../examples/jsm/loaders/VTKLoader.js' );
+					const { VTKLoader } = await import( 'three/addons/loaders/VTKLoader.js' );
 
 					const geometry = new VTKLoader().parse( contents );
 					const material = new THREE.MeshStandardMaterial();
@@ -723,7 +723,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { VRMLLoader } = await import( '../../examples/jsm/loaders/VRMLLoader.js' );
+					const { VRMLLoader } = await import( 'three/addons/loaders/VRMLLoader.js' );
 
 					const result = new VRMLLoader().parse( contents );
 
@@ -744,7 +744,7 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const { XYZLoader } = await import( '../../examples/jsm/loaders/XYZLoader.js' );
+					const { XYZLoader } = await import( 'three/addons/loaders/XYZLoader.js' );
 
 					const geometry = new XYZLoader().parse( contents );
 
@@ -874,8 +874,8 @@ function Loader( editor ) {
 
 		if ( zip[ 'model.obj' ] && zip[ 'materials.mtl' ] ) {
 
-			const { MTLLoader } = await import( '../../examples/jsm/loaders/MTLLoader.js' );
-			const { OBJLoader } = await import( '../../examples/jsm/loaders/OBJLoader.js' );
+			const { MTLLoader } = await import( 'three/addons/loaders/MTLLoader.js' );
+			const { OBJLoader } = await import( 'three/addons/loaders/OBJLoader.js' );
 
 			const materials = new MTLLoader().parse( strFromU8( zip[ 'materials.mtl' ] ) );
 			const object = new OBJLoader().setMaterials( materials ).parse( strFromU8( zip[ 'model.obj' ] ) );
@@ -915,7 +915,7 @@ function Loader( editor ) {
 
 				{
 
-					const { FBXLoader } = await import( '../../examples/jsm/loaders/FBXLoader.js' );
+					const { FBXLoader } = await import( 'three/addons/loaders/FBXLoader.js' );
 
 					const loader = new FBXLoader( manager );
 					const object = loader.parse( file.buffer );
@@ -930,8 +930,8 @@ function Loader( editor ) {
 
 				{
 
-					const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
-					const { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
@@ -956,8 +956,8 @@ function Loader( editor ) {
 
 				{
 
-					const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
-					const { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );

editor/js/Menubar.File.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { zipSync, strToU8 } from '../../examples/jsm/libs/fflate.module.js';
+import { zipSync, strToU8 } from 'three/addons/libs/fflate.module.js';
 
 import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
 
@@ -185,7 +185,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/dae' ) );
 	option.onClick( async function () {
 
-		const { ColladaExporter } = await import( '../../examples/jsm/exporters/ColladaExporter.js' );
+		const { ColladaExporter } = await import( 'three/addons/exporters/ColladaExporter.js' );
 
 		const exporter = new ColladaExporter();
 
@@ -214,7 +214,7 @@ function MenubarFile( editor ) {
 
 		}
 
-		const { DRACOExporter } = await import( '../../examples/jsm/exporters/DRACOExporter.js' );
+		const { DRACOExporter } = await import( 'three/addons/exporters/DRACOExporter.js' );
 
 		const exporter = new DRACOExporter();
 
@@ -245,7 +245,7 @@ function MenubarFile( editor ) {
 		const scene = editor.scene;
 		const animations = getAnimations( scene );
 
-		const { GLTFExporter } = await import( '../../examples/jsm/exporters/GLTFExporter.js' );
+		const { GLTFExporter } = await import( 'three/addons/exporters/GLTFExporter.js' );
 
 		const exporter = new GLTFExporter();
 
@@ -268,7 +268,7 @@ function MenubarFile( editor ) {
 		const scene = editor.scene;
 		const animations = getAnimations( scene );
 
-		const { GLTFExporter } = await import( '../../examples/jsm/exporters/GLTFExporter.js' );
+		const { GLTFExporter } = await import( 'three/addons/exporters/GLTFExporter.js' );
 
 		const exporter = new GLTFExporter();
 
@@ -298,7 +298,7 @@ function MenubarFile( editor ) {
 
 		}
 
-		const { OBJExporter } = await import( '../../examples/jsm/exporters/OBJExporter.js' );
+		const { OBJExporter } = await import( 'three/addons/exporters/OBJExporter.js' );
 
 		const exporter = new OBJExporter();
 
@@ -314,7 +314,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/ply' ) );
 	option.onClick( async function () {
 
-		const { PLYExporter } = await import( '../../examples/jsm/exporters/PLYExporter.js' );
+		const { PLYExporter } = await import( 'three/addons/exporters/PLYExporter.js' );
 
 		const exporter = new PLYExporter();
 
@@ -334,7 +334,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/ply_binary' ) );
 	option.onClick( async function () {
 
-		const { PLYExporter } = await import( '../../examples/jsm/exporters/PLYExporter.js' );
+		const { PLYExporter } = await import( 'three/addons/exporters/PLYExporter.js' );
 
 		const exporter = new PLYExporter();
 
@@ -354,7 +354,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/stl' ) );
 	option.onClick( async function () {
 
-		const { STLExporter } = await import( '../../examples/jsm/exporters/STLExporter.js' );
+		const { STLExporter } = await import( 'three/addons/exporters/STLExporter.js' );
 
 		const exporter = new STLExporter();
 
@@ -370,7 +370,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/stl_binary' ) );
 	option.onClick( async function () {
 
-		const { STLExporter } = await import( '../../examples/jsm/exporters/STLExporter.js' );
+		const { STLExporter } = await import( 'three/addons/exporters/STLExporter.js' );
 
 		const exporter = new STLExporter();
 
@@ -386,7 +386,7 @@ function MenubarFile( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/file/export/usdz' ) );
 	option.onClick( async function () {
 
-		const { USDZExporter } = await import( '../../examples/jsm/exporters/USDZExporter.js' );
+		const { USDZExporter } = await import( 'three/addons/exporters/USDZExporter.js' );
 
 		const exporter = new USDZExporter();
 

editor/js/Sidebar.Geometry.TeapotGeometry.js

@@ -1,6 +1,6 @@
 import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
 
-import { TeapotGeometry } from '../../examples/jsm/geometries/TeapotGeometry.js';
+import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
 function GeometryParametersPanel( signals, object ) {
 

editor/js/Sidebar.Geometry.js

@@ -7,7 +7,7 @@ import { SetGeometryValueCommand } from './commands/SetGeometryValueCommand.js';
 import { SidebarGeometryBufferGeometry } from './Sidebar.Geometry.BufferGeometry.js';
 import { SidebarGeometryModifiers } from './Sidebar.Geometry.Modifiers.js';
 
-import { VertexNormalsHelper } from '../../examples/jsm/helpers/VertexNormalsHelper.js';
+import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';
 
 function SidebarGeometry( editor ) {
 

editor/js/Viewport.VR.js

@@ -1,9 +1,9 @@
 import * as THREE from 'three';
 
-import { HTMLMesh } from '../../examples/jsm/interactive/HTMLMesh.js';
-import { InteractiveGroup } from '../../examples/jsm/interactive/InteractiveGroup.js';
+import { HTMLMesh } from 'three/addons/interactive/HTMLMesh.js';
+import { InteractiveGroup } from 'three/addons/interactive/InteractiveGroup.js';
 
-import { XRControllerModelFactory } from '../../examples/jsm/webxr/XRControllerModelFactory.js';
+import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
 class VR {
 

editor/js/Viewport.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { TransformControls } from '../../examples/jsm/controls/TransformControls.js';
+import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
 import { UIPanel } from './libs/ui.js';
 
@@ -15,7 +15,7 @@ import { SetPositionCommand } from './commands/SetPositionCommand.js';
 import { SetRotationCommand } from './commands/SetRotationCommand.js';
 import { SetScaleCommand } from './commands/SetScaleCommand.js';
 
-import { RoomEnvironment } from '../../examples/jsm/environments/RoomEnvironment.js';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
 function Viewport( editor ) {
 

editor/js/libs/ui.three.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 
-import { RGBELoader } from '../../../examples/jsm/loaders/RGBELoader.js';
-import { TGALoader } from '../../../examples/jsm/loaders/TGALoader.js';
+import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+import { TGALoader } from 'three/addons/loaders/TGALoader.js';
 
 import { UIElement, UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
 import { MoveObjectCommand } from '../commands/MoveObjectCommand.js';

examples/css2d_label.html

@@ -24,7 +24,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -33,10 +34,10 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let gui;
 

examples/css3d_molecules.html

@@ -29,7 +29,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -38,10 +39,10 @@
 
 			import * as THREE from 'three';
 
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
-			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
-			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+			import { PDBLoader } from 'three/addons/loaders/PDBLoader.js';
+			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer;
 			let controls;

examples/css3d_orthographic.html

@@ -27,7 +27,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -36,8 +37,8 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
 
 			let camera, scene, renderer;
 

examples/css3d_periodictable.html

@@ -98,7 +98,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -107,9 +108,9 @@
 
 			import * as THREE from 'three';
 
-			import { TWEEN } from './jsm/libs/tween.module.min.js';
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
+			import { TWEEN } from 'three/addons/libs/tween.module.min.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
 
 			const table = [
 				'H', 'Hydrogen', '1.00794', 1, 1,

examples/css3d_sandbox.html

@@ -23,7 +23,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -32,8 +33,8 @@
 
 			import * as THREE from 'three';
 
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
 
 			let camera, scene, renderer;
 

examples/css3d_sprites.html

@@ -27,7 +27,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -36,9 +37,9 @@
 
 			import * as THREE from 'three';
 
-			import { TWEEN } from './jsm/libs/tween.module.min.js';
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
-			import { CSS3DRenderer, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
+			import { TWEEN } from 'three/addons/libs/tween.module.min.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+			import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
 
 			let camera, scene, renderer;
 			let controls;

examples/css3d_youtube.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -39,8 +40,8 @@
 
 			import * as THREE from 'three';
 
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
+			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
 
 			let camera, scene, renderer;
 			let controls;

examples/games_fps.html

@@ -21,7 +21,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -30,16 +31,16 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { Octree } from './jsm/math/Octree.js';
-			import { OctreeHelper } from './jsm/helpers/OctreeHelper.js';
+			import { Octree } from 'three/addons/math/Octree.js';
+			import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
 
-			import { Capsule } from './jsm/math/Capsule.js';
+			import { Capsule } from 'three/addons/math/Capsule.js';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			const clock = new THREE.Clock();
 

examples/jsm/package.json

@@ -1,3 +0,0 @@
-{
-    "type": "module"
-}

examples/misc_animation_groups.html

@@ -19,7 +19,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,7 +29,7 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
 			let stats, clock;
 			let scene, camera, renderer, mixer;

examples/misc_animation_keys.html

@@ -19,7 +19,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,7 +29,7 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
 			let stats, clock;
 			let scene, camera, renderer, mixer;

examples/misc_boxselection.html

@@ -36,7 +36,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -45,10 +46,10 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { SelectionBox } from './jsm/interactive/SelectionBox.js';
-			import { SelectionHelper } from './jsm/interactive/SelectionHelper.js';
+			import { SelectionBox } from 'three/addons/interactive/SelectionBox.js';
+			import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js';
 
 			let container, stats;
 			let camera, scene, renderer;

examples/misc_controls_arcball.html

@@ -21,7 +21,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,12 +30,12 @@
 		<script type="module">
 			import * as THREE from 'three';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { ArcballControls } from './jsm/controls/ArcballControls.js';
+			import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
 
-			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
-			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
 			const cameras = [ 'Orthographic', 'Perspective' ];
 			const cameraType = { type: 'Perspective' };

examples/misc_controls_drag.html

@@ -30,7 +30,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -39,7 +40,7 @@
 
 			import * as THREE from 'three';
 
-			import { DragControls } from './jsm/controls/DragControls.js';
+			import { DragControls } from 'three/addons/controls/DragControls.js';
 
 			let container;
 			let camera, scene, renderer;

examples/misc_controls_fly.html

@@ -34,7 +34,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -43,12 +44,12 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { FlyControls } from './jsm/controls/FlyControls.js';
-			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
-			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
-			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
+			import { FlyControls } from 'three/addons/controls/FlyControls.js';
+			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
 
 			const radius = 6371;
 			const tilt = 0.41;

examples/misc_controls_map.html

@@ -29,7 +29,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -38,9 +39,9 @@
 
 			import * as THREE from 'three';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { MapControls } from './jsm/controls/OrbitControls.js';
+			import { MapControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, controls, scene, renderer;
 

examples/misc_controls_orbit.html

@@ -29,7 +29,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -38,7 +39,7 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, controls, scene, renderer;
 

examples/misc_controls_pointerlock.html

@@ -49,7 +49,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -58,7 +59,7 @@
 
 			import * as THREE from 'three';
 
-			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
+			import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
 			let camera, scene, renderer, controls;
 

examples/misc_controls_trackball.html

@@ -29,7 +29,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -38,10 +39,10 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
 
 			let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;
 

examples/misc_controls_transform.html

@@ -23,7 +23,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -32,8 +33,8 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { TransformControls } from './jsm/controls/TransformControls.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
 			let cameraPersp, cameraOrtho, currentCamera;
 			let scene, renderer, control, orbit;

examples/misc_exporter_collada.html

@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,11 +28,11 @@
 
 			import * as THREE from 'three';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { ColladaExporter } from './jsm/exporters/ColladaExporter.js';
-			import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ColladaExporter } from 'three/addons/exporters/ColladaExporter.js';
+			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
 			////////////////////////////////////////////////////////////////////////////////
 			// Utah/Newell Teapot demo

examples/misc_exporter_draco.html

@@ -20,7 +20,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,9 +30,9 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { DRACOExporter } from './jsm/exporters/DRACOExporter.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let scene, camera, renderer, exporter, mesh;
 

examples/misc_exporter_gltf.html

@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +28,9 @@
 
 			import * as THREE from 'three';
 
-			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
-			import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+			import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			function exportGLTF( input ) {
 

examples/misc_exporter_obj.html

@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +28,9 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { OBJExporter } from './jsm/exporters/OBJExporter.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { OBJExporter } from 'three/addons/exporters/OBJExporter.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer;
 

examples/misc_exporter_ply.html

@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +28,9 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { PLYExporter } from './jsm/exporters/PLYExporter.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let scene, camera, renderer, exporter, mesh;
 

examples/misc_exporter_stl.html

@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +28,9 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { STLExporter } from './jsm/exporters/STLExporter.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { STLExporter } from 'three/addons/exporters/STLExporter.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let scene, camera, renderer, exporter, mesh;
 

examples/misc_exporter_usdz.html

@@ -42,7 +42,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -51,11 +52,11 @@
 
 			import * as THREE from 'three';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
-			import { USDZExporter } from './jsm/exporters/USDZExporter.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { USDZExporter } from 'three/addons/exporters/USDZExporter.js';
 
 			let camera, scene, renderer;
 

examples/misc_lookat.html

@@ -26,7 +26,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -35,7 +36,7 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
 			let camera, scene, renderer, stats;
 

examples/misc_uv_tests.html

@@ -31,7 +31,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -40,7 +41,7 @@
 
 			import * as THREE from 'three';
 
-			import { UVsDebug } from './jsm/utils/UVsDebug.js';
+			import { UVsDebug } from 'three/addons/utils/UVsDebug.js';
 
 			/*
 			 * This is to help debug UVs problems in geometry,

examples/physics_ammo_break.html

@@ -24,7 +24,8 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js"
+				"three": "../build/three.module.js",
+				"three/addons/": "./jsm/"
 			}
 		}
 	</script>
@@ -32,11 +33,11 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		import Stats from './jsm/libs/stats.module.js';
+		import Stats from 'three/addons/libs/stats.module.js';
 
-		import { OrbitControls } from './jsm/controls/OrbitControls.js';
-		import { ConvexObjectBreaker } from './jsm/misc/ConvexObjectBreaker.js';
-		import { ConvexGeometry } from './jsm/geometries/ConvexGeometry.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		import { ConvexObjectBreaker } from 'three/addons/misc/ConvexObjectBreaker.js';
+		import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
 
 		// - Global variables -
 

examples/physics_ammo_cloth.html

@@ -23,7 +23,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -32,9 +33,9 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			// Graphics variables
 			let container, stats;

examples/physics_ammo_instancing.html

@@ -21,7 +21,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,9 +30,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { AmmoPhysics } from './jsm/physics/AmmoPhysics.js';
-			import Stats from './jsm/libs/stats.module.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { AmmoPhysics } from 'three/addons/physics/AmmoPhysics.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
 			let camera, scene, renderer, stats;
 			let physics, position;

examples/physics_ammo_rope.html

@@ -23,7 +23,8 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js"
+				"three": "../build/three.module.js",
+				"three/addons/": "./jsm/"
 			}
 		}
 	</script>
@@ -31,9 +32,9 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		import Stats from './jsm/libs/stats.module.js';
+		import Stats from 'three/addons/libs/stats.module.js';
 
-		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		// Graphics variables
 		let container, stats;

examples/physics_ammo_terrain.html

@@ -24,7 +24,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -33,9 +34,9 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			// Heightfield parameters
 			const terrainWidthExtents = 100;

examples/physics_ammo_volume.html

@@ -26,7 +26,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -35,10 +36,10 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 
 			// Graphics variables
 			let container, stats;

examples/physics_oimo_instancing.html

@@ -20,7 +20,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,9 +29,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { OimoPhysics } from './jsm/physics/OimoPhysics.js';
-			import Stats from './jsm/libs/stats.module.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { OimoPhysics } from 'three/addons/physics/OimoPhysics.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
 			let camera, scene, renderer, stats;
 			let physics, position;

examples/svg_lines.html

@@ -24,7 +24,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -33,7 +34,7 @@
 
 			import * as THREE from 'three';
 
-			import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';
+			import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js';
 
 			let camera, scene, renderer;
 

examples/svg_sandbox.html

@@ -20,7 +20,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,9 +30,9 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';
+			import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js';
 
 			let camera, scene, renderer, stats;
 

examples/webaudio_orientation.html

@@ -29,7 +29,8 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js"
+				"three": "../build/three.module.js",
+				"three/addons/": "./jsm/"
 			}
 		}
 	</script>
@@ -37,9 +38,9 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		import { OrbitControls } from './jsm/controls/OrbitControls.js';
-		import { PositionalAudioHelper } from './jsm/helpers/PositionalAudioHelper.js';
-		import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		import { PositionalAudioHelper } from 'three/addons/helpers/PositionalAudioHelper.js';
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 		let scene, camera, renderer;
 

examples/webaudio_sandbox.html

@@ -37,7 +37,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -46,9 +47,9 @@
 
 			import * as THREE from 'three';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
+			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 
 			let camera, controls, scene, renderer, light;
 

examples/webaudio_timing.html

@@ -24,7 +24,8 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js"
+				"three": "../build/three.module.js",
+				"three/addons/": "./jsm/"
 			}
 		}
 	</script>
@@ -32,7 +33,7 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		let scene, camera, renderer, clock;
 

examples/webaudio_visualizer.html

@@ -58,7 +58,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>

examples/webgl2_buffergeometry_attributes_integer.html

@@ -51,7 +51,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -60,7 +61,7 @@
 
 			import * as THREE from 'three';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_materials_texture2darray.html

@@ -58,7 +58,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -67,10 +68,10 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
-			import { unzipSync } from './jsm/libs/fflate.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { unzipSync } from 'three/addons/libs/fflate.module.js';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_materials_texture3d.html

@@ -20,7 +20,8 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js"
+				"three": "../build/three.module.js",
+				"three/addons/": "./jsm/"
 			}
 		}
 	</script>
@@ -28,11 +29,11 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		import { GUI } from './jsm/libs/lil-gui.module.min.js';
-		import { OrbitControls } from './jsm/controls/OrbitControls.js';
-		import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
-		import { VolumeRenderShader1 } from './jsm/shaders/VolumeShader.js';
-		import WebGL from './jsm/capabilities/WebGL.js';
+		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		import { NRRDLoader } from 'three/addons/loaders/NRRDLoader.js';
+		import { VolumeRenderShader1 } from 'three/addons/shaders/VolumeShader.js';
+		import WebGL from 'three/addons/capabilities/WebGL.js';
 
 		if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_materials_texture3d_partialupdate.html

@@ -19,18 +19,19 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_multiple_rendertargets.html

@@ -109,7 +109,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -118,9 +119,9 @@
 
 			import * as THREE from 'three';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, controls;
 			let renderTarget;

examples/webgl2_multisampled_renderbuffers.html

@@ -40,7 +40,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -49,11 +50,11 @@
 
 			import * as THREE from 'three';
 
-			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
-			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
-			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
-			import { CopyShader } from './jsm/shaders/CopyShader.js';
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			let camera, renderer, clock, group, container;
 

examples/webgl2_rendertarget_texture2darray.html

@@ -102,7 +102,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -111,11 +112,11 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
-			import { unzipSync } from './jsm/libs/fflate.module.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { unzipSync } from 'three/addons/libs/fflate.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_ubo.html

@@ -135,7 +135,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -146,7 +147,7 @@
 
 			import * as THREE from 'three';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			let camera, scene, renderer, clock;
 

examples/webgl2_volume_cloud.html

@@ -19,18 +19,19 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_volume_instancing.html

@@ -19,17 +19,18 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { VOXLoader, VOXData3DTexture } from './jsm/loaders/VOXLoader.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { VOXLoader, VOXData3DTexture } from 'three/addons/loaders/VOXLoader.js';
 
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl2_volume_perlin.html

@@ -19,18 +19,19 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
 			import * as THREE from 'three';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
-			import WebGL from './jsm/capabilities/WebGL.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			if ( WebGL.isWebGL2Available() === false ) {
 

examples/webgl_animation_keyframes.html

@@ -34,7 +34,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -43,13 +44,13 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
+			import Stats from 'three/addons/libs/stats.module.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
-			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
 			let mixer;
 

examples/webgl_animation_multiple.html

@@ -19,7 +19,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,8 +29,8 @@
 
 			import * as THREE from 'three';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
-			import * as SkeletonUtils from './jsm/utils/SkeletonUtils.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 			let camera, scene, renderer;
 			let clock;

examples/webgl_animation_skinning_additive_blending.html

@@ -28,7 +28,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js"
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -37,10 +38,10 @@
 
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let scene, renderer, camera, stats;
 			let model, skeleton, mixer, clock;