# \#sprites

**URL:** https://discourse.threejs.org/tag/sprites/116.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Sprites rotation in XR](https://discourse.threejs.org/t/sprites-rotation-in-xr/89068)

<div class="topic-metadata">

**Author:** [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Replies:** 0\
**Last updated:** [January 10, 2026, 11:25pm UTC](https://discourse.threejs.org/t/sprites-rotation-in-xr/89068 "2026-01-10T23:25:56Z")

</div>

Greetings ! While working on my Planetarium project I found that sprites in XR mode rotates around different axes while the head (camera) is rotating and produces unexpected effect that is different to sprites behaviour…

---

## [What is the BEST way to render thousands of foliage meshes? See screenshot](https://discourse.threejs.org/t/what-is-the-best-way-to-render-thousands-of-foliage-meshes-see-screenshot/86072)

<div class="topic-metadata">

**Author:** [@torrent](https://discourse.threejs.org/u/torrent)\
**Replies:** 1\
**Last updated:** [August 10, 2025, 5:49pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-to-render-thousands-of-foliage-meshes-see-screenshot/86072 "2025-08-10T17:49:12Z")

</div>

I am working on a three.js project with multiplayer networking. It’s open world survival, using the Rapier.js physics engine. I have optimized the hell out of everything I can think of. I am aggressively using Instanced…

---

## [How to map position in a sprite to browser viewport?](https://discourse.threejs.org/t/how-to-map-position-in-a-sprite-to-browser-viewport/82796)

<div class="topic-metadata">

**Author:** [@Avner\_Moshkovitz](https://discourse.threejs.org/u/Avner_Moshkovitz)\
**Replies:** 1\
**Last updated:** [May 19, 2025, 7:06am UTC](https://discourse.threejs.org/t/how-to-map-position-in-a-sprite-to-browser-viewport/82796 "2025-05-19T07:06:26Z")

</div>

I have a sprite where a fabricjs is loaded as texture In fabricjs I have 2 rectangle objects (rect0 at position x0,y0, rect1 at position x1,y1) relative to the topLeft of the canvas When clicking on one of the rectangl…

---

## [THREEJS sprite label text is hiding](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970)

<div class="topic-metadata">

**Author:** [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Replies:** 15\
**Last updated:** [March 25, 2025, 5:35am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970 "2025-03-25T05:35:48Z")

</div>

I am using two different Three.js sprites to render an image and a label, but I am not able to display the full text at the top, bottom, left, and right positions. please check the below link link Text should displ…

---

## [In three.js, how can we make a face face the camera as much as possible under certain constraints?](https://discourse.threejs.org/t/in-three-js-how-can-we-make-a-face-face-the-camera-as-much-as-possible-under-certain-constraints/75071)

<div class="topic-metadata">

**Author:** [@duxingmengshou](https://discourse.threejs.org/u/duxingmengshou)\
**Replies:** 4\
**Last updated:** [December 12, 2024, 6:48am UTC](https://discourse.threejs.org/t/in-three-js-how-can-we-make-a-face-face-the-camera-as-much-as-possible-under-certain-constraints/75071 "2024-12-12T06:48:48Z")

</div>

Suppose our face is on the x-y plane, and there is a constraint that the axis of this face must be (0,1,0). I hope that when the camera moves, this face will face the camera as much as possible. It can only rotate around…

---

## [Sprites apparently clickable only in upper half](https://discourse.threejs.org/t/sprites-apparently-clickable-only-in-upper-half/59897)

<div class="topic-metadata">

**Author:** [@Carlo\_Schiano\_di\_Cola](https://discourse.threejs.org/u/Carlo_Schiano_di_Cola)\
**Replies:** 1\
**Last updated:** [November 1, 2024, 5:37pm UTC](https://discourse.threejs.org/t/sprites-apparently-clickable-only-in-upper-half/59897 "2024-11-01T17:37:58Z")

</div>

I’m trying to make clickable sprites based on PNG images like the following However the sprites seem to be only clickable in their upper half, and slightly above. Furthermore, The problem seems to diminish as the sc…

---

## [Alignment of Pointer(Sprite) and their labels in ThreeJS in a 3D Map](https://discourse.threejs.org/t/alignment-of-pointer-sprite-and-their-labels-in-threejs-in-a-3d-map/70842)

<div class="topic-metadata">

**Author:** [@MuhammadAusafJamal](https://discourse.threejs.org/u/MuhammadAusafJamal)\
**Replies:** 1\
**Last updated:** [October 14, 2024, 12:21pm UTC](https://discourse.threejs.org/t/alignment-of-pointer-sprite-and-their-labels-in-threejs-in-a-3d-map/70842 "2024-10-14T12:21:28Z")

</div>

I am working on a 3D Map with 3JS where i am using a THREE.Sprite as a pointer and CSS2D Object as a label. When hovered on the sprite the label appears above the sprite and also a side pane opens displaying the informat…

---

## [Sprite Object with WebGLOverlayView of google](https://discourse.threejs.org/t/sprite-object-with-webgloverlayview-of-google/72196)

<div class="topic-metadata">

**Author:** [@trandinhphuoc2k](https://discourse.threejs.org/u/trandinhphuoc2k)\
**Replies:** 7\
**Last updated:** [October 9, 2024, 6:09am UTC](https://discourse.threejs.org/t/sprite-object-with-webgloverlayview-of-google/72196 "2024-10-09T06:09:34Z")

</div>

Currently, I work with threejs combined with WebGLOverlayView. Following the suggestion of Google, I only updated projectionMatrix; that is enough. But the sprite object can’t work correctly. I checked logic at sprite s…

---

## [Drawing Specific Pixels of a Texture onto a Sprite](https://discourse.threejs.org/t/drawing-specific-pixels-of-a-texture-onto-a-sprite/68909)

<div class="topic-metadata">

**Author:** [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Replies:** 16\
**Last updated:** [August 5, 2024, 3:14pm UTC](https://discourse.threejs.org/t/drawing-specific-pixels-of-a-texture-onto-a-sprite/68909 "2024-08-05T15:14:25Z")

</div>

Is it possible to draw lets say the top-left 100x100 pixels of a PNG onto a Sprite? I’ve been looking for this feature for years and I’m not sure if it is possible yet, or if we are still limited to UV mapping.

---

## [About dynamic imposters](https://discourse.threejs.org/t/about-dynamic-imposters/27330)

<div class="topic-metadata">

**Author:** [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Replies:** 9\
**Last updated:** [July 7, 2024, 11:42am UTC](https://discourse.threejs.org/t/about-dynamic-imposters/27330 "2024-07-07T11:42:44Z")

</div>

Hi all, I came across this very interesting article on dynamic imposters and decided that it was worth giving this technic a shot. Article TLDR : Dynamic imposters are 2D sprites generated at render time to impersona…

---

## [Scaling only some part of texture](https://discourse.threejs.org/t/scaling-only-some-part-of-texture/60024)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini](https://discourse.threejs.org/u/Deepak_Saini)\
**Replies:** 2\
**Last updated:** [January 7, 2024, 11:41am UTC](https://discourse.threejs.org/t/scaling-only-some-part-of-texture/60024 "2024-01-07T11:41:03Z")

</div>

I have this image which i want to use as a map for the sprite material. The thing i want to achieve is to know that how can i scale only the green part of the image and not the above part of it. It will be used for …

---

## [How to make SpriteMaterial transparent?](https://discourse.threejs.org/t/how-to-make-spritematerial-transparent/59468)

<div class="topic-metadata">

**Author:** [@Tame](https://discourse.threejs.org/u/Tame)\
**Replies:** 5\
**Last updated:** [January 5, 2024, 5:09pm UTC](https://discourse.threejs.org/t/how-to-make-spritematerial-transparent/59468 "2024-01-05T17:09:09Z")

</div>

I’m using an image as a texture (.map) and I don’t want it to be multiplied by any color. I’m pretty sure this must be possible.

---

## [Clickable area of sprite](https://discourse.threejs.org/t/clickable-area-of-sprite/59693)

<div class="topic-metadata">

**Author:** [@Carlo\_Schiano\_di\_Cola](https://discourse.threejs.org/u/Carlo_Schiano_di_Cola)\
**Replies:** 9\
**Last updated:** [December 29, 2023, 10:32am UTC](https://discourse.threejs.org/t/clickable-area-of-sprite/59693 "2023-12-29T10:32:17Z")

</div>

I’m trying to make some clickable sprite, but I’m having trouble understanding which is the clickable area. Is it a rectangle? If so, how it is centered? Here I post an image with the sprites I created and the funct…

---

## [Sprites are scaled when canvas is very large](https://discourse.threejs.org/t/sprites-are-scaled-when-canvas-is-very-large/59146)

<div class="topic-metadata">

**Author:** [@Ethrex](https://discourse.threejs.org/u/Ethrex)\
**Replies:** 10\
**Last updated:** [December 14, 2023, 1:49pm UTC](https://discourse.threejs.org/t/sprites-are-scaled-when-canvas-is-very-large/59146 "2023-12-14T13:49:42Z")

</div>

I have a situation where I am rendering to a very large canvas. Maybe up to two-to-three 4K in some applications. Generally everything runs great, except when the canvas becomes a specific size, my objects begin to scale…

---

## [Plane always look into camera](https://discourse.threejs.org/t/plane-always-look-into-camera/4000)

<div class="topic-metadata">

**Author:** [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Replies:** 5\
**Last updated:** [December 14, 2023, 11:00am UTC](https://discourse.threejs.org/t/plane-always-look-into-camera/4000 "2023-12-14T11:00:00Z")

</div>

Is there a way to make a plane always face into camera/screen direction just like an billboard?

---

## [Sprite scale on browser resize](https://discourse.threejs.org/t/sprite-scale-on-browser-resize/56109)

<div class="topic-metadata">

**Author:** [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Replies:** 1\
**Last updated:** [September 18, 2023, 6:53pm UTC](https://discourse.threejs.org/t/sprite-scale-on-browser-resize/56109 "2023-09-18T18:53:35Z")

</div>

Hey, Im having a few Sprites in my scene. All have sizeAttenuation = false, so all sprites stay the same size when zooming. I noticed that when resizing the canvas vertically, everything in the scene is getting scaled d…

---

## [Scaling sprites to original image size](https://discourse.threejs.org/t/scaling-sprites-to-original-image-size/55471)

<div class="topic-metadata">

**Author:** [@naticarl](https://discourse.threejs.org/u/naticarl)\
**Replies:** 2\
**Last updated:** [August 29, 2023, 9:38am UTC](https://discourse.threejs.org/t/scaling-sprites-to-original-image-size/55471 "2023-08-29T09:38:19Z")

</div>

Hello, I would like to scale sprites according to the size of the original image. Example: image 1 = (50px, 50px) image 2= (100px,100px) Then the sprite with the second image should be displayed twice as large. Ho…

---

## [What's the proper way to limit css3d sprite's width and height on screen](https://discourse.threejs.org/t/whats-the-proper-way-to-limit-css3d-sprites-width-and-height-on-screen/54791)

<div class="topic-metadata">

**Author:** [@lojaer](https://discourse.threejs.org/u/lojaer)\
**Replies:** 0\
**Last updated:** [August 9, 2023, 8:24am UTC](https://discourse.threejs.org/t/whats-the-proper-way-to-limit-css3d-sprites-width-and-height-on-screen/54791 "2023-08-09T08:24:40Z")

</div>

I use orbitontrols to zoom in/out the scene,but it can make sprites too big on screen. I want to give my sprites maxlimits,like: if it’s width(actual width,the one you get by using getBoundingClientRect), is over 50%of…

---

## [wildwesters.io - website for a collectable art project!](https://discourse.threejs.org/t/wildwesters-io-website-for-a-collectable-art-project/54268)

<div class="topic-metadata">

**Author:** [@Eddie](https://discourse.threejs.org/u/Eddie)\
**Replies:** 2\
**Last updated:** [July 31, 2023, 6:48am UTC](https://discourse.threejs.org/t/wildwesters-io-website-for-a-collectable-art-project/54268 "2023-07-31T06:48:01Z")

</div>

I made a fun website for my art project! Please check it out!

---

## [Create code art with and learn THREE.js Sprites!](https://discourse.threejs.org/t/create-code-art-with-and-learn-three-js-sprites/54113)

<div class="topic-metadata">

**Author:** [@robotbobby](https://discourse.threejs.org/u/robotbobby)\
**Replies:** 1\
**Last updated:** [July 21, 2023, 9:14am UTC](https://discourse.threejs.org/t/create-code-art-with-and-learn-three-js-sprites/54113 "2023-07-21T09:14:15Z")

</div>

---

## [A better method for rendering sprites semi-opaque when behind a model?](https://discourse.threejs.org/t/a-better-method-for-rendering-sprites-semi-opaque-when-behind-a-model/53694)

<div class="topic-metadata">

**Author:** [@domenico](https://discourse.threejs.org/u/domenico)\
**Replies:** 4\
**Last updated:** [July 11, 2023, 5:27am UTC](https://discourse.threejs.org/t/a-better-method-for-rendering-sprites-semi-opaque-when-behind-a-model/53694 "2023-07-11T05:27:24Z")

</div>

I am looking to set sprites into a semi-opaque state when they’re behind a model. I have (a very slow) method which compares the distance from the camera to each sprite in the scene vs the distance from the camera to th…

---

## [How to work with THREE.Sprite in Mapbox](https://discourse.threejs.org/t/how-to-work-with-three-sprite-in-mapbox/52284)

<div class="topic-metadata">

**Author:** [@Rodion\_Nikolaev](https://discourse.threejs.org/u/Rodion_Nikolaev)\
**Replies:** 1\
**Last updated:** [June 3, 2023, 10:37am UTC](https://discourse.threejs.org/t/how-to-work-with-three-sprite-in-mapbox/52284 "2023-06-03T10:37:28Z")

</div>

When I use THREE.Sprite with mapbox the sprite is always horizontal and the sizeAttenuation property is not working for scale. I understand that sprite position depends on camera projection which depends on the mapbo…

---

## [Why isn't this alphaMap working on my sprite material?](https://discourse.threejs.org/t/why-isnt-this-alphamap-working-on-my-sprite-material/51934)

<div class="topic-metadata">

**Author:** [@WasteX](https://discourse.threejs.org/u/WasteX)\
**Replies:** 5\
**Last updated:** [May 24, 2023, 9:36am UTC](https://discourse.threejs.org/t/why-isnt-this-alphamap-working-on-my-sprite-material/51934 "2023-05-24T09:36:15Z")

</div>

I’m trying to create a sprite with a texture map and alphaMap to control the transparency. const textureLoader = new THREE.TextureLoader(); const spriteTexture = textureLoader.load(SPRITE\_TEXTURE); const opacityTexture …

---

## [Is it possible to offset a texture by pixels instead of UV Mapping?](https://discourse.threejs.org/t/is-it-possible-to-offset-a-texture-by-pixels-instead-of-uv-mapping/50853)

<div class="topic-metadata">

**Author:** [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Replies:** 1\
**Last updated:** [April 26, 2023, 12:29pm UTC](https://discourse.threejs.org/t/is-it-possible-to-offset-a-texture-by-pixels-instead-of-uv-mapping/50853 "2023-04-26T12:29:26Z")

</div>

Is it possible to offset a texture by pixels instead of using UV mapping or some technique outside of THREE.Texture? This would be very useful for tools like TexturePacker, where each frame has a different size in order …

---

## [Three.js sprite animation without spritesheet](https://discourse.threejs.org/t/three-js-sprite-animation-without-spritesheet/49068)

<div class="topic-metadata">

**Author:** [@Cam](https://discourse.threejs.org/u/Cam)\
**Replies:** 1\
**Last updated:** [March 14, 2023, 8:31am UTC](https://discourse.threejs.org/t/three-js-sprite-animation-without-spritesheet/49068 "2023-03-14T08:31:38Z")

</div>

How would I do a sprite animation with a Three.js sprite using individual .png images? I’ve seen examples but they always use a spritesheet but I have individual 16x16 images.

---

## [Is it possible to combine Sprite and CSS2DObject features?](https://discourse.threejs.org/t/is-it-possible-to-combine-sprite-and-css2dobject-features/46897)

<div class="topic-metadata">

**Author:** [@waynewu](https://discourse.threejs.org/u/waynewu)\
**Replies:** 5\
**Last updated:** [February 6, 2023, 3:27am UTC](https://discourse.threejs.org/t/is-it-possible-to-combine-sprite-and-css2dobject-features/46897 "2023-02-06T03:27:58Z")

</div>

The feature I need Sprite CSS2DObject Always face to camera :white\_check\_mark: :white\_check\_mark: Always keep size (eg. 50px \* 50px) :negative\_squared\_cross\_mark: :white\_check\_mark: Can be obscured by other o…

---

## [Image placement on custom x and y coordinate](https://discourse.threejs.org/t/image-placement-on-custom-x-and-y-coordinate/44544)

<div class="topic-metadata">

**Author:** [@abdulmutalib1](https://discourse.threejs.org/u/abdulmutalib1)\
**Replies:** 8\
**Last updated:** [November 21, 2022, 3:29am UTC](https://discourse.threejs.org/t/image-placement-on-custom-x-and-y-coordinate/44544 "2022-11-21T03:29:32Z")

</div>

i want to place a custom image(an indicator) on different x and y coordinates of a loaded glb file. please am new to three js , I woul appreciate any assistance

---

## [Making sprite size fixed while zoom](https://discourse.threejs.org/t/making-sprite-size-fixed-while-zoom/42804)

<div class="topic-metadata">

**Author:** [@Prematrix](https://discourse.threejs.org/u/Prematrix)\
**Replies:** 1\
**Last updated:** [September 22, 2022, 12:48am UTC](https://discourse.threejs.org/t/making-sprite-size-fixed-while-zoom/42804 "2022-09-22T00:48:54Z")

</div>

I am new to even JS. I am trying to show a model with a sprite(with texture) beside it. I need the sprite size to be fixed even while i zoom. it is working with “mousedown” event listener but not with “wheel” or “scroll”…

---

## [What is the difference between Sprite and Points?](https://discourse.threejs.org/t/what-is-the-difference-between-sprite-and-points/41703)

<div class="topic-metadata">

**Author:** [@vcxiaohan](https://discourse.threejs.org/u/vcxiaohan)\
**Replies:** 1\
**Last updated:** [August 22, 2022, 6:22am UTC](https://discourse.threejs.org/t/what-is-the-difference-between-sprite-and-points/41703 "2022-08-22T06:22:08Z")

</div>

Can I alwalys use Points instead of Sprite? new THREE.Sprite new THREE.Points

---

## [Keep sprite size the same as canvas texture size](https://discourse.threejs.org/t/keep-sprite-size-the-same-as-canvas-texture-size/4407)

<div class="topic-metadata">

**Author:** [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Replies:** 6\
**Last updated:** [June 21, 2021, 3:22am UTC](https://discourse.threejs.org/t/keep-sprite-size-the-same-as-canvas-texture-size/4407 "2021-06-21T03:22:10Z")

</div>

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…

[Next page](https://discourse.threejs.org/tag/sprites/116.md?match_all_tags=true&page=1&tags%5B%5D=sprites)