Texture stretching in Chorme but fine in FF!

Questions
1

Hi everyone.I just a newbie and researching about threejs. I create a roof by ExtrudeGeometry and apply texture on it,
Problem : texture was stretching in Chrome and still fine in FF
I was use method mapping uv, I just find it on internet

var geometry = extrudedRoofGeometry;
    geometry.uvsNeedUpdate = true;
    geometry.faceVertexUvs[0] = [];

    geometry.faces.forEach(function (face) {

        var components = ['x', 'y', 'z'].sort(function (a, b) {
            return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
        });

        var v1 = geometry.vertices[face.a];
        var v2 = geometry.vertices[face.b];
        var v3 = geometry.vertices[face.c];

        geometry.faceVertexUvs[0].push([
            new THREE.Vector2(v1[components[0]], v1[components[1]]),
            new THREE.Vector2(v2[components[0]], v2[components[1]]),
            new THREE.Vector2(v3[components[0]], v3[components[1]])
        ]);

    })

In Firefox

pic1
pic1.jpg759×650 40.7 KB

In Chorme

pic2
pic2.png681×556 67.9 KB

Please, give me some advice. Thanks,

2

this part looks suspect to me. I would check what UV values you generate there. I don’t understand what’s the idea behind this piece of code, since you’re copying vertex positions into UVs, UVs should be clipped to 0-1 range typically, so whatever hack this is - it’s not a good practice to go this way.

One possibility - you might have negative UVs.