GLTFLoader 未定义 - THREE.js答案

【问题标题】：GLTFLoader is not defined - THREE.jsGLTFLoader 未定义 - THREE.js
【发布时间】：2020-06-13 12:05:43
【问题描述】：

我正在尝试使用three.js 和anime.js 构建一个带有可滚动动画的网站。到目前为止，一切都处于工作状态（这意味着我在空间中有一个立方体，当我滚动时，我可以通过相机看到它 - 立方体和相机在各种关键帧中移动，直到它们的时间线结束。我的下一个任务是引入一个搅拌器对象来替换立方体。THREEjs 文档建议我在尝试实现此功能时使用 GLTFLoader：

我收到了错误：

GLTFLoader 未定义。

这是它引用的代码：

var loader = new GLTFLoader();

    loader.load(
        '/assets/logotext.glb',
        function ( gltf ) {
            // called when the resource is loaded
            scene.add( gltf.scene );
        },
        function ( xhr ) {
            // called while loading is progressing
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% + loaded' );
        },
        function ( error ) {
            // called when loading has errors
            console.error( 'An error happened', error );
        },
    );

这是我在 html 中包含脚本的方式：

<script src="\node_modules\animejs\lib\anime.min.js"></script>
       <script src="\node_modules\three\build\three.js"></script>
      <script src="\node_modules\three\examples\js\loaders\GLTFLoader.js"></script>
     <script src="index.js"></script>      
  </body>
</html>

如果我没有包含足够的文件，可以在这里找到完整的文件：index.html，index.js

如果您需要查看此内容的任何其他部分，请说，我可以编辑问题。

谢谢！

【问题讨论】：

尝试使用THREE 命名空间创建GLTFLoader。所以var loader = new THREE.GLTFLoader();.
谢谢！如果我没有结束在 stackoverflow 上的每一次交流，感觉就像一个假人，那么我就没有学习（：现在一切都按预期工作。
我花了很多时间尝试更改 src 和导入方法以使 gltfloader 正常工作！非常感谢您的解决方案！

标签： three.js gltf

【解决方案1】：

var loader = new THREE.GLTFLoader();

您应该使用其父类构造函数（即“三”构造函数）实例化 GLTFLoader 构造函数，就像我在上面显示的那样。这将解决问题。

【讨论】：