Add Texture to polygon geometry shap

Questions
, , ,
1

Hi,

I’m trying to create a polygon shape geometry and it has been created successfully, the problem here is that I can’t put texture on it I tried a lot but it didn’t work

const texture = new THREE.TextureLoader();
texture.needsUpdate = true;

const polygonShap = new THREE.Shape(PolygonGeometry(6, new THREE.Vector2(100, 100), 50));
const geometry = new THREE.ShapeGeometry( polygonShap );
const material = new THREE.MeshBasicMaterial( { map: texture.load('./profile.png'), side: THREE.DoubleSide});
const mesh = new THREE.Mesh( geometry, material ) ;
mesh.position.x = -170;
mesh.position.y = -20


scene.add( mesh );


function PolygonGeometry(sides, location, radius) {
    const geo = [];
    for (var pt = 0; pt < sides; pt++) {
        // Add 90 degrees so we start at +Y axis, rotate counterclockwise around
        var angle = (Math.PI / 2) + (pt / sides) * 2 * Math.PI;

        var x = radius * Math.cos(angle) + location.x;
        var y = radius * Math.sin(angle) + location.y;

        // Save the vertex location
        geo.push(new THREE.Vector2(x, y));
    }

    geo.push(geo[0]);
    return geo;
}

polygon
polygon657×527 7.28 KB

2

Looks like you’ve got no UV coordinates on your geometry. Without them you can’t apply texture.

1 Like
3

Here is an approach to set UV on ShapeGeometry:

1 Like
4

Maybe this helps for further? How to determine uv values - examples from the collection .

BufferGeometryNonIndexed
BufferGeometryIndexed

fisheye

RoundedRectangle

TextureOnCreatedObject

SphereWithoutTrigonometry

1 Like
5

Thank you, this has helped me a lot.