I am encountering an issue while loading models using three.js. I have an obj file with mtl and a glb model of the same object. When I load the model with the obj and the mtl loader, the object is not displayed in the browser. If I only load it with the obj loader, the model appears but without any textures. However, when I use the gltf loader, there are no issues and the model is shown with the correct texture.
Additionally, I am facing a problem with the scale. The size of the object loaded with the gltf loader differs from the one imported with the obj loader. With the obj loader, the object appears much larger. The data size is also four times bigger, so I suspect that the exporting process could be causing the issue.
My goal is to successfully load the Object with the obj and the mtl loader!
Here is the code snippet for loading the model with the obj loader:
const objLoader = new THREE.OBJLoader();
objLoader.load( "model/test.obj", function( object ) {
scene.add( object );
object.scale.set(0.001, 0.001, 0.001);
object.rotateX(-Math.PI/4);
console.log( object );
});
And here is the code snippet for loading the model with both the obj and the mtl loader:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( "model/test.mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.load( "model/test.obj", function( object ) {
scene.add( object );
});
});
To load the model using the gltf loader, you can use the following code:
const gltfLoader = new THREE.GLTFLoader( manager );
gltfLoader.load( "model/test.glb", function( gltf ) {
model = gltf.scene;
model.rotateX( -Math.PI/2 );
scene.add( model );
console.log( model );
});
This document contains additional code for initializing the scene and rendering the models using different loaders. It includes settings for lights, cameras, and controls along with the necessary imports and scripts. You can find the full code and CSS snippets in this section as well.
If you need access to my folder structure or the OBJ and MAT files, check out the relevant links provided.