Hi,
I created a Mesh with BufferGeometry. It consists of 32 triangular faces.
When I apply a material it looks like this:
It seems as if every face has its own brightness but I would like to have a homogeneous presentation.
What could be the reason?
The arrangement of the vertices is as follows:
You geometry is not properly triangulated.
E.g. it is not valid how face 2 is connected to face 1 and 3. It is necessary that the vertices 11 and 10 are connected to the upper triangles. The same error appears at other places in the geometry.
Also keep in mind that a face is always a triangle in the WebGL world. So your listing of face definitions is not valid, too.
@Mugen87
Thanks for the tip, I didn’t know that.
Fixing the geometry in the manner described means I have to add a lot more vertices.
If I e.g. add the vertices 24 and 25 I also need a connection between 24 and 17, right?
OK, I decided to try another way. Instead of one mesh with several faces I will create four meshes with just 12 triangles.
The face definition is as follows.
The result has, more or less, the same problem.
The material definition is just:
const material = new THREE.MeshPhysicalMaterial({ color: 0x383e42 });
What am I doing wrong?
If I use an ExtrudeGeometry in the same scene and lightning everything is fine.
I have no idea what’s wrong with the mesh.
Everything’s okay, but normals. You use indexed geometry, normals are per vertex, thus for each vertex you’ve got the normal, that is the average result of normals of all faces that the vertex belongs.
If I would want to build these parts of 45 degs cuts, I’d go with box geometry, changing its vertices.
Finally I found a solution/workaround.
I defined a mesh for each side and added it four times to the scene.
This time I used a non-indexed mesh and everything is fine.
The non-indexed mesh solution means a lot of writing as I have to define 36 vertices instead if 14.
It would be very helpful to know what was wrong with my last approach and how I could manage the job with a index mesh.
I was looking for a simple sample that describes e.g. creating a cube with an index mesh but I could not find anything.
Would be nice if anybody would have such an example.
BoxGeometry does all the job for you. It has 24 vertices, that forms 6 sides with 4 verts per side, and it’s indexed.
Thanks for you help and the sample with the box.
The understand the explanation with the average normals, that makes sense.
If I would use the index way is it possible to define the normals manually?
Yes, you can change normal attribute manually, but it’s still per vertex, so you’ll likely get wrong visual result.
Thanks I will have a look.
Maybe this simple example from the collection will help you to understand the indices and normals?
BufferGeometryNormals
