Three.js: Editor: Add support for importing OBJ/MTL assets with textures.

[hopepdm]

Description of the problem

The obj format model is a very commonly used format. When importing obj and mtl, you need zip. . After importing, the geometry and material can be loaded normally, but the texture map has an error. After checking, I found that it is related to the following code. It is not useful to process the material-related pictures in the zip. . This is not necessarily a bug, but it affects the experience more.

//editor/js/Loader.js( function handleZip() )
// Poly

if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {

    var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
    var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
    editor.execute( new AddObjectCommand( editor, object ) );

}

Three.js version

• [ ] Dev
• [ ] r118
• [ ] ...

Browser

• [x] All of them

OS

• [ ] Windows

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

I'm afraid there is not easy way of fixing this. When the MTL file is extracted from the zip archive and then parsed, the loader tries to load textures from a relative path definition.

This will lead to URLs like https://threejs.org/editor/uv_grid_opengl.jpg.The following archive can be used for reproduction: Archiv.zip

[mrdoob]

When importing obj and mtl, you need zip.

No you don't... 🤔

[Mugen87]

No you don't... 🤔

AFAICS, it is indeed required in the editor to have the OBJ and MTL file bundled in a single archive. The files also need specific names. When inspecting the code, MTLLoader is only used here:

https://github.com/mrdoob/three.js/blob/352a3250b9116d669e8fa3e4f7e32df31f46c4d2/editor/js/Loader.js#L612-L618

[johnmarinelli]

i did some digging, could it be that the function that we are using from ui.three.js to load the file (UI.Texture#loadFile) doesn't support .zip? see here:
https://github.com/mrdoob/three.js/blob/c5560e5f94a9c40cba74fdb5f64b3794fecf0a4b/editor/js/libs/ui.three.js#L56

this function defines only the following cases for filetype
https://github.com/mrdoob/three.js/blob/c5560e5f94a9c40cba74fdb5f64b3794fecf0a4b/editor/js/libs/ui.three.js#L61
https://github.com/mrdoob/three.js/blob/c5560e5f94a9c40cba74fdb5f64b3794fecf0a4b/editor/js/libs/ui.three.js#L83
https://github.com/mrdoob/three.js/blob/c5560e5f94a9c40cba74fdb5f64b3794fecf0a4b/editor/js/libs/ui.three.js#L100

i could be wrong. is the event supposed to bubble up to the editor's loadFile somehow?

[Mugen87]

I'm afraid ui.three.js is unrelated to this topic. I suggest you study the implementation of Loader.js where MTLLoader and OBJLoader are actually used.

[qizs]

When importing obj and mtl, you need zip.

No you don't... 🤔

It is very clear about loading OBJ+MTL in the example https://threejs.org/examples/#webgl_loader_obj_mtl.
But when I try to load OBJ+MTL in Three.js Editor, it seems only OBJ is loaded but no MTL.

Thus is it possible to load OBJ+MTL in Three.js Editor?

[Mugen87]

Thus is it possible to load OBJ+MTL in Three.js Editor?

Yes but only when you create a zip archive and name the files correctly (model.obj and materials.mtl)

[kylemcdonald]

When I tried importing the .obj and .mtl files into the editor either separately or at the same time, the .mtl was not applied. When I created a zip file and imported the zip file, the .mtl was applied correctly.

[thadk]

@kylemcdonald Did you mean that you didn't experience the problem observed above with the texture map after fixing your materials.mtl in the zip file?
e.g.
Just checking because I seemed to have the same experience as the original poster.

Note: the jpg texture map which had been in the zip file alongside the materials.mtl loads fine when uploaded one-by-one clicking on the box near that error:

And a "File->Export OBJ" then embeds everything into one large OBJ, so it's a bit hard to know how to modify the originals to make them work.