Buffer geometry and normal map not working


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;

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

                                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

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

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


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

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;

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

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?


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:

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

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…