obj and mtl importing

[jyy1082]

Does whs.js support to import obj and mtl files with image resource? If yes, is there anyone can guide me how to use WHS.Importer to add those into WHS.App?

Thank you!

Version:

• v2.1.9

Issue type:

• Bug
• Proposal/Enhancement
• [X ] Question
• Discussion

---

Desktop

• [X ] Chrome

[sasha240100]

Hey, @jyy1082 , sorry for delayed answer.
TL;DR: It's possible, and here's how:

Importing obj

const object = new WHS.Importer({
  loader: new THREE.OBJLoader(), // you need to provide obj loader there
  // ... 
});

Importing mtl

You may write your own module, which can be reusable then, but the simplest way is to use three-mtl-loader and then:

mtlLoader.load('model.mtl', function(matl) {
  const object = new WHS.Importer({
    material: matl
    // ... 
  });

  // ...
});

And the final stage, add this to app:

object.addTo(app);

[jyy1082]

Hi,
Thanks for your replay!
My obj and mtl files are for one model. Can I import them together as a object using one WHS.Importer?

[sasha240100]

multiple obj files, right?

…

On Wed, Dec 27, 2017 at 8:20 PM jyy1082 ***@***.***> wrote: Hi, Thanks for your replay! My obj and mtl files are for one model. Can I import them together as a object using one WHS.Importer? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#363 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHTX1XTFSSHPdFDxae5vR1d0Husnf1BGks5tEoppgaJpZM4RL3GU> .

[jyy1082]

I mean one obj and one mtl files together for one model.

https://www.learnthreejs.com/load-3d-model-using-three-js-obj-loader/

This is the way to use THREEJS to implement. How should I use WHS to do that? Thanks.

[sasha240100]

@jyy1082 See the code above, it's pretty similar with what you need

[jyy1082]

I will try it. Thanks again!

[hirako2000]

does it work @jyy1082 ?

[antoniocapelo]

I'm also struggling a bit with this.
This snippet works when using with vanilla ThreeJS loader:

        var loader = newTHREE.OBJLoader();
        loader.load( 'o.obj', ( object ) => {
            this.scene.add( object );
        });

However, when doing the 'same' thing with WHS Importer:

        new WHS.Importer({
            url: 'o.obj',
            loader: new OBJLoader(),

            parser(geometry, material) { // material comes as undefined since i'm not loading any .mtl file
                return new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({
                    color: 0xff0000,
                }));
            },

            position: [0, 100, 0]
        }).addTo(this.app);

I got an error in a three.module.js codebase TypeError: Cannot read property 'center' of undefined at Sphere.copy (three.module.js?8bc5:8345)

Currently I'm using the vanilla approach but would like how to integrate better with WhiteStorm.
Cheers

[sasha240100]

@antoniocapelo, since you’ve moved to OBJLoader, your parser() accept other arguments.

In three.js you have: loader.load(‘o.js’, parser); and in your code instead of parser you have an arrow function with object as input data. Same in whs.

parser arguments:
JSONLoader: (geometry, material)
OBJLoader: (object)

Should look like this:

parser(object) {
  return parser;
}

[sasha240100]

parser(object) {
  return object;
}

Correct one. (made a typo in my prev msg)

[antoniocapelo]

Sorry for the delay @sasha240100 ! I tried what you described and it does work (not when loading the .mtl file at the same time though — But the 'vanilla' way I described is looking good until now, so that's covered).

Thanks!

[noahcoetsee]

@sasha240100 I am once again volunteering myself to create a more permanent module for loading these models in (unless someone's already done it?).

[sasha240100]

I could share MTLModule source with you and maybe we could easily combine it with obj

…

On Fri, Mar 2, 2018 at 4:41 PM Noah ***@***.***> wrote: @sasha240100 <https://github.com/sasha240100> I am once again volunteering myself to create a more permanent module for loading these models in (unless someone's already done it?). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#363 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHTX1X4mT_vSZplmzAPawJyC-TiQtmXDks5taVolgaJpZM4RL3GU> .

[noahcoetsee]

Yeah, that sounds great! Where's the source?

[sasha240100]

@thecodecrafter Sorry for late response. I wasn't able to find the source code (probably lost it because of not using git for that project). I could help you in development, just point me

[noahcoetsee]

Ok, I will try to remember to do this in the near future. My programming world is a hellish nightmare of projects (abandoned and current) everywhere right now. Will return when ready, sir! ;)

[zardilior]

This issue should be closed as it looks solved

[hirako2000]

Agreed @zardilior but it would be nice to add an example to illustrate how to do it, anyone volunteers to add a simple example?

[noahcoetsee]

I'm unable to at the moment, as I'm super busy with school. I'll get back to you during late December!