Set texture for custom shape

Question

I’m new to three.js, and I have an issue like this I have a custom shape like this

    // Create a custom flap path
    const flapPath = new THREE.Path();
    flapPath.moveTo(0, 0); // 0
    flapPath.lineTo(12, 50); // 1
    flapPath.lineTo(17, 70); // 2
    flapPath.lineTo(20, 77); // 3
    flapPath.lineTo(25, 85); // 4
    flapPath.lineTo(30, 90); // 5
    flapPath.lineTo(38, 95); // 6
    flapPath.lineTo(43, 97); // 7
    flapPath.lineTo(48, 98); // 8
    flapPath.lineTo(55, 100); // 9
    flapPath.lineTo(145, 100); // 10
    flapPath.lineTo(152, 98); // 11
    flapPath.lineTo(157, 97); // 12
    flapPath.lineTo(162, 95); // 13
    flapPath.lineTo(170, 90); // 14
    flapPath.lineTo(175, 85); // 15
    flapPath.lineTo(180, 77); // 16
    flapPath.lineTo(183, 70); // 17
    flapPath.lineTo(188, 50); // 18
    flapPath.lineTo(200, 0); // 19
    flapPath.closePath(); // Close the path
    const flapShape = new THREE.Shape(flapPath.getPoints());
    const flapGeometry = new THREE.ShapeGeometry(flapShape);

and the canvas for texture let assume like this

Please help me setting texture with this Thank you

Answer 1

Applying a texture on a ShapeGeometry can be tricky if you require exact texture mapping. The texture is usually define like so:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.005, 0.005 );

Using these settings with your shape and a placeholder texture provides acceptable results like demonstrated in the following live example: https://jsfiddle.net/5zknr9s2/2/

However, the texture coordinates might no be precise enough for your use case. If so, I suggest you create the mesh and apply the texture in Blender, export to glTF and import the asset via THREE.GLTFLoader.