Question

我是Three.js的新手，正在尝试将简单的gltf模型导入到我的网页中，但是控制台返回此错误：

Uncaught TypeError: THREE.GLTFLoader is not a constructor

这是我当前的代码：

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTC-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script src="three.js"></script>
        <script type="module" src="GLTFLoader.js"></script>
        <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);

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

        var geometry = new THREE.BoxGeometry(1,2,1);
        var material = new THREE.MeshBasicMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(geometry,material);

        var loader = new THREE.GLTFLoader();
        loadr.load('untitled.glb', function(gltf) {
            scene.add(gltf.scene);
            renderer.render(scene,camera);
        })
        init();

        </script>
    </body>
</html>

我已经验证了：

•GLTFLoader和three.js是正确的最新版本

•文件位于正确的路径中，还尝试使用three.js网站中的url路径

如果有人知道发生了什么，那将是一个大帮助。

非常感谢您！

Answer 1

似乎您没有正确导入three.js和GLTFLoader。现在用这两行尝试一下，看看是否可行：

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/js/loaders/GLTFLoader.js"></script>

建议尽可能避免将全局脚本与模块混合使用。

GLTFLoader不是构造函数

1 个答案: