Buffer geometry and normal map not working

Questions
1

Hi,

When adding my normal map to a plane geometry, it appears fine, but from a BufferGeometry, nothing is shown:

  {
                        var spotLight = new DirectionalLight(0xffaaaa, 3);
                        spotLight.position.set(-18, 50, 78);
                        spotLight.lookAt(-9, 75);
                        spotLight.castShadow = true;
                        scene.add(spotLight);


                        const geometry = new PlaneGeometry(10, 10);
                        const material = //material variable
                        const cube = new Mesh(geometry, material);
                        cube.position.set(-67, 1, 130)
                        scene.add(cube);
                        }
                        {

                                const geometry = new BufferGeometry();
           
                                const vertices = new Float32Array([
                                        -1.0, -1.0, 1.0,
                                        1.0, -1.0, 1.0,
                                        1.0, 1.0, 1.0,

                                        1.0, 1.0, 1.0,
                                        -1.0, 1.0, 1.0,
                                        -1.0, -1.0, 1.0
                                ]);

                         
                                geometry.setAttribute('position', new BufferAttribute(vertices, 3));
                                const material = //material variable

                                geometry.computeVertexNormals();
                            
                                const mesh = new Mesh(geometry, material);
                                mesh.position.set(-87, 1, 130)
                                scene.add(mesh);
                        }

why the first version works fine and has the NM, but the second one not?

thanks

2

I think you need tangent for normal mapping. Try geometry.computeTangent() three.js docs.

The computation is only supported for indexed geometries and if position, normal, and uv attributes are defined.

So you would need to provide uv (and possibly indices too?) as well before run computeTangent

3

Thank you,

So, I have that code:

let uvs = new Float32Array(raw_data.length)

for (let x = 0, xs = r; x < xs; x += 6) {
       uvs[x] = 0.0; 
       uvs[x + 1] = 1.0;
       uvs[x + 2] = 1.0;
       uvs[x + 3] = 1.0;
       uvs[x + 4] = 1.0;
       uvs[x + 5] = 0.0;
 }

console.log(raw_data.length)
geometry = new BufferGeometry();
geometry.setAttribute('position', new BufferAttribute(raw_data, 3));
geometry.setAttribute('uv', new BufferAttribute(uvs, 2))

issue_texture
issue_texture422×525 33.6 KB

Now, I have my texture on MOST of the triangles

of the plane BUT it is perfect nonsense.

The problem is the above mapping will cause each triangle to have difference texture orientation.
On top of the picture you can even see that no texture is applied… wow…

My goal is to have my texture nicely laid on the surface, irrespective of the triangles
Any tips?

Thanks

Edit:
To be clear: I have a script generating those triangles. Inside three.js, I don’t use the indice version, just 3 consecutive array elements shaping a triangle.

Maybe I do it all wrong… I need some lights :slight_smile:

Edit2:
Tomorrow, I will try to give three the indices to see if it helps

Edit3
Ok, I need the indices to reference the uv coordinates which value is between 0 and 1. The uv map is a square and each triangle is a coordinate in that square. I think I get it right now. Seems logical now. Let’s try this tomorrow…