# Material not reacting to flatShading

**URL:** <https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957>\
**Category:** Questions\
**Tags:** flatshading, phong-material\
**Created:** [March 15, 2022, 9:38am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957 "2022-03-15T09:38:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![manu](https://avatars.discourse-cdn.com/v4/letter/m/7c8e57/32.png) [@manu](https://discourse.threejs.org/u/manu)\
**Post date:** [March 15, 2022, 9:38am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957/1 "2022-03-15T09:38:08Z")

</div>

Hi all!

I can’t get flatShading turned off… What am I doing wrong?

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/jsfiddle_lyke_be/k6cvgsbx/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<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 15, 2022, 10:14am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957/2 "2022-03-15T10:14:43Z")

</div>

`flatShading` is `false` by default. Setting it to true means flat shaded normals are computed in the shader.

However, you can’t use this property to _prevent_ flat shaded normals. It happens in your fiddle because the faces of your geometry share no vertices which means `computeVertexNormals()` can’t produce smooth normals. However, you can achieve your goal by using [BufferGeometryUtils.mergeVertices()](https://threejs.org/docs/index.html?q=bufferge#examples/en/utils/BufferGeometryUtils.mergeVertices) first before computing the normals.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/vxpfobr9/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![manu](https://avatars.discourse-cdn.com/v4/letter/m/7c8e57/32.png) [@manu](https://discourse.threejs.org/u/manu)\
**Post date:** [March 15, 2022, 11:07am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957/3 "2022-03-15T11:07:24Z")

</div>

Thank you for your prompt reply.

There are distortions were the normals differ heavily on the interfaces of spout / belly and handle / belly. What would be the correct way of defining this model so that I won’t need [**BufferGeometryUtils.mergeVertices()**](https://threejs.org/docs/index.html?q=bufferge#examples/en/utils/BufferGeometryUtils.mergeVertices) ?

---

<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 15, 2022, 11:13am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957/4 "2022-03-15T11:13:43Z")

</div>

imo you should prepare models in blender before you use them on the web. fixing normals by code seems a lot more complex than running a few modifiers in blender and then having a clean, reduced, compressed file that loads quickly and can readily be used.

---

<div class="post-metadata">

**Author:** ![manu](https://avatars.discourse-cdn.com/v4/letter/m/7c8e57/32.png) [@manu](https://discourse.threejs.org/u/manu)\
**Post date:** [March 15, 2022, 11:31am UTC](https://discourse.threejs.org/t/material-not-reacting-to-flatshading/35957/5 "2022-03-15T11:31:15Z")

</div>

Thank you for your suggestion, but I have plenty of items stored as Geometry and need to convert to BufferGeometry… I want to do it the correct way…

> [@THREE.Geometry will be removed from core with r125](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401):
>
> The upcoming release r125 will contain a major, potentially breaking change. The class THREE.Geometry will be no longer part of the core but moved to jsm/deprecated/Geometry.js. It will only be available as an ES6 module and not as a global script. What does that mean for me? If you are loading your assets with one of the official loaders like GLTFLoader or procedurally generate geometry data with THREE.BufferGeometry, this change won’t affect you. If you are using THREE.Geometry, please note …