Fix unreal bloom pass import.

vasturiano · vasturiano · commit b807f5c4c6d3 · 2022-08-23T02:40:06.000+01:00
diff --git a/example/bloom-effect/index.html b/example/bloom-effect/index.html
@@ -5,47 +5,46 @@
   <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/examples/js/postprocessing/Pass.js"></script>
+  <script src="//unpkg.com/three/examples/js/shaders/CopyShader.js"></script>
+  <script src="//unpkg.com/three/examples/js/shaders/LuminosityHighPassShader.js"></script>
+  <script src="//unpkg.com/three/examples/js/postprocessing/UnrealBloomPass.js"></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>
-    UnrealBloomPassPromise = import('//cdn.skypack.dev/three@0.136/examples/jsm/postprocessing/UnrealBloomPass.js')
-      .then(m => m.UnrealBloomPass);
-  </script>
-
   <script type="text/jsx">
-    UnrealBloomPassPromise.then(UnrealBloomPass => {
-      const { useRef, useEffect } = React;
-
-      fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
-        const FocusGraph = () => {
-          const fgRef = useRef();
-
-          useEffect(() => {
-            const bloomPass = new UnrealBloomPass();
-            bloomPass.strength = 3;
-            bloomPass.radius = 1;
-            bloomPass.threshold = 0.1;
-            fgRef.current.postProcessingComposer().addPass(bloomPass);
-          }, []);
-
-          return <ForceGraph3D
-            ref={fgRef}
-            graphData={data}
-            nodeLabel="id"
-            nodeAutoColorBy="group"
-          />;
-        };
-
-        ReactDOM.render(
-          <FocusGraph/>,
-          document.getElementById('graph')
-        );
-      });
+    const { useRef, useEffect } = React;
+
+    fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
+      const FocusGraph = () => {
+        const fgRef = useRef();
+
+        useEffect(() => {
+          const bloomPass = new THREE.UnrealBloomPass();
+          bloomPass.strength = 3;
+          bloomPass.radius = 1;
+          bloomPass.threshold = 0.1;
+          fgRef.current.postProcessingComposer().addPass(bloomPass);
+        }, []);
+
+        return <ForceGraph3D
+          ref={fgRef}
+          graphData={data}
+          nodeLabel="id"
+          nodeAutoColorBy="group"
+        />;
+      };
+
+      ReactDOM.render(
+        <FocusGraph/>,
+        document.getElementById('graph')
+      );
     });
   </script>
 </body>
