GLTFLoader。js-TypeError:无法获取(Three.js)

我创造了一个 three.js 场景中有几个利用 GLTFLoader.js 加载器。直到最近,我的场景仍按预期工作,现在我在加载其中一个资产时遇到问题,特别是在控制台中收到以下错误:

TypeError:获取失败

以下是stacktrace(在我看来,这在本质上似乎相当模糊):

_onError    @   GLTFLoader.js:77
Promise.catch (async)       
parse   @   GLTFLoader.js:1823
parse   @   GLTFLoader.js:275
(anonymous) @   GLTFLoader.js:95
(anonymous) @   three.min.js:6
load (async)        
load    @   three.min.js:6
load    @   GLTFLoader.js:91
make_3d @   main.js?m=1642396149.9939363:1646

相应的 line 1646 在我的 main.js 在 make_3d 函数与第一个 loader.load() 调用:

const loader = new THREE.GLTFLoader();

// Throws error
loader.load('assets/my_object/scene.gltf', function (gltf) {
    my_obj = gltf.scene;
    my_obj.scale.set(2, 2, 2)
    my_obj.position.set(1, 1, 1)
    scene.add(my_obj);       
})

// Does not throw error
loader.load('assets/my_object2/scene.gltf', function (gltf) {
    my_obj2 = gltf.scene;
    my_obj2.scale.set(.1, .1, .1)
    scene.add(my_obj2);
})

我使用的CDN参考资料如下:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js
https://threejs.org/examples/js/controls/OrbitControls.js

正如我前面提到的,我正在加载其他对象(虽然大小稍小, scene.bin 大小分别为6318KB和187KB),加载这些其他对象时不会抛出任何错误。

与整个项目相关的代码数量相当大,所以我试图缩小范围。我希望我没有错过一些明显的东西。

使现代化

从那时起,我就能够确定错误的来源是 parser.getDependencies('scene') 里面 GLTFLoader。js :

parse( onLoad, onError ) {

    const parser = this;
    const json = this.json;
    const extensions = this.extensions; // Clear the loader cache

    this.cache.removeAll(); // Mark the special nodes/meshes in json for efficient parse

    this._invokeAll( function ( ext ) {

        return ext._markDefs && ext._markDefs();

    } );

    Promise.all( this._invokeAll( function ( ext ) {

        return ext.beforeRoot && ext.beforeRoot();

    } ) ).then( function () {

        console.log(parser.getDependencies('scene'));

        return Promise.all( [ parser.getDependencies( 'scene' ), parser.getDependencies( 'animation' ), parser.getDependencies( 'camera' ) ] );

    } ).then( function ( dependencies ) {

        const result = {
            scene: dependencies[ 0 ][ json.scene || 0 ],
            scenes: dependencies[ 0 ],
            animations: dependencies[ 1 ],
            cameras: dependencies[ 2 ],
            asset: json.asset,
            parser: parser,
            userData: {}
        };
        addUnknownExtensionsToUserData( extensions, result, json );
        assignExtrasToUserData( result, json );
        Promise.all( parser._invokeAll( function ( ext ) {

            return ext.afterRoot && ext.afterRoot( result );

        } ) ).then( function () {

            onLoad( result );

        } );

    } ).catch( onError );

}