CODEWITHSUNDEEP
3dthree.js
bartosz.baczek
bartosz.baczek

Reputation: 1516

three.js - model after being mirrored (flipped) doesn't render appropriately

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.

Upvotes: 0

Views: 727

Answers (1)

Falk Thiele
Falk Thiele

Reputation: 4494

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.

Upvotes: 2

Related Questions