Object is Rendered as Wireframe

Hi,

I’ve been using a tool called React-Planner for a project, https://cvdlab.github.io/react-planner/, and have encountered an issue with how one of my objects is being loaded, as instead of being loaded in with faces it is instead loaded in as a wireframe.
image
React-Planner apparently uses the three.js obj and mtl loader as standard so I was wondering if anybody here would understand what could cause this issue as I’m unfamiliar with three.js myself.

As you can see in the image it’s only the complex door part of the model that doesn’t get loaded properly and the rest of the object is fine.

This problem apparently doesn’t stem from the mesh itself as the object appears normal in Blender and paint3D loaded the model correctly.

image

image

Any help with getting this sorted would be appreciated, I’ve attached my Blender file in case it is of use.

SBUpracticeWcleanup.blend (740.6 KB)

I load this model in threejs. Its looks normal
image

Would that be the same as three webGL? If so I’m stumped as to why it would work everywhere else besides this one place, thanks for your input though.

The problem is that THREE.OBJLoader interprets your door as THREE.LineSegments and not as THREE.Mesh. This happens since the respective object Cube.001_Cube.002 contains face and line definitions at the same time which is not supported by THREE.OBJLoader. If I remove the line data from the OBJ file, it loads fine.

There are three options now. First, you can try to adjust your modeling in Blender in order to ensure to only export meshes. Second, you can file an issue at the github repo of three.js since other tools like Sketchfab or QuickLook file preview can parse your file correctly. Third, you might want to switch to a different format like glTF since it is much better than OBJ. More information about that topic right here.

3 Likes

Good stuff, thanks a million, I’ll look into those avenues and cheers for your help

check your obj file by viewing it in a text editor, if there is something with “l” remove that works perfect

eg: remove all “l 198 203, l 203 202” from obj