Set texture for custom shape

Questions
1

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

troublesImage1
troublesImage11560×975 261 KB

Please help me with this
Thank you

1 Like
2

It is unclear what exactly is your problem. Adding a texture to a shape is as straightforward as adding a texture to any other object. Something like this:

var flapPath = new THREE.Shape(); // note it is Shape, not Path
    :

var geometry = new THREE.ShapeGeometry( flapPath ),
    texture  = new THREE.TextureLoader().load( '....jpg' ); 
    material = new THREE.MeshBasicMaterial( {map: texture} ),
    object   = new THREE.Mesh( geometry, material );

Here is your shape with another texture:

image
image911×518 90.1 KB

2 Likes
3

thank for your help, it working great

1 Like