Meshes not shading smooth when using React

Questions
,
1

Hi, having an issue with objects not shading smooth when using React. I created my scene in blender, making sure to set objects to shade smooth, and exported it to a glb file. Here’s what it looks like in blender:

blender.PNG
blender.PNG986×543 34.9 KB

And here is what the same scene looks like on my website:

site.PNG
site.PNG1345×755 85.2 KB

I found some stuff on shading smooth in vanilla Three but nothing on implementing it in React. Here is a sample of my code:

<mesh
                castShadow = {true}
                receiveShadow = {true}
                geometry={nodes.blue_worm.geometry}
                material={materials.Material}
            />
2

Are all of the faces connected? In blender if you select the mesh, go to edit mode tap the “a” key to select all vertices then tap the “m” key and merge by distance do you see the vertices count go down? If so try re exporting your model after this and re importing into your r3f app…

1 Like
3

I went and checked and all vertices are merged

4

Any chance you can upload the glb file here to inspect or create a minimal live example with your setup on codesandbox? Essentially you’d want to do this…

const { nodes, materials } = useGLTF('url') 
materials.Material.flatShading = false

However flatShading is false by default for materials in three which leads me to believe there may be a problem with your model / material setup before exporting from blender…

1 Like
5

Same thought here.. perhaps in blender its using some weird material node setup?

I also notice the eyes are missing their eye dots. @ScramblesDD is the glb or gltf or blend file small enough to drag into a post here and we can take a look?

1 Like
6

wormpile.glb (1.5 MB)

Apologies because this is a relatively big project but it did upload so.

7

I did manage to fix the eye thing by replacing the material with MeshPhysicalMaterial btw. I didn’t get the impression that the material would export well from Blender to 3JS.

8

Give a try to this: three.js docs

1 Like
9

Thank you guys for all your help! I did manage to solve the problem - turns out I needed to triangulate my meshes in blender and make sure export tangents was checked so that my normal maps could work correctly.

1 Like