I'm currently working on integrating a low-poly car model into my Three.JS scene using OBJLoader and MTLLoader. The downloaded model unfortunately lacks textures which makes it challenging to display the materials properly (as shown in the right car on the screenshot). Upon inspecting the .obj file in Blender, I noticed that the low-poly car's color is visible in Cycles rendering.
Although the materials are loaded successfully - verified by examining the value returned from ObjMtlLoader.load method (see code snippet below) - the issue persists with material display. Surprisingly, switching to ColladaLoader (left car on the screenshot) did not resolve the material visibility problem except for the wheels.
Given my limited availability due to work commitments, I seek your insights on this matter before delving deeper into troubleshooting. In case no solution emerges, manual creation of materials might be worth exploring as a last resort.
Below is an extract of the code:
// 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)
);
});
}
}
Here is an example usage:
// 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);
});
Additionally, here is a link to view the screenshot:https://i.sstatic.net/H406s.jpg