努力载入中...

持更~GAMES202作业框架问题记录 - Remoooo

GAMES202作业0框架问题记录。本文持续更新202框架本人遇到的各种问题。

Assignment. 0

问题1. 浏览器中:源代码映射空引用报错

  • 报错信息

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (dat.gui.js.map, line 0)
[Log] assets/mary/Marry.mtl – 1 – 2 (loadOBJ.js, line 5)
[Log] assets/mary/MC003_Kozakura_Mari.png – 2 – 3 (loadOBJ.js, line 5)
[Log] model 100% downloaded (loadOBJ.js, line 11)
[Log] [0.270588, 0.552941, 0.87451] (3) (PhongMaterial.js, line 24)
[Log] assets/mary/Marry.obj – 3 – 3 (loadOBJ.js, line 5)

image-20230730135239370

  • 解决方法

定位到 lib/dat.gui.js 文件,删除最后一行:

//# sourceMappingURL=dat.gui.js.map

问题2. 异步问题导致模型加载不稳定(只显示了202与光源)

  • 报错信息

[Log] assets/mary/Marry.mtl – 1 – 2 (loadOBJ.js, line 5)
[Log] model 100% downloaded (loadOBJ.js, line 11)
[Log] Array (3) (PhongMaterial.js, line 24)
[Log] assets/mary/Marry.obj – 2 – 3 (loadOBJ.js, line 5)
[Log] assets/mary/MC003_Kozakura_Mari.png – 3 – 3 (loadOBJ.js, line 5)

image-20230730140823967

  • 问题原因

问题出在 materials.preload(); 是异步的,但后面的 THREE.OBJLoader(manager) 在载入 obj 文件时需要用到 materials 时,materials 还未准备好。

  • 解决方法 0.

最正确的方法应该是将 materials.preload(); 改为返回一个 Promise,然后在 Promise 完成后再进行下一步操作。

但是经过查阅,THREE.MTLLoaderTHREE.OBJLoader 的实现并没有直接支持 Promise,且修改的代码可能会较多,这里就不浪费时间折腾了。

  • 解决方法 1.

在 index.html 的 <head> 标签内最上面加入如下代码让贴图预加载:

<link rel="preload" href="assets/mary/MC003_Kozakura_Mari.png" as="image" type="image/png" crossorigin/>

但是这个方法不一定100%解决问题

  • 解决方法2.

设置 setTimeout ,不要让模型加载这么快,稍微等一下 materials 。用法很简单:

setTimeout(() => {
    ...
}, 300);  // 延迟0.3秒

在 loadOBJ.js 中,修改代码为:

...
new THREE.MTLLoader(manager)
    .setPath(path)
    .load(name + '.mtl', function (materials) {
        materials.preload();
        setTimeout(() => {
            new THREE.OBJLoader(manager)
                .setMaterials(materials)
                .setPath(path)
                .load(name + '.obj', function (object) {
                    object.traverse(function (child) {
                        // ...
                    });
                }, onProgress, onError);
        }, 300);  // 延迟0.3秒
    });
...

🔖

添加新评论

🚥
☕️
⬆️