No materials after converting OBJ to JSON with obj2three.js

Questions
1

I have a .obj file and mtl.file. And I converted them to json format with obj2three.js (The file is three.js provided,three.js-master\utils\converters\obj2three.js).
After execute obj2three.js with node, the json file is created.
I load the json file with ObjectLoader , but , the material can’t be displayed ,why?

My js code:

var jsonLoader = new THREE.ObjectLoader();
jsonLoader.load( "/public/img/server3D/obj_mtl/_server.json", function( geometry ) {
    scene.add( geometry );
});

Actual Result: It has no color , , ,

2

Can you please share the JSON file and the OBJ/MTL files in this thread?

BTW: Have you added any lights to your scene?

3

@ Mugen87
Yes , I added lights.
but when load Json file and obj/mtl files, I didn’t modify the lights, and the display results are different.

Json file：serverbox.json (905.5 KB)
ObjectLoad Result：
image

4

Obj/Mtl File:serverbox.mtl (205 Bytes)
serverbox.obj (350.0 KB)

THREE.MTLLoader+THREE.OBJLoader Result:
image

Why can’t display the material with loading Json File

5

Okay, the problem is that obj2three does not support MTL files. Hence, I suggest the following workaround:

  • Rename the OBJ-File to model.obj.
  • Rename the MTL-File to materials.mtl.
  • Create a zip file containing both files.
  • Load the archive with the editor (via Drag’n’Drop).
  • Select the loaded object and then click on File -> Export Object.
1 Like
6

Thank you very much~ :grinning:, The materials can be displayed now .
And I have an another question.
My obj and mtl also have png file to display on the 3d model，and I created a zip file containing obj, mtl, png format files.
But png can’t be displayed, there will be some errors in the browser.

image
image1898×47 3.83 KB

Do you have a good solution?

7

Can you please share the PNG?

8

OK , there are 2 png files

9

<a class="

10

It seems this use case is currently not supported by the editor. I suggest the following workaround:

Try to export your assets directly to glTF or convert them via obj2gltf. glTF is the recommended 3D format of three.js. You might want to use it directly instead to convert to JSON.

Related: https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

11

Thanks for your advice,
But after I converted obj to gltf, I still can’t display it in the browser…:sob:

12

Does it work if you display the glTF with one of the following viewers?

https://gltf-viewer.donmccurdy.com/
https://sandbox.babylonjs.com/

13

Yes，the gltf can be displayed in https://sandbox.babylonjs.com/

Please refer my code and the error in browser：
var gltfLoader = new THREE.GLTFLoader();
gltfLoader.load(’/public/img/server3D/obj_mtl/server5.gltf’, (geometry) => {
scene.add(geometry);
});
image

14

HI~!!
I refered Troubleshooting Loading JSON Model - #5 by calebcarithers ， and modified my code:
scene.add(geometry); → scene.add(geometry.scene);
And the issue was resolved.
Now the gltf file can be displayed well.
Thanks for your help~~~!!:hugs::hugs:

1 Like
15

Hello,

I was curious if you see a way to do this operation without the editor when you have multiple files?

16

Hi
I have one obj file and it has 3 mtl files
And also mtl file content is JSON format
Mtl file has texture file but it is not displayed
“texture” “http://localhost/assets/textures/my.mtl”
What am I gonna do?

17

This link does not work.

I don’t think that’s true. MTL files are not in JSON format.

19

Can you please share the entire file?

21

I am going to display that object in my website
So I built html, but it doesn’t work

22

Just for reference, a MTL file has to look like so:

JSON content is definitely incorrect and probably indicates a buggy MTL exporter.