Keep sprite size the same as canvas texture size

Questions
1

I have a canvas texture to sprite,i want to keep the sprite size the same as canvas by set sprite.scale.set(x,y,1.0). So i want to get sprite Initial width pixel(real width in pixel).
Then
sprite.scale.x = canvas.width/sprite.width
sprite.scale.y = canvas.height/sprite.height
I do not know is this the right way to set the sprite.scale

If i set spriteMaterial.sizeAttenuation=false,and whatever the sprite position is,the size of sprite will not change.
How could i get sprite Initial width pixel(real width in pixel)?
Is there any better way to do it?

2

You can’t set the size of a sprite in pixels. That works for points where PointsMaterial.size has units of pixel.

Can you please explain your use case a bit? Why do you have to use sprites in this way?

BTW: Please demonstrate your code in a live example. You can use the following fiddle since it already renders a sprite.

https://jsfiddle.net/f2Lommf5/15133/

3

Thanks for you replay!:grinning:
This is the live demo.
I explain the case in the live demo code.

img
img1892×923 66.5 KB

4

Sry, I don’t know an equation that outputs your intended value. The current value 0.06 might work on your computer but not on others. On my laptop, the sprite is much smaller than the canvas element with text. Besides, if you change the field of view of the camera, 0.06 does not work even on your computer. So I guess a possible equation which calculates a scale factor for sprites needs to take different values into account (at least the resolution and field of view of the camera).

BTW: It would be still interesting to know in which context you need such a sprite. You did not explain this in your fiddle.

5

One more thing: If you create an instance of CanvasTexture, it’s not necessary to set needsUpdate to true. Besides, I would just set minFilter to LinearFilter. magFilter already has LinearFilter set. There is actually no need to use the NearestFilter which produces a worse result.

let texture = new THREE.CanvasTexture(canvas);
texture.minFilter = THREE.LinearFilter;
6

I create a indoor-map scene based on three.js.
I need sprite size to implament HUD collision detection to avoid HUD overlapping。

7

sprite size render by perspective camera can be calculated;
sizeAttenunation = false;
// sprite size stand for sprite height in view
spriteSize = resolutionHeight * ( 1 / ( 2*Math.tan(cameraFovAngle/2)) // this is in pixel
so the real height depends on pixel can be calculate as:
scale *= (wantedSize/spriteSize)