GLTFLoader.js - TypeError：无法获取（Three.js）答案

【问题标题】：GLTFLoader.js - TypeError: Failed to fetch (Three.js)GLTFLoader.js - TypeError：无法获取（Three.js）
【发布时间】：2022-01-22 08:12:15
【问题描述】：

我创建了一个three.js 场景，其中包含一些利用GLTFLoader.js 加载器的各种加载资产。直到最近，我的场景都按预期工作，现在我在加载这些资产之一时遇到了问题，特别是在我的控制台中收到以下错误：

TypeError: 获取失败

还有以下堆栈跟踪（对我来说，这在本质上似乎相当模糊）：

_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

make_3d 函数下我的main.js 文件中对应的line 1646 与第一个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 vs 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 );

}

【问题讨论】：

DevTools 中的“网络”面板有什么作用？它是否显示来自应用程序的网络请求失败？ “解析”错误让我怀疑它试图解析它认为是 JSON 的东西，但不是。
DevTools 中没有失败的网络请求。我刚刚在我的原始帖子中添加了一些额外的信息，似乎是场景依赖项的一些问题。仍在尝试更深入地挖掘。非常感谢任何进一步的见解或想法！

标签： three.js gltf

【解决方案1】：

正如@emackey 在 cmets 中所提到的，问题的根源似乎在于 GLTFLoader.js 的缓存逻辑中的 JSON 解析问题，这导致了 parser.getDependencies( 'scene' ) 中的拒绝承诺。

暂时的解决办法是清除浏览器缓存的图片和文件，加载的资源会出现在场景中，没有问题。

【讨论】：