Create custom .OBJ / .MTL file and render it with three.js

1
votes

I tried to create a simple blender model, export it to .obj/.mtl and render it with three.js. But something doesn't work. I downloaded (and uploaded) the complete official three.js-demo. The objmtl-loader works fine. With the original models.

But if I create a new file in blender, import the original obj-model (from the demo), then add a simple cone and export it again to obj, on my demo-page everything will be shown except my cone.

I compared every simple param (cone <-> imported model) - no difference.

My demo-page

My blender-file

What do I have to do to get a render-able obj-model-export from blender?

(I tried multiple file formats, but for my usecase Wavefront (obj) is the best)

1
javascriptthree.jsexportblender
Sorry, but I can't post the content of my .blend-file (can I?). The code of my demo-page is just the default-threejs-javascript, where my .obj is loaded. [link] (webgl.pauly.io/webgl_loader_obj_mtl.html) I think the problem is my blender-file... – pauly.io
Your cone isn't triangulated (at least at the bottom), that would be my first thought. You can select cone, toggle edit mode, select all, and Ctrl + T or Mesh > Faces > Triangulate faces to fix it. Or select Triangulate faces on OBJ export – Darryl_Lehmann

1 Answers

1
votes

Indeed, it must be something with your Blender export.

Not sure how they play exactly but changing these settings in Blender, I can see your Cone:

  • In Export > Wavefront, check Objects as OJB Groups
  • Select the Cone, Edition mode, Make Normals Consistent

I understand the first change the type of the Cone from Object3D to Mesh, and the second let the texture to be placed on it.

Hope it helps