1
votes

I'm working a simple proof of concept. This involves exporting a simple textured model from Blender into the an .obj model file, an .mtl material file, and some .jpg texture images. My model is a single plane with a grass texture on the top of it.

The problem I'm having is the grass texture isn't loading. I'm getting console messages and the JS code looks to be actually loading the image file, but it's not showing up. The plane is a green colour, which I don't understand, since I havent defined colours anywhere. I'm not sure if this is a rendering problem.

I had a look at the examples ThreeJS provides, but they're slightly different than the files I'm getting from blender. The obj loader example doesn't include any .mtl files. The obj + mtl loader example is using some .dds files for the models, which I don't have. I had a quick look into it and it has something to do with direct x.

My example is up at https://www.raydowe.com/three/

Does anyone have an example of how to load .obj, .mtl, and .jpg assets into ThreeJS?

1

1 Answers

1
votes

so, this is easy you need texture coordinate to map the texture onto the vertices. In the *.obj it is represented into "vt"

https://github.com/koolkap/Obj-Mtl-Loader

This is your working sample

https://github.com/koolkap/Obj-Mtl-Loader/blob/master/obj/scene.obj

this is *.obj required. feel free to ask