Apply texture to custom shape

Questions
#1

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:

test
test1280×1604 217 KB

the generated shape:
Screenshot 2020-12-23 175727
Screenshot 2020-12-23 175727808×685 3.63 KB

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

#2

This may put you on a right track.

1 Like
#3

i have been trying for two days no success until now

#4

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
#5

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

#6


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
#7

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

#8

You’re welcome :beers:

1 Like