# Reflection looks weird after updating geometry vertices

**URL:** <https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 28, 2020, 12:01pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214 "2020-10-28T12:01:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bossie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bossie/32/14371_2.png) [@Bossie](https://discourse.threejs.org/u/Bossie)\
**Post date:** [October 28, 2020, 12:01pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/1 "2020-10-28T12:01:14Z")

</div>

Hey all,

When I update the bottom vertices of a geometry the reflection will look weird:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c528a20923045b342652b72e3cb6a118f519d588.jpeg)

This is how it should look like:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/0fe45d8407731292414ab914127d92f8437b7835.jpeg)

This is the code which moves the vertices:

```
for (let vertex of wallGeometry.vertices) {
    if (vertex.y === 0) {
        vertex.y = buildingSettings.wall.bottomOffset;
    }
}
```

---

<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:** [October 28, 2020, 12:41pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/2 "2020-10-28T12:41:49Z")

</div>

If you update vertices, it might be necessary to recompute normal data. Try it with `computeVertexNormals()` and/or `computeFaceNormals()`.

---

<div class="post-metadata">

**Author:** ![Bossie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bossie/32/14371_2.png) [@Bossie](https://discourse.threejs.org/u/Bossie)\
**Post date:** [October 28, 2020, 12:51pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/3 "2020-10-28T12:51:30Z")

</div>

I have tried both, but it didn’t make any difference.  
I am using Three.js version 121.1

```
const wallShape = shape;
const wallExtrudeSettings = { depth: buildingSettings.wall.thickness, steps: 1, bevelEnabled: false };
const wallGeometry = new THREE.ExtrudeGeometry(wallShape, wallExtrudeSettings);
for (let vertex of wallGeometry.vertices) {
    if (vertex.y === 0) {
        vertex.y = buildingSettings.wall.bottomOffset;
    }
}

wallGeometry.computeFaceNormals();
wallGeometry.computeVertexNormals();

const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
wallMesh.name = positionName + ' wall';
wallMesh.castShadow = true;
wallMesh.receiveShadow = true;
objGroup.add(wallMesh);
```

---

<div class="post-metadata">

**Author:** ![Bossie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bossie/32/14371_2.png) [@Bossie](https://discourse.threejs.org/u/Bossie)\
**Post date:** [October 28, 2020, 1:02pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/4 "2020-10-28T13:02:53Z")

</div>

When I disable the normal map everything seems fine:

```
const wallMaterial = new THREE.MeshPhongMaterial({
    color: new THREE.Color(0x3b505f).convertSRGBToLinear(),
    wireframe: false,
    // normalMap: normalMapTexture,
    shininess: 50,
    transparent: true,
    opacity: 1,
});

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/87cb46283b15ca1c95402ca5f26850dbfe35ae6b.png)

---

<div class="post-metadata">

**Author:** ![Bossie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bossie/32/14371_2.png) [@Bossie](https://discourse.threejs.org/u/Bossie)\
**Post date:** [November 2, 2020, 4:04pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/5 "2020-11-02T16:04:56Z")

</div>

With this normal map the issue is even better visible ☹

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/dfc38bbc1e9510c1962043b785be030ea550ecb6.png)

This is how it should look like:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/03f0eb3f6228d3e3d79069b841f5f784dc2948ed.png)

---

<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:** [November 2, 2020, 4:12pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/6 "2020-11-02T16:12:38Z")

</div>

If you update the vertices, you probably have to update uv coordinates, too. Otherwise textures will look stretched.

---

<div class="post-metadata">

**Author:** ![Bossie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bossie/32/14371_2.png) [@Bossie](https://discourse.threejs.org/u/Bossie)\
**Post date:** [November 2, 2020, 7:05pm UTC](https://discourse.threejs.org/t/reflection-looks-weird-after-updating-geometry-vertices/20214/7 "2020-11-02T19:05:56Z")

</div>

Cheers, fixed it by adding the following code:

```
for (const uvArray of wallGeometry.faceVertexUvs[0]) {
    for (const uv of uvArray) {
        if (uv.y === 0) {
            uv.y = buildingSettings.wall.bottomOffset;
        }
    }
}
```