I am trying to create to create a webapp in which users can upload obj/fbx files and view them in the browser. I have used the OBJLoader and FBXLoader which Threejs provides and it is all working fine. I however want to convert both these models to GTLF before loading them into the scene (for the sake of consistency).
How can I achieve this in threejs? I know that threejs has a GTLF exporter but I am unaware of how to leverage it for my purposes.
There are two ways you could do this:
Method 1:
- Convert using from OBJ or FBX to glTF using native libraries on your server, like obj2gltf and fbx2gltf.
- Load the glTF file on the web app.
Method 2:
- Load the OBJ or FBX using OBJLoader or FBXLoader, giving you a THREE.Mesh or other object.
- Convert that THREE.Mesh to a glTF file using GLTFExporter.
- Load the glTF file using GLTFLoader, giving you a THREE.Mesh or other object again.
Method 1 is harder, but may give you better conversion results because the native libraries have access to the FBX SDK. Method 2 is fairly easy, but I can’t think of any benefit to doing that… the Mesh you have after the loading the OBJ or FBX will be (at best) the same as the Mesh you get at the end. At worst, the roundtrip through GLTFExporter->GLTFLoader may introduce performance or correctness bugs.
3 Likes
Sorry to reopen this thread. I want to go with method 2, but I have some issues.
I’m playing with this FBX model from sketchfab: https://sketchfab.com/3d-models/low-poly-palm-tree-with-coconuts-separately-32a7255a308e46cfbdabeb996405ba47
When I load into ThreeJS using the FBXLoader I see, in my scene, a new Object with one single mesh and multiple materials. So the variable node.material
is an array and in the variable node.geometry
I can see different groups.
When I try to use the GLFTExporter, it generates a new scene but when I load that object I can see multiple meshes duplicated with each material, so the generated model looks weird.
I was thinking that I should create manually different Geometries per each group and assign them the respective material. All of this before calling the GLTFExporter.
This is my concern, is it ok that approach? or does ThreeJS contain anything to do this kind of conversion?