0

I have loaded two *.obj models to my application. They are the same, except the fact, that one of them was 'mirrored' from another. enter image description here

Picture number one presents original model, and picture number two is that mirrored one. The problem occurs in that second one.

When you look closely, you can see that door-knob doesn't render appropriately.enter image description here

Why is that so? In Blender both of them looks fine.

I am rendering them using three.js.

bartosz.baczek
  • 1,567
  • 1
  • 17
  • 32

1 Answers1

2

Looks like mirroring in Blender is also flipping the faces of your mesh. Looking closely you can see its not just the doorknob, its everywhere on the model.

You can compensate this by changing the material with material.side = THREE.BackSide; or THREE.DoubleSide.

Another solution is to mirror your model in Three.js by setting a negative scale on the axis you want to mirror. You want to flip on the X axis i guess, then do it like this: mesh.scale.set( -1, 1, 1 );

Edit: consider the warning from West Langley in the following comments when applying a negative scale.

Falk Thiele
  • 4,424
  • 2
  • 17
  • 44
  • I didn't 'flipped' ( ;) ) them in three.js - I did that in blender using mirror function. Also, even if I mirror those doors first and apply texture after problem still exists. – bartosz.baczek Jul 27 '15 at 10:48
  • What happens when you change the material side to DoubleSide? – Falk Thiele Jul 27 '15 at 10:49
  • I don't use material nowhere - i import texture as *.mtl and don' t assign it to model nowhere in my code. – bartosz.baczek Jul 27 '15 at 10:52
  • When loading a model, the loader generates materials out of your mtl file. See http://stackoverflow.com/a/31642463/4977165 – Falk Thiele Jul 27 '15 at 10:59
  • I see. So if i don't add any code about how texture should be applied to the model it is done somehow by default and I don' t have full control on it. And if I have more complex model I need to add that code, that will tell how to apply texture (just like in my example). Am I right? – bartosz.baczek Jul 27 '15 at 11:08
  • The material is assigned to the object by the loader automatically, but you can access it at any time. If you dont want to alter the material, you could try other tricks- I will update my answer. – Falk Thiele Jul 27 '15 at 11:12
  • Thank you a lot. I am simply following this example: http://threejs.org/examples/webgl_loader_obj_mtl.html and I didn' t find there anything with changing material, so I thought it isn' t needed. – bartosz.baczek Jul 27 '15 at 11:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84363/discussion-between-falk-thiele-and-bartosz-baczek). – Falk Thiele Jul 27 '15 at 11:17
  • 2
    Warning: see http://stackoverflow.com/questions/16824650/three-js-how-to-flip-normals-after-negative-scale/16840273#16840273 – WestLangley Jul 27 '15 at 16:03