Apply texture to custom shape

am new to threejs
i created a shape start from am image now i want to apply this image to this shape
The source image:


the generated shape:

please guide me to any tutorial or references that may help me
Thank you

This may put you on a right track.

1 Like

i have been trying for two days no success until now

Would be great to provide/show the code of what you tried.
An editable live code example is even better. (jsfiddle, codepen, github repo etc.)

1 Like

That what i have done until now
Beta1 (codepen.io)


If you change assignUVs() to this:

function assignUVs(geometry) {
    geometry.faceVertexUvs[0] = [];
    let box = new THREE.Box3().setFromPoints(geometry.vertices);
    let boxSize = new THREE.Vector3();
    box.getSize(boxSize);
    geometry.faces.forEach(function(face) {

        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.x - box.min.x) / boxSize.x, (box.max.z - v1.z) / boxSize.z),
            new THREE.Vector2((v2.x - box.min.x) / boxSize.x, (box.max.z - v2.z) / boxSize.z),
            new THREE.Vector2((v3.x - box.min.x) / boxSize.x, (box.max.z - v3.z) / boxSize.z)
        ]);

    });
    geometry.uvsNeedUpdate = true;
}

You’ll get a nicely textured shape:
изображение

1 Like

Wow that is awesome it works i really appreciate that i was fighting with it for a days Thank you , you are my hero <3

You’re welcome :beers:

1 Like