Textures mesh transparent parts


This is my first time ThreeJS, I’ve just been following tutorials and problems on github, stackoverflow and here.

I’m doing this site for a game that will display all the weapons and armors, but I’m coming across a problem where the textures are linking inside instead the outside making the parts “transparent”.

This is a working example: https://karbust.me/armadura_nobita/index4.html

From what I was told by a person that understands of 3d modeling this is a problem with the mesh, and gave me this prints:

In fact this “fix” works, the texture is presented correctly but the object gets huge, but I can’t do this to on all armor objects (there’s near 100 of them and I have practically 0 knowledge about the topic).

I was wondering if there’s any way to fix this “in code” with ThreeJS. I’m importing OBJ and MTL (converted from FBX) with DDS textures.

Thank you

I’m afraid this is a modeling issue and fixing it in code is not recommended. The entire model should have consistent normals otherwise it is not authored correctly.

If you still want to fix this in code, just add THREE.DoubleSide to the side property of the asset’s materials. However, this might have a negative impact on the performance.

Also consider to export/convert your assets to glTF instead which is a more modern alternative to OBJ/MTL.

1 Like

Performance is not a big issue since I’ll only have at most 2 objects (if I can figure out how to place the hair properly) without custom animations, only spinning.

About glTF, is there an automated way to convert the models? The original models are in gr2 (Granny2), I’m converting them to FBX with a tool made by someone I know, and then I’m using assimp to convert to OBJ (that model was converted from FBX to OBJ directly from 3ds Max 2018).

I’ll check out that DoubleSide option.

Thank you

EDIT: the DoubleSide worked :slight_smile: Thank you

Maybe you give the following tool a try:

More information about loading glTF in three.js in this guide:


1 Like