时间戳

首页 > 解决方案 > GLTFLoader 未定义 - THREE.js

three.js - GLTFLoader 未定义 - THREE.js

问题描述

我正在尝试使用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.jsgltf

解决方案

var loader = new THREE.GLTFLoader();

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

推荐阅读