Tengo una configuración básica con un index.html que importa un archivo javascript con una escena de tres js.

En esta escena de tres js, intento importar un complemento que ejecuta un tipo específico de gráfico volumétrico ( https://github.com/ScatterCo/Depthkit.js ). Descargué el archivo depthkit.js de la carpeta de compilación del github anterior y lo coloqué en mi estructura de carpetas ./js localmente.

Mi javascript completo se ve así actualmente:

 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 ); }

Normalmente, si ejecuto una escena de tres js como esta ejecutando index.html con LiveServer de VSCode, funcionará bien. Pero desde que agregué este objeto de kit de profundidad, recibo este error de consola relacionado con el kit de profundidad:

 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

¿Estoy importando el archivo depthkit.js correctamente?