# Reflector reflects what's behind the mesh

**URL:** <https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279>\
**Category:** Questions\
**Tags:** reflector\
**Created:** [March 18, 2023, 6:46pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279 "2023-03-18T18:46:24Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 18, 2023, 6:46pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/1 "2023-03-18T18:46:24Z")

</div>

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?

 ![screenshot](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/a/4a9a79e3ec6bbb08c42d05d3133ca0caa2366170.png)  
 ![screenshot-expected](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0a9e9f5bee5205157a329cf987904087da82115c.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2023, 9:45am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/2 "2023-03-20T09:45:38Z")

</div>

Any chances to demonstrate the issue by modifying the official `Reflector` example? [three.js webgl - mirror](https://threejs.org/examples/webgl_mirror)

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [March 20, 2023, 11:02am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/3 "2023-03-20T11:02:52Z")

</div>

@Mugen87 could it be related to a UV map that has the mesh applied?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2023, 12:10pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/4 "2023-03-20T12:10:31Z")

</div>

I can’t really comment to this without being able to debug the issue.

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 20, 2023, 3:31pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/5 "2023-03-20T15:31:57Z")

</div>

@Mugen87 I’ve extracted the mirror here

> **[Mirror test - CodeSandbox](https://codesandbox.io/s/mirror-test-zfn6n5)**
>
> Mirror test by heshhassan using three

The mirror path: ‘/mirror.gltf’

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2023, 4:48pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/6 "2023-03-20T16:48:39Z")

</div>

Um, what is now the error in the scene? At first glance, everything looks as expected.

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 20, 2023, 5:08pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/7 "2023-03-20T17:08:14Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/5/c54182bb8845e1194dd1f50273ff09112d174b5d.png)  
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.

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 21, 2023, 9:08am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/8 "2023-03-21T09:08:06Z")

</div>

I’ve updated the code after @JuanP refactored the mesh.

> **[Mirror test - CodeSandbox](https://codesandbox.io/s/mirror-test-zfn6n5?file=%2Fsrc%2Findex.js)**
>
> Mirror test by heshhassan using three

@Mugen87 As you can see the mirror in the middle and reflects the yellow mesh instead of the red one.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 21, 2023, 10:06am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/9 "2023-03-21T10:06:02Z")

</div>

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:

```javascript
gltf.scene.children[0].geometry.rotateY(Math.PI * -0.5);

```

and later

```javascript
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).

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 21, 2023, 10:28am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/10 "2023-03-21T10:28:48Z")

</div>

Thanks so much @Mugen87 for your help. That’s really appreciated!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 21, 2023, 12:14pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/11 "2023-03-21T12:14:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 22, 2023, 1:02pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/12 "2023-03-22T13:02:29Z")

</div>

@Mugen87 Also, Is there a way to check if the geometry is flipped or not?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 22, 2023, 2:03pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/13 "2023-03-22T14:03:10Z")

</div>

> [@drcmda](#):
>
> is this something that could be fixed in reflector core to make it more generic?

Ideally yes.

> [@Hesham\_Hassan](#):
>
> Also, Is there a way to check if the geometry is flipped or not?

I’m not sure how you want to check this? Are you referring to normals?

---

<div class="post-metadata">

**Author:** ![Hesham\_Hassan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesham_hassan/32/34563_2.png) [@Hesham\_Hassan](https://discourse.threejs.org/u/Hesham_Hassan)\
**Post date:** [March 23, 2023, 11:28am UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/14 "2023-03-23T11:28:46Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 23, 2023, 1:45pm UTC](https://discourse.threejs.org/t/reflector-reflects-whats-behind-the-mesh/49279/15 "2023-03-23T13:45:41Z")

</div>

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.