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

Question

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

如果您需要查看其中的任何其他部分，请直接说出来，我可以编辑问题。

谢谢!

Answer 1

var loader = new THREE.GLTFLoader();

您应该使用其父类构造函数(即“THREE”构造函数)实例化 GLTFLoader 构造函数，如我在上面所示。这将解决问题。