Sprite UV maping

Questions
1

Hi

I am struggling with the use of UV in sprite.geometry. Ultimately, I would like to have a lot of sprites on the stage using one texture (part of it). While in the case for a plane the uv change works as it should, for the sprite it always shows the whole texture

I modifiy sprite.geometry.attributes.uv.data.array to change items accordingly

	uv[3] = (nx / texAtlas.numX);
	uv[4] = ((ny / texAtlas.numY) + texAtlas.offset);
	uv[8] = ((nx / texAtlas.numX) + texAtlas.offset);
	uv[9] = ((ny / texAtlas.numY) + texAtlas.offset);
	uv[13] = (nx / texAtlas.numX);
	uv[14] = (ny / texAtlas.numY);
	uv[18] = ((nx / texAtlas.numX) + texAtlas.offset);
	uv[19] = (ny / texAtlas.numY);

nx,ny are position of the fragment on te texture atlas grid.
texAtlas.numX~Y are numbers of elements in grid
texAtlas.offset is grid size

finally, the sprite.geometry.uv settings are correct but you can still see the entire texture instead of its element

2

Are you able to demonstrate this issue with a live example?

Depending on when your are modifying the attribute data, it’s necessary to call sprite.geometry.attributes.uv.needsUpdate to true. Otherwise the buffer data on the GPU are not updated.

3

I’ve rewritten fragments of my code for example. the effect is more or less visible
https://jsfiddle.net/3pqvmdbs/

4

Hi!
Is this the result you’re looking for?
https://jsfiddle.net/prisoner849/3hnq09rz/

You need not a common offset, but separated for x and y

texAtlas.offsetX = 1 / texAtlas.numX;
texAtlas.offsetY = 1 / texAtlas.numY;

Instead of working directly with an interleaved array, it’s better to use .setxxx() functions of a buffer attribute to set values of desired items.

setSprUv(sprite.geometry.attributes.uv,0,1);
	
function setSprUv(uv,nx,ny){

    uv.setXY(0, nx * texAtlas.offsetX,                      ny * texAtlas.offsetY);
    uv.setXY(1,(nx * texAtlas.offsetX) + texAtlas.offsetX,  ny * texAtlas.offsetY);
    uv.setXY(2,(nx * texAtlas.offsetX) + texAtlas.offsetX, (ny * texAtlas.offsetY) + texAtlas.offsetY);
    uv.setXY(3, nx * texAtlas.offsetX,                     (ny * texAtlas.offsetY) + texAtlas.offsetY);
  
}
sprite.geometry.attributes.uv.needsUpdate=true;

The order of vertices you can find in the source code of THREE.Sprite(): https://github.com/mrdoob/three.js/blob/159a40648ee86755220491d4f0bae202235a341c/src/objects/Sprite.js#L26L39

5

Thanks for the answer. This actually solves the problem of an jsfiddle but after applying in my code, I still have the same effect. On the sprite you can see the entire texture even though its uv parameters are different.
for example, a sprite with uv parameters:
0: -0.5
1: -0.5
2: 0
3: 0
4: 0
5: 0.5
6: -0.5
7: 0
8: 0.0625
9: 0
10: 0.5
11: 0.5
12: 0
13: 0.0625
14: 0.0625
15: -0.5
16: 0.5
17: 0
18: 0
19: 0.0625
it still shows the whole texture even though it should be a 1/16 size slice.
I suspect that this is a matter of refresh parameters but sprite.geometry.attributes.uv.needsUpdate = true;
did not work

6

I am not sure, but these might be helpful to calculate UVs:

Geometry:

image
image.png985×616 21.9 KB

UV:

image
image.png997×539 37.5 KB

7

@Keworkian Any chance to see what and how you do in your project?

8

In this project I am creating a 3D view of concrete panels. Since the panels are not perfect cube, I had to create each of them according to their 8 corners. In the meantime, since we do not have any function to calculate UVs, I made it manually as you saw.
There are several panels, so I loaded them as JSON format. Here is the JSON which contain UVs:

        var myJson = {
            "metadata": {
                "version": 3,
                "type": "Geometry",
                "position": 14,
                "generator": "io_three"
            },
            "data": {
                "index": {
                    "array": [0, 5, 4, 0, 4, 2, 2, 4, 9, 4, 11, 9, 9, 11, 12, 9, 12, 7, 4, 13, 11, 4, 6, 13, 6, 1, 13, 1, 8, 13, 1, 10, 8, 1, 3, 10],
                    "type": "Uint16Array",
                    "itemSize": 1
                },
                "attributes": {
                    "position": {
                        "array": [0, 10, 1, 0, 10, 1, 0, 10, 0, 0, 10, 0, 3, 10, 0, 3, 10, 1, 3, 10, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 3, 0, 0, 3, 0, 1, 3, 0, 1],
                        "type": "Float32Array",
                        "itemSize": 3
                    },
                    "uv": {
                        "array": [0, 1, 0.58333, 0.91667, 0, 0.91667, 0.66667, 0.91667, 0.25, 0.91667, 0.25, 1, 0.33333, 0.91667, 0, 0, 0.58333, 0.08333, 0, 0.08333, 0.66667, 0.08333, 0.25, 0.08333, 0.25, 0, 0.33333, 0.08333],
                        "type": "Float32Array",
                        "itemSize": 2
                    }
                }
            }
        };