Examples: Use import maps polyfill. (#23163)

examples/jsm/capabilities/ImportMaps.js

@@ -1,32 +0,0 @@
-class ImportMaps {
-
-	static isAvailable() {
-
-		return ( 'supports' in HTMLScriptElement && HTMLScriptElement.supports( 'importmap' ) );
-
-	}
-
-	static getErrorMessage() {
-
-		const message = 'Your browser does not support <a href="https://wicg.github.io/import-maps/" style="color:blue">Import Maps</a>';
-
-		const element = document.createElement( 'div' );
-		element.style.fontFamily = 'monospace';
-		element.style.fontSize = '13px';
-		element.style.fontWeight = 'normal';
-		element.style.textAlign = 'center';
-		element.style.background = '#fff';
-		element.style.color = '#000';
-		element.style.padding = '1.5em';
-		element.style.width = '400px';
-		element.style.margin = '5em auto 0';
-
-		element.innerHTML = message;
-
-		return element;
-
-	}
-
-}
-
-export default ImportMaps;

examples/webgpu_compute.html

@@ -12,6 +12,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -20,18 +22,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_instance_uniform.html

@@ -13,6 +13,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Instance Uniform
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -21,18 +23,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_lights_custom.html

@@ -12,6 +12,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Custom Lighting Model
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -20,18 +22,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_lights_selective.html

@@ -15,6 +15,8 @@
 			<b style="color:red">Left: Red lights</b> - <b>Center: All lights</b> - <b style="color:blue">Right: blue light</b>
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -23,18 +25,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_materials.html

@@ -13,6 +13,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Materials
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -21,18 +23,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_nodes_playground.html

@@ -39,6 +39,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Node Editor ( Playground version )<br />
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -47,18 +49,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_rtt.html

@@ -12,6 +12,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - RTT
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -20,18 +22,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_sandbox.html

@@ -12,6 +12,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Sandbox
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -20,18 +22,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_skinning.html

@@ -14,6 +14,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Skinning
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -22,18 +24,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_skinning_points.html

@@ -14,6 +14,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Skinning Points
 		</div>
 
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
 		<script type="importmap">
 		{
 			"imports": {
@@ -22,18 +24,6 @@
 		}
 		</script>
 
-		<script type="module">
-
-			import ImportMaps from './jsm/capabilities/ImportMaps.js';
-
-			if ( ImportMaps.isAvailable() === false ) {
-
-				document.body.appendChild( ImportMaps.getErrorMessage() );
-
-			}
-
-		</script>
-
 		<script type="module">
 
 			import * as THREE from 'three';