I have a basic setup with an index.html which imports a javascript file with a threejs scene.

In this threejs scene, I am trying to import a plugin which runs a specific type of volumetric graphic (https://github.com/ScatterCo/Depthkit.js). I have downloaded the depthkit.js file from the build folder from the above github and placed it in my ./js folder structure locally.

My full javascript looks like this currently:

import * as THREE from './js/three.module.js';
import * as DK from './js/depthkit.js';

let camera, scene, renderer;
let geometry, material, mesh, depthkit;

init();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    depthkit = new DK.DepthKit();
    depthkit.load(
        "./assets/dk_single.txt",
        "./assets/dk_single.mp4",
        character => {
            scene.add(character);
        }
    );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setAnimationLoop( animation );
    document.body.appendChild( renderer.domElement );

}

function animation( time ) {

    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;

    renderer.render( scene, camera );

} 

Normally if I run a threejs scene like this by running index.html with LiveServer from VSCode, it will work fine. But since adding this depthkit object, I am getting this console error related to the depthkit:

Uncaught ReferenceError: THREE is not defined
    at Object.2.glslify (depthkit.js:414)
    at s (depthkit.js:1)
    at depthkit.js:1
    at Object.3../depthkit (depthkit.js:429)
    at s (depthkit.js:1)
    at e (depthkit.js:1)
    at depthkit.js:1

Am I importing the depthkit.js properly?