Use ES modules for Three examples imports

vasturiano · Dec 27, 2022 · 16b9934 · 16b9934
1 parent 7ad5451
commit 16b9934
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 32 deletions.
diff --git a/example/basic/index.html b/example/basic/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 300;
     const gData = [...Array(N).keys()].map(() => ({

diff --git a/example/country-polygons/index.html b/example/country-polygons/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script>
+<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+<script type="module">
+  import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+  Object.assign(THREE , { TrackballControls });
+
   fetch('./ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
   {
     const Globe = new ThreeGlobe()

diff --git a/example/custom-material/index.html b/example/custom-material/index.html
@@ -2,16 +2,17 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
-
   <script src="//unpkg.com/three-globe"></script>
 <!--  <script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
 
     const Globe = new ThreeGlobe()
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')

diff --git a/example/custom/index.html b/example/custom/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 300;
     const gData = [...Array(N).keys()].map(() => ({

diff --git a/example/hexbin/index.html b/example/hexbin/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 6000;
     const gData = [...Array(N).keys()].map(() => ({

diff --git a/example/hexed-polygons/index.html b/example/hexed-polygons/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script>
+<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+<script type="module">
+  import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+  Object.assign(THREE , { TrackballControls });
+
   fetch('./ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
   {
     const Globe = new ThreeGlobe()

diff --git a/example/html-markers/index.html b/example/html-markers/index.html
@@ -2,17 +2,19 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
-  <script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>
-
-    <script src="//unpkg.com/three-globe"></script>
+  <script src="//unpkg.com/three-globe"></script>
 <!--  <script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    import { CSS2DRenderer } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
+    Object.assign(THREE , { TrackballControls, CSS2DRenderer });
+
     const markerSvg = `<svg viewBox="-4 0 36 36">
       <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
       <circle fill="black" cx="14" cy="14" r="7"></circle>

diff --git a/example/labels/index.html b/example/labels/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 50;
     const gData = [...Array(N).keys()].map(() => ({

diff --git a/example/links/index.html b/example/links/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 20;
 

diff --git a/example/paths/index.html b/example/paths/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random paths
     const N_PATHS = 10;
     const MAX_POINTS_PER_LINE = 10000;

diff --git a/example/ripples/index.html b/example/ripples/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
 <!--  <script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     // Gen random data
     const N = 10;
     const gData = [...Array(N).keys()].map(() => ({

diff --git a/example/satellites/index.html b/example/satellites/index.html
@@ -18,7 +18,6 @@
   <script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
 <!--  <script src="../../dist/three-globe.js"></script>-->
 </head>
@@ -27,7 +26,11 @@
   <div id="globeViz"></div>
   <div id="time-log"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     const EARTH_RADIUS_KM = 6371; // km
     const SAT_SIZE = 80; // km
     const TIME_STEP = 3 * 1000; // per frame

diff --git a/example/solar-terminator/index.html b/example/solar-terminator/index.html
@@ -14,7 +14,6 @@
   </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
 <!--  <script src="../../dist/three-globe.js"></script>-->
 
@@ -26,7 +25,11 @@
 
 <div id="time"></div>
 
-<script>
+<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+<script type="module">
+  import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+  Object.assign(THREE , { TrackballControls });
+
   const VELOCITY = 9; // minutes per frame
 
   const sunPosAt = dt => {

diff --git a/example/tiles/index.html b/example/tiles/index.html
@@ -2,15 +2,18 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three/examples/js/controls/TrackballControls.js"></script>
   <script src="//unpkg.com/three-globe"></script>
   <!--<script src="../../dist/three-globe.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
+    Object.assign(THREE , { TrackballControls });
+
     const TILE_MARGIN = 0.35; // degrees
 
     // Gen random data