ThreeJs OBJLoader + MTLLoader :材料加载但不显示

Question

使用OBJLoader和MTLLoader，我正在尝试将我从互联网下载的低聚汽车模型加载到我的Three.JS场景中。这个模型甚至没有纹理。然而，虽然我确实看到了模型，但我没有看到它的材料(在屏幕截图上正确的汽车)。我在Blender中打开了.obj文件，在循环渲染中我确实看到了低聚汽车的颜色。

材料被加载，因为当我console.log ObjMtlLoader.load返回的值时(请参阅下面的代码)，我可以看到材料名称，颜色值对应于MTL文件中的内容。

老实说，我不完全确定这是OBJLoader或MTLLoader的问题，因为我尝试了ColladaLoader (屏幕截图上的左车)，它也不显示材料，除了车轮。

我想知道，在这个有限的背景下，你是否有任何线索可以解释原因。我会更深入地研究这个问题，但我已经工作了，比如说，每天工作10个小时，包括周末。我想如果没有用的话，我就试着手工创建材料。

以下是代码的摘录：

// obj-mtl-loader.ts

export class ObjMtlLoader {

    private objLoader: THREE.OBJLoader = new THREE.OBJLoader();
    private mtlLoader: THREE.MTLLoader = new THREE.MTLLoader();

    constructor(basePath?: string) {
        if (basePath) {
            this.objLoader.setPath(basePath);
            this.mtlLoader.setPath(basePath);
        }
    }

    public load(objFile: string, mtlFile: string): Promise<THREE.Group> {
        return new Promise((resolve, reject) => {
            this.mtlLoader.load(
                mtlFile,
                (materialCreator) => {
                    materialCreator.preload();
                    this.objLoader.setMaterials(materialCreator);
                    this.objLoader.load(
                        objFile,
                        (model) => {
                            resolve(model);
                        },
                        () => {},
                        (reason) => reject(reason)
                    );
                },
                () => {},
                (reason) => reject(reason)
            );
        });
    }

}

下面是一个示例用法：

// renderer.ts
    new ObjMtlLoader().load(
        '/assets/racing/car_model/Low-Poly-Racing-Car.obj',
        '/assets/racing/car_model/Low-Poly-Racing-Car.mtl'
    ).then((car) => {
        this.SCENE.add(car);
    });

这是一张截图：

​

​

Answer 1

出于某种原因，ThreeJS (或者我所拥有的ThreeJS版本)不喜欢多媒体材料。当我在搅拌机里用材料把我的网格分开时，一切看起来都很正常。