Keep sprite size the same as canvas texture size

sprites

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


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