Author Topic: Loading OBJ into ThreeJS  (Read 631 times)

Grubs

  • Newbie
  • *
  • Posts: 4
    • View Profile
Loading OBJ into ThreeJS
« on: February 01, 2018, 08:12:27 PM »
Hey Alex, first off I want to say that you have made a wonderful program, it's a joy seeing people's creations with Crocotile! Just a quick question. I'm trying to load an exported .OBJ with an associated .MTL into ThreeJS, but for some reason I'm unable to get the materials, textures, to show. I created a crate object out of the default tileset and exported to .OBJ with .MTL textures. Here's what I have

Code: [Select]
    const objPath = "/obj/crate/";
    const name = "crate";
   
    const mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath(objPath);
    mtlLoader.load(name + '.mtl', function (materials) {
       
        materials.preload();
       
        const objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(objPath);
        objLoader.load(name + '.obj', function (object) {
            scene.add(object);
        });
    });

The thing is if I comment out objLoader.setMaterials(materials); the box shows without it's textures, but with it I don't see anything, no errors either way. Any ideas?

Alex

  • Administrator
  • Sr. Member
  • *****
  • Posts: 311
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #1 on: February 02, 2018, 06:16:29 AM »
Thanks :)
I haven't tried loading an mtl into three.js before, so I'm not familiar with the process. Have you tried it with an obj/mtl that wasn't exported from Crocotile, to see if the issue may be related to the exported file or your code?

Grubs

  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #2 on: February 02, 2018, 01:40:45 PM »
Yea, it worked fine on another model I downloaded. If the mtl doesn't work is there another way to get the textures onto the model?

Alex

  • Administrator
  • Sr. Member
  • *****
  • Posts: 311
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #3 on: February 02, 2018, 04:03:15 PM »
If you provide me the files, I can try to work out a solution for you.
You can pm me them if you want to keep them private or you can attach them to a post in this thread.
It'd help to have the crocotile file, textures , obj, mtl, (also obj/mtl of a working model) and some source code for loading into threejs.
I can't promise that I'll figure something out, but I can give it a shot!

Grubs

  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #4 on: February 02, 2018, 04:33:41 PM »
That would be amazing, my files are located in a google drive because they were too big for the post. They're just a base ThreeJS scene that is trying to load in OBJs. Thanks!

https://drive.google.com/file/d/1ukBjyP-1sZUHA1V65SHi4QgcTw6R9YJf/view?usp=sharing

Alex

  • Administrator
  • Sr. Member
  • *****
  • Posts: 311
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #5 on: February 02, 2018, 10:25:19 PM »
ok..
I messed with the code..
It seems like it isn't setting the material variables correctly.. Or it isn't setting the texture variables in the material correctly?
I'm not sure.. but you can set the texture directly, and it will show up..
Code: [Select]
function createOBJ(name, x = 0, setMaterials = true) {
    const objPath = "/obj/" + name + "/";
   
    const mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath(objPath);
    mtlLoader.load(name + '.mtl', function (materials) {
       
        materials.preload();
        const objLoader = new THREE.OBJLoader();
        if (setMaterials) objLoader.setMaterials(materials);
        objLoader.setPath(objPath);
        objLoader.load(name + '.obj', function (object) {
            object.position.x = x;
            scene.add(object);

//ADDED THIS STUFF
var texture = new THREE.TextureLoader().load( objPath+'texture_1.png' );
texture.magFilter = THREE.NearestFilter;
//texture.minFilter = THREE.LinearMipMapLinearFilter;
var material = new THREE.MeshBasicMaterial( { map: texture } );
object.children[0].material = material;
console.log(object);

        });
    });
}


Grubs

  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #6 on: February 04, 2018, 12:24:27 AM »
Awesome, I wonder why it doesn't work with Crocotile's MTLs. Thanks a ton for the help!

Alex

  • Administrator
  • Sr. Member
  • *****
  • Posts: 311
    • View Profile
Re: Loading OBJ into ThreeJS
« Reply #7 on: February 04, 2018, 04:16:23 PM »
no problem!
I suspect the source code in threejs that reads the mtl/obj files might be a bit selective in the way the data needs to be formatted- it might not take into account all the possible ways a mtl/obj file can be formatted.