TypeError: THREE.GLTFLoader 不是构造函数答案

【问题标题】：TypeError: THREE.GLTFLoader is not a constructorTypeError: THREE.GLTFLoader 不是构造函数
【发布时间】：2020-10-04 05:23:05
【问题描述】：

我正在尝试在我的 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 上运行它并尝试更改所有可能的路径。我还创建了一个 localhost 来读取文件，但出现了同样的错误。

【问题讨论】：

标签： javascript constructor three.js 3d gltf

【解决方案1】：

这是因为您在 ES6 版本的 GLTFLoader 中加载，但使用的是预构建的（ES5）three.js。
从examples/js/loaders文件夹中加载ES5版本的GLTFLoader（并在三个.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>

【讨论】：