[VANTA] No THREE defined on window

Questions
1

I am trying to implement this background into a html.

I want to add Depth of Field to the scene and for this downloaded the neccessary files from github. (As those are not minified, opposed to the link you can copy from the webpage.)

I believe I am not importing three.module.js properly, as I get “_base.js:177 [VANTA] No THREE defined on window”.

<!DOCTYPE html>
    <html>
        <head>
           <meta charset="utf-8">
           <title>PlexusBG</title>
           <style> body {overflow: hidden; margin: 0px; } </style>
           <script type="module" src="./js/three/three.module.js"></script>
           <script type="module" src="./js/vanta.net.js"></script>
        </head>
    
        <body style="width:100%; height: 100%;">
            <div id="vanta-bg"></div>
            <script type="module"> 
                VANTA.NET({
                    el: "#vanta-bg",
                    mouseControls: true,
                    touchControls: true,
                    gyroControls: false,
                    minHeight: 200.00,
                    minWidth: 200.00,
                    scale: 1.00,
                    scaleMobile: 1.00,
                    color: 0xff8900,
                    backgroundColor: 0x001b140b,
                    points: 8.00,
                    maxDistance: 27.00,
                    spacing: 20.00
                })
            </script>
        </body>
    </html>

I have a test server running at temp.morph3us.net
I am overwhelmed by all the stuff I am reading on the internet and would greatly appreciate if someone could help me with this! I hope its okay to post in this place, as I do not believe that its a Vanta problem, but more about the scope of the THREE import and the namespace (throwing around with big words!) because its imported as a module.

2

There are two possible ways to import three.js if you want to have all of the files locally, and don’t want to use a build system like Parcel or Webpack.

ES Modules

<script type="module">
  import * as THREE from './$PATH_TO_THREE/build/three.module.js';
  import { OrbitControls } from './$PATH_TO_THREE/examples/controls/OrbitControls.js';
  console.log(THREE, OrbitControls);
</script>

Scripts / Globals

<script src="./$PATH_TO_THREE/build/three.min.js"></script>
<script src="./$PATH_TO_THREE/examples/jsm/controls/OrbitControls.js"></script>
<script>
  console.log(THREE, THREE.OrbitControls);
</script>

Note the differences between three.module.js vs. three.min.js, and examples/jsm vs. examples/js. In your code above you’ve mixed the two, which is why the global THREE is not defined.

3

Thanks for taking the time to answer!
Unfortunately, if I understood what you where saying and implemented it correctly, it doesn’t change the outcome. (I updated the online files if you want to have a look for yourself):

<!DOCTYPE html>
    <html>
        <head >
            <meta charset="utf-8">
        </head>
        <body style="overflow: hidden; margin: 0px;">
            <div id="vanta-bg"></div>
            <script type="module"> 
                import * as THREE from './js/three/three.module.js';
                import './js/vanta.net.js';
                VANTA.NET({
                    el: "#vanta-bg",
                    mouseControls: true,
                    touchControls: true,
                    gyroControls: false,
                    minHeight: 200.00,
                    minWidth: 200.00,
                    scale: 1.00,
                    scaleMobile: 1.00,
                    color: 0xff8900,
                    backgroundColor: 0x001b140b,
                    points: 8.00,
                    maxDistance: 27.00,
                    spacing: 20.00
                })
            </script>
        </body>
    </html>
4

I made the big mistake to think that if THREE is defined in the index.html it would be defined in every module.
I had to explicitly import three.module.js in the _base.js, which my client.js ()in this case vanta.net.js) extends.

Thanks to @Mugen87 for that!