Update examples to import three via esm

vasturiano · Feb 9, 2024 · dec2127 · dec2127
1 parent 0fd8cac
commit dec2127
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/example/custom-node-shape/index-three.html b/example/custom-node-shape/index-three.html
@@ -4,7 +4,6 @@
   <script src="//unpkg.com/react/umd/react.production.min.js"></script>
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
-  <script src="//unpkg.com/three"></script>
 
   <script src="//unpkg.com/react-force-graph-vr"></script>
   <!--<script src="../../src/packages/react-force-graph-vr/dist/react-force-graph-vr.js"></script>-->
@@ -15,7 +14,9 @@
 <body>
   <div id="graph"></div>
 
-  <script type="text/jsx">
+  <script type="text/jsx" data-type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
     ReactDOM.render(
       <ForceGraphVR
         graphData={genRandomTree(100)}

diff --git a/example/forcegraph-dependencies/index.html b/example/forcegraph-dependencies/index.html
@@ -5,17 +5,17 @@
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
-  <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three-spritetext"></script>
-
   <script src="//unpkg.com/react-force-graph-3d"></script>
   <!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
 </head>
 
 <body>
   <div id="graph"></div>
 
-  <script type="text/jsx">
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="text/jsx" data-type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
     fetch('../datasets/forcegraph-dependencies.json').then(res => res.json()).then(depData => {
       const elem = document.getElementById('graph');
 

diff --git a/example/html-nodes/index.html b/example/html-nodes/index.html
@@ -5,7 +5,6 @@
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
-  <script src="//unpkg.com/three"></script>
   <script src="//unpkg.com/react-force-graph-3d"></script>
 <!--  <script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
 

diff --git a/example/img-nodes/index.html b/example/img-nodes/index.html
@@ -5,16 +5,16 @@
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
-  <script src="//unpkg.com/three"></script>
-
   <script src="//unpkg.com/react-force-graph-3d"></script>
   <!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
 </head>
 
 <body>
   <div id="graph"></div>
 
-  <script type="text/jsx">
+  <script type="text/jsx" data-type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
     const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];
 
     // Random connected graph

diff --git a/example/text-links/index-3d.html b/example/text-links/index-3d.html
@@ -5,17 +5,17 @@
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
-  <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three-spritetext"></script>
-
   <script src="//unpkg.com/react-force-graph-3d"></script>
   <!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
 </head>
 
 <body>
   <div id="graph"></div>
 
-  <script type="text/jsx">
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="text/jsx" data-type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
     fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
       ReactDOM.render(
         <ForceGraph3D

diff --git a/example/text-nodes/index-3d.html b/example/text-nodes/index-3d.html
@@ -5,17 +5,17 @@
   <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
-  <script src="//unpkg.com/three"></script>
-  <script src="//unpkg.com/three-spritetext"></script>
-
   <script src="//unpkg.com/react-force-graph-3d"></script>
   <!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
 </head>
 
 <body>
   <div id="graph"></div>
 
-  <script type="text/jsx">
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="text/jsx" data-type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
     fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
       ReactDOM.render(
         <ForceGraph3D