Use ESM and latest three.js 0.169.0 (#4888)

* Use ESM and latest three.js 0.169.0 * don't use window.map * wording
maplibre · Oct 24, 2024 · 491ac04 · 491ac04
1 parent 7e759ad
commit 491ac04
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 39 deletions.
diff --git a/test/examples/add-3d-model-threejs-with-shadow.html b/test/examples/add-3d-model-threejs-with-shadow.html
@@ -2,8 +2,9 @@
 <html lang="en">
 
 <head>
-    <title>Add a 3D model with shadow with three.js</title>
-    <meta property="og:description" content="Use a custom style layer with three.js to add a 3D model with Shadow to the map." />
+    <title>Add a 3D model with shadow using three.js</title>
+    <meta property="og:description"
+        content="Use a custom style layer with three.js to add a 3D model with shadow to the map." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
@@ -20,22 +21,32 @@
             height: 100%;
         }
     </style>
+    <script type="importmap">
+        {
+            "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
 </head>
 
 <body>
-    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
     <div id="map"></div>
-    <script>
-        const map = (window.map = new maplibregl.Map({
+
+    <script type="module">
+        import * as THREE from 'three';
+        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+        const map = new maplibregl.Map({
             container: 'map',
             style:
                 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
             zoom: 18,
             center: [148.9819, -35.3981],
             pitch: 60,
             antialias: true
-        }));
+        });
 
         const modelOrigin = [148.9819, -35.39847];
         const modelAltitude = 0;
@@ -56,8 +67,6 @@
             scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
         };
 
-        const THREE = window.THREE;
-
         const customLayer = {
             id: '3d-model',
             type: 'custom',
@@ -89,7 +98,7 @@
                 ground.receiveShadow = true;
                 this.scene.add(ground);
 
-                const loader = new THREE.GLTFLoader();
+                const loader = new GLTFLoader();
                 loader.load(
                     'https://maplibre.org/maplibre-gl-js/docs/assets/34M_17/34M_17.gltf',
                     (gltf) => {

diff --git a/test/examples/add-3d-model-with-terrain.html b/test/examples/add-3d-model-with-terrain.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Adding 3D models with three.js on terrain</title>
+    <title>Adding 3D models using three.js on terrain</title>
     <meta property="og:description" content="Use a custom style layer with three.js to add 3D models to a map with 3d terrain." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -20,13 +20,22 @@
             height: 100%;
         }
     </style>
+    <script type="importmap">
+        {
+            "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
 </head>
-
 <body>
-    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-    <div id="map"></div>
-    <script>
+<div id="map"></div>
+
+<script type="module">
+    import * as THREE from 'three';
+    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
         /**
          * Objective:
          * Given two known world-locations `model1Location` and `model2Location`,
@@ -36,8 +45,6 @@
 
         async function main() {
 
-            const THREE = window.THREE;
-
             const map = new maplibregl.Map({
                 container: 'map',
                 center: [11.5257, 47.668],
@@ -100,7 +107,7 @@
             }
 
             async function loadModel() {
-                const loader = new THREE.GLTFLoader();
+                const loader = new GLTFLoader();
                 const gltf = await loader.loadAsync('https://maplibre.org/maplibre-gl-js/docs/assets/34M_17/34M_17.gltf');
                 const model = gltf.scene;
                 return model;
@@ -210,4 +217,4 @@
     </script>
 </body>
 
-</html>
+</html>
diff --git a/test/examples/add-3d-model.html b/test/examples/add-3d-model.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Add a 3D model with three.js</title>
+    <title>Add a 3D model using three.js</title>
     <meta property="og:description" content="Use a custom style layer with three.js to add a 3D model to the map." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -13,19 +13,29 @@
     </style>
 </head>
 <body>
-<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+<script type="importmap">
+    {
+        "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+        }
+    }
+</script>
 <div id="map"></div>
-<script>
-    const map = (window.map = new maplibregl.Map({
+
+<script type="module">
+    import * as THREE from 'three';
+    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+    const map = new maplibregl.Map({
         container: 'map',
         style:
             'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
         zoom: 18,
         center: [148.9819, -35.3981],
         pitch: 60,
         antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
-    }));
+    });
 
     // parameters to ensure the model is georeferenced correctly on the map
     const modelOrigin = [148.9819, -35.39847];
@@ -51,7 +61,6 @@
         scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
     };
 
-    const THREE = window.THREE;
 
     // configuration of the custom layer for a 3D model per the CustomLayerInterface
     const customLayer = {
@@ -72,7 +81,7 @@
             this.scene.add(directionalLight2);
 
             // use the three.js GLTF loader to add the 3D model to the three.js scene
-            const loader = new THREE.GLTFLoader();
+            const loader = new GLTFLoader();
             loader.load(
                 'https://maplibre.org/maplibre-gl-js/docs/assets/34M_17/34M_17.gltf',
                 (gltf) => {
@@ -142,4 +151,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/globe-3d-model.html b/test/examples/globe-3d-model.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Add a 3D model to globe with three.js</title>
+    <title>Add a 3D model to globe using three.js</title>
     <meta property="og:description" content="Use a custom style layer with three.js to add a 3D model to a globe." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -39,21 +39,32 @@
 </head>
 
 <body>
-    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+    <script type="importmap">
+        {
+            "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
+
     <div id="map"></div>
     <br />
     <button id="project">Toggle projection</button>
-    <script>
-        const map = (window.map = new maplibregl.Map({
+    <script type="module">
+
+        import * as THREE from 'three';
+        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+        const map = new maplibregl.Map({
             container: 'map',
             style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
             zoom: 5.5,
             center: [150.16546137527212, -35.017179237129994],
             maxPitch: 80,
             pitch: 70,
             antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
-        }));
+        });
 
         map.on('style.load', () => {
             map.setProjection({
@@ -71,8 +82,6 @@
             });
         });
 
-        const THREE = window.THREE;
-
         // configuration of the custom layer for a 3D model per the CustomLayerInterface
         const customLayer = {
             id: '3d-model',
@@ -92,7 +101,7 @@
                 this.scene.add(directionalLight2);
 
                 // use the three.js GLTF loader to add the 3D model to the three.js scene
-                const loader = new THREE.GLTFLoader();
+                const loader = new GLTFLoader();
                 loader.load(
                     'https://maplibre.org/maplibre-gl-js/docs/assets/34M_17/34M_17.gltf',
                     (gltf) => {
@@ -144,4 +153,4 @@
     </script>
 </body>
 
-</html>
+</html>