# THREEJS sprite label text is hiding

**URL:** <https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970>\
**Category:** Questions\
**Tags:** sprites, textures, materials, geometry\
**Created:** [March 23, 2025, 8:02am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970 "2025-03-23T08:02:25Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 23, 2025, 8:02am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/1 "2025-03-23T08:02:25Z")

</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](https://codesandbox.io/p/sandbox/lpgzcx?file=%2Findex.html)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/1/e1e3cc237f26fb29b454957f5f52bdb71be55710.png)  
Text should display in top position.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 23, 2025, 8:10am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/2 "2025-03-23T08:10:52Z")

</div>

Hi!  
Could you provide a picture of how the desired result has to look like?

I could make it to look like this, but I don’t know the goal.

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b8b745de28d0b4e36938be2cc56569527fd3e9c2.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [March 23, 2025, 12:14pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/3 "2025-03-23T12:14:24Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/3/438475b945397550b86ffc2f29d091570ef45a7c.png)

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 23, 2025, 3:20pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/4 "2025-03-23T15:20:02Z")

</div>

Well …  
at least a tiny bit of explanatory text would have been helpful …

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 23, 2025, 4:13pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/5 "2025-03-23T16:13:11Z")

</div>

Hello @prisoner849 i have uploaded the image, please have a look.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 23, 2025, 4:44pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/6 "2025-03-23T16:44:55Z")

</div>

My comment was directed @Chaser_Code

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 23, 2025, 7:06pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/7 "2025-03-23T19:06:52Z")

</div>

Why not generate a whole texture procedurally? 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/f/6fec4d9610773e9fa04ea6baab9b55d81f248b75.png)

Demo: [https://codepen.io/prisoner849/full/XJWYgOX](https://codepen.io/prisoner849/full/XJWYgOX)

PS Not the ultimate solution, just an example.

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 24, 2025, 3:17am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/8 "2025-03-24T03:17:21Z")

</div>

1. The arrow provided in the example, can be an image (user-profile picture or it can be an small icon or a 3D model)
2. Billboard :Add text to the model at the top or bottom.  
Please have a look on above points @prisoner849

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 24, 2025, 1:43pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/9 "2025-03-24T13:43:10Z")

</div>

You can modify sprite’s geometry, to have a text at the place you want 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/30e845724fa52a2db1bb0305836e3ff1ec7047b4.png)  
Demo: [https://codepen.io/prisoner849/full/dPyKqVe](https://codepen.io/prisoner849/full/dPyKqVe)

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 24, 2025, 2:13pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/10 "2025-03-24T14:13:06Z")

</div>

In my use case not using the threejs mesh, please check the below code. @prisoner849  
Thanks.

```typescript
        const root = new THREE.Object3D();
		root.position.x = 2;

		const imageCanvas = document.createElement('canvas');

		const imageContext = imageCanvas.getContext('2d');
		let url = 'https://devum-client-public-bucket.s3.amazonaws.com/winterdev/images/images/Arrow'

		const image = new Image();
		image.crossOrigin = "*";
		image.src = url;

		image.onload = function () {

			imageCanvas.width = image.width;
			imageCanvas.height = image.height;
			imageContext.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);

			const imageTexture = new THREE.CanvasTexture(imageCanvas);
			const imageSpriteMaterial = new THREE.SpriteMaterial({
				map: imageTexture,
				alphaTest: 0.8,
				color: 'rgb(165, 42, 42)'
			});
			const imageSprite = new THREE.Sprite(imageSpriteMaterial);
			const imageSize = 2;
			imageSprite.scale.set(imageSize, imageSize, 0);
			root.add(imageSprite);

			// Create a canvas and set up the context
			const labelCanvas = document.createElement('canvas');
			const labelContext = labelCanvas.getContext('2d');

			// Measure text height to position correctly
			const text = 'Hello World';
			const textWidth = labelContext.measureText(text).width;

			// Set canvas size
			labelCanvas.width = textWidth + 500; // Adjust size as needed
			labelCanvas.height = 256;

			// Set the font properties
			labelContext.font = '40px Arial';
			labelContext.fillStyle = 'black';
			labelContext.textAlign = 'center';

			// Set textBaseline to 'top' to prevent cutting off at the top
			labelContext.textBaseline = 'top';

			labelContext.fillText(text, 25, 24); // Draw the text

			// Create a texture from the canvas
			const labelTexture = new THREE.CanvasTexture(labelCanvas);

			// Create a sprite material using the texture
			const labelMaterial = new THREE.SpriteMaterial({ map: labelTexture });

			// Create the sprite and add it to the scene
			const labelSprite = new THREE.Sprite(labelMaterial);
			root.add(labelSprite);

			scene.add(root);
		}
	
	}

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 24, 2025, 2:17pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/11 "2025-03-24T14:17:54Z")

</div>

> [@jayalakshmi](#):
>
> In my use case not using the threejs mesh

I use `THREE.Sprite` 🤔

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 24, 2025, 2:28pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/12 "2025-03-24T14:28:20Z")

</div>

You are adding the text to obj2 which is THREE.Mesh instance. In my case text is adding to imageSprite THREE.sprite  
@prisoner849

```typescript
let obj2 = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.5, 1),
  new THREE.MeshLambertMaterial({color: "magenta"})
);
obj2.geometry.computeVertexNormals();
obj2.position.x = 4;
let textSprite2 = new TextSprite(obj2, "Cool Stuff", "navy", "bottom")

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 24, 2025, 2:36pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/13 "2025-03-24T14:36:12Z")

</div>

> [@jayalakshmi](#):
>
> or a 3D model

It can be `Object3D` or `Group` or `Mesh`.

All, what `TextSprite` does, is adding itself to the object, passed in the parameter.  
Try to pass `Sprite` instead of `Mesh`.  
Feel free to modify my code to your needs. 🤔

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 24, 2025, 2:38pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/14 "2025-03-24T14:38:00Z")

</div>

Okay @prisoner849.  
Thank you.

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 24, 2025, 2:47pm UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/15 "2025-03-24T14:47:26Z")

</div>

@prisoner849 i have added my code with your example, can you please help where i am missing in below code.

```typescript
		let imageCanvas = document.createElement('canvas');

		let imageContext = imageCanvas.getContext('2d');
		let url = 'https://devum-client-public-bucket.s3.amazonaws.com/winterdev/images/images/Arrow'

		let image = new Image();
		image.crossOrigin = "*";
		image.src = url;

		image.onload = function () {

			imageCanvas.width = image.width;
			imageCanvas.height = image.height;
			imageContext.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);

			const imageTexture = new THREE.CanvasTexture(imageCanvas);
			const imageSpriteMaterial = new THREE.SpriteMaterial({
				map: imageTexture,
				alphaTest: 0.8,
				color: 'rgb(165, 42, 42)'
			});
			const imageSprite = new THREE.Sprite(imageSpriteMaterial);
			const imageSize = 2;
			imageSprite.scale.set(imageSize, imageSize, 0);
			imageSprite.position.x = -2;
let textSprite = new TextSprite(imageSprite, "Three.js", "maroon", "top");
scene.add(imageSprite);
    }
    

```

---

<div class="post-metadata">

**Author:** ![jayalakshmi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayalakshmi/32/57962_2.png) [@jayalakshmi](https://discourse.threejs.org/u/jayalakshmi)\
**Post date:** [March 25, 2025, 5:35am UTC](https://discourse.threejs.org/t/threejs-sprite-label-text-is-hiding/79970/16 "2025-03-25T05:35:48Z")

</div>

its working fine @prisoner849,Thank you so much.