I have a custom geometry for an interior car mirror that i am working on. the issue is when i add the mirror geometry to Reflector object. it reflects whats behind the mirror. not what’s in front of it (see screenshot). Tried to scale/rotate but doesn’t work. I’ve also tested the Reflector object and it works fine with other standard geometries (see screenshot). What could be wrong in my mirror geometry that make the reflector works this way?
Any chances to demonstrate the issue by modifying the official Reflector example? three.js webgl - mirror
@Mugen87 could it be related to a UV map that has the mesh applied?
I can’t really comment to this without being able to debug the issue.
1 Like
@Mugen87 I’ve extracted the mirror here
The mirror path: ‘/mirror.gltf’
Um, what is now the error in the scene? At first glance, everything looks as expected.
If you zoom out you will see the camera mesh, which should be in the reflector object instead of the planeGeometry. but it doesn’t work.
I’ve updated the code after @JuanP refactored the mesh.
@Mugen87 As you can see the mirror in the middle and reflects the yellow mesh instead of the red one.
This one is tricky.
You have encountered an issue in Reflector and I don’t know yet how to fix it. But as a workaround, make sure that your geometry has a default forward vector (0,0,1). Meaning when you import it, it should look along the positive z-axis. This is similar to how PlaneGeometry and other built-in geometries work. It’s best to fix this in Blender or another DCC tool.
You can also fix this in code by rotating the geometry back to the default forward direction and then rotate the mesh to the orientation you want. Meaning:
gltf.scene.children[0].geometry.rotateY(Math.PI * -0.5);
and later
mirrorFront1.rotation.y = Math.PI * 0.5;
The problem is how uv coordinates are derived in the vertex shader of Reflector. This logic breaks if the geometry is not oriented towards (0,0,1).
2 Likes
Thanks so much @Mugen87 for your help. That’s really appreciated!
1 Like
is this something that could be fixed in reflector core to make it more generic? i’ve been running into this a lot, and i’ve been fixing it in blender by baking three.planegeo-like z+ orientation and then rotate y down PI / 2, but it’s not obvious.
@Mugen87 Also, Is there a way to check if the geometry is flipped or not?
Ideally yes.
I’m not sure how you want to check this? Are you referring to normals?
@Mugen87 I mean something like
gltf.scene.children[0].geometry.flipped ? rotateY(Math.PI * -0.5) : do nothing
Because if i applied the rotation trick not sure with different other car models will work or not.
Okay, I see. Unfortunately, it’s not possible to analytically determine what side of a 3D model is considered to be the “front”. This is a design question and should be solved in a DCC tool.