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
9

THREE.Geometry is deprecated now
What to do?

10

@Samir_Rana
Uset BufferGeometry, BufferAttribute and their methods (.getX, .getY, .setXYZ etc).

Vertices’ coordinates: geometry.attributes.position.
UVs: geometry.attributes.uv (if you don’t have it in your geometry, then add it with .setAttribute())

Depends on the type of your geometry - indexed or non-indexed - use geomery.index or geometry.attributes.position directly. A face defined by a tripled of vertices (again, by .index or .attributes.position).