js noob question, how devide js from html code

hi, i'm so lucky to find this 3d-force-graph, it quite a help for my usecase, but i'm a noob of js, can i get some help to a primary problem when using this lib?

i wish to devide js code from html, how should i organize the the project to rightly import third party libs besides 3d-force-graph?

i modified the official demo https://github.com/vasturiano/3d-force-graph/blob/master/example/bloom-effect/index.html

to the following index.html

<!DOCTYPE html>
<html>
<head>
  <style> body { margin: 0; } </style>

  <script src="https://unpkg.com/three@0.150.1/build/three.js"></script>

  <script src="https://unpkg.com/3d-force-graph@1.71.2/dist/3d-force-graph.js"></script>

</head>

<body>
  <div id="3d-graph"></div>

  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three@0.150.1/build/three.module.js" }}</script>
  <script type="module">
    import { UnrealBloomPass } from 'https://unpkg.com/three@0.150.1/examples/jsm/postprocessing/UnrealBloomPass.js';

    const gData = {
        nodes: [
            { id: "node1", name: "Node 1" },
            { id: "node2", name: "Node 2" },
            { id: "node3", name: "Node 3" },
        ],
        links: [
            { id: "link1", name: "link 1", source: "node1", target: "node2" },
            { id: "link2", name: "link 2", source: "node2", target: "node3" },
            { id: "link3", name: "link 3", source: "node3", target: "node1" },
        ]}

    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
      .graphData(gData)

    const bloomPass = new UnrealBloomPass();
    bloomPass.strength = 3;
    bloomPass.radius = 1;
    bloomPass.threshold = 0.1;
    Graph.postProcessingComposer().addPass(bloomPass);
  </script>
</body>
</html>

the above index.html could work directly in browser.

i wish to devide the js code from html for a better extending, and tried different kinds of import writings, but cannot make it works. below is one of my attempts

<!DOCTYPE html>
<html>
<head>
  <style> body { margin: 0; } </style>
  <script src="https://unpkg.com/three@0.150.1/build/three.js"></script>
  <script src="https://unpkg.com/3d-force-graph@1.71.2/dist/3d-force-graph.js"></script>
</head>

<body>
  <div id="3d-graph"></div>

  <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.150.1/build/three.module.js" }} </script>
  <!-- <script type="module">
    import { UnrealBloomPass } from 'https://unpkg.com/three@0.150.1/examples/jsm/postprocessing/UnrealBloomPass.js';
  </script> -->
  <script src="./index2.js"> </script>
</body>
</html>

and corresponding js


import { UnrealBloomPass } from 'https://unpkg.com/three@0.150.1/examples/jsm/postprocessing/UnrealBloomPass.js';

window.onload = function load() {
  const gData = {
        nodes: [
            { id: "node1", name: "Node 1" },
            { id: "node2", name: "Node 2" },
            { id: "node3", name: "Node 3" },
        ],
        links: [
            { id: "link1", name: "link 1", source: "node1", target: "node2" },
            { id: "link2", name: "link 2", source: "node2", target: "node3" },
            { id: "link3", name: "link 3", source: "node3", target: "node1" },
        ]}

    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
      .graphData(gData)

    const bloomPass = new UnrealBloomPass();
    bloomPass.strength = 3;
    bloomPass.radius = 1;
    bloomPass.threshold = 0.1;
    Graph.postProcessingComposer().addPass(bloomPass);
}

and i tried moving the import parts different places and found no clue to make it works. can i get some advice? thanks

vasturiano / 3d-force-graph

js noob question, how devide js from html code #606