TypeError: THREE.GLTFLoader is not a constructor

Question

我正在尝试在我的 javascript 文件中导入 3d 模型，这是 'test.html' 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <script type="module" src="./three.js-master/examples/jsm/loaders/GLTFLoader.js"></script>
        <script src="./three.js-master/build/three.js"></script>
        <script src="./test.js"></script>
    </body>
</html>

这是 'test.js' 代码：

var camera, scene, renderer;

window.onload = function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 45, 1.8, 0.1, 20.0 ); // fovy, aspect, near, far
    renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0xffffff);
    renderer.setSize(1280, 720); //Size of the camera
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.GLTFLoader();

    loader.load( 'duck/source/mindbreaker.glb', function ( gltf ) {

        scene.add( gltf.scene );

      }, undefined, function ( error ) {

        console.error( error );

      } );

    camera.position.x = 0.0;
    camera.position.y = 0.0;
    camera.position.z = 10.0;

    render();
}

function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

我运行它在 FIREFOX 上，我试图改变每一个可能的路径。我也创建了一个本地主机来读取文件，但是出现了同样的错误。

Answer 1

这是因为您在 ES6 版本的 GLTFLoader 中加载，但是使用预构建的 (ES5) three.js。
从 examples/js/loaders 文件夹加载 ES5 版本的 GLTFLoader（并在 three.js 之后加载）。
例如。

<script src="./three.js-master/build/three.js"></script>
<script src="./three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<script src="./test.js"></script>