javascript - 将模块导入到threejs javascript场景中

Question

我有一个 index.html 的基本设置，它导入一个带有threejs场景的javascript文件。

在这个threejs 场景中，我正在尝试导入一个运行特定类型体积图形的插件（https://github.com/ScatterCo/Depthkit.js）。我已经从上面的 github 的 build 文件夹中下载了 depthkit.js 文件，并将它放在我本地的 ./js 文件夹结构中。

我的完整 javascript 目前看起来像这样：

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

} 

通常，如果我通过使用 VSCode 中的 LiveServer 运行 index.html 来运行这样的threejs 场景，它将正常工作。但是自从添加了这个 depthkit 对象后，我得到了这个与 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

我是否正确导入了 depthkit.js？

标签： javascriptimportmodule