# Sprite multiple image texture

**URL:** <https://discourse.threejs.org/t/sprite-multiple-image-texture/5651>\
**Category:** Questions\
**Tags:** sprites\
**Created:** [January 8, 2019, 9:58am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651 "2019-01-08T09:58:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tecnodcp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tecnodcp/32/3746_2.png) [@tecnodcp](https://discourse.threejs.org/u/tecnodcp)\
**Post date:** [January 8, 2019, 9:58am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651/1 "2019-01-08T09:58:01Z")

</div>

Hi.

I’have created some sprites an added them to the scene.  
What i want to achieve is to change the sprite image when i click on it.

So I added Raycast and all the stuffs.

The problem is that the clicked sprite need to maintain the actual image and i have to add a semi trasparent image on it, so basically compose the 2 images.

How could i do this?

PS. Now when the click is intersected by raycast i only change the color of the image.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 8, 2019, 10:06am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651/2 "2019-01-08T10:06:12Z")

</div>

> [@tecnodcp](#):
>
> The problem is that the clicked sprite need to maintain the actual image and i have to add a semi trasparent image on it, so basically compose the 2 images.

Why? Can you please elaborate a bit?

---

<div class="post-metadata">

**Author:** ![tecnodcp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tecnodcp/32/3746_2.png) [@tecnodcp](https://discourse.threejs.org/u/tecnodcp)\
**Post date:** [January 8, 2019, 10:16am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651/3 "2019-01-08T10:16:08Z")

</div>

Ok, This is the image as a sprite

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/ad1fbc7cbbdb206051b0e26a60591c8263ed9250.png)

After clicking them it sould appera like this  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/deaaf66bb0f7fff372f40b2db657be7ca4b24a9b.png)

The blue circle can be any image, ( a house, a dog…) and the yellow one needs to indicate that that circle has been selected.

My problem is how to pass the composed image to the SpriteMaterial.map or to find a better way to achieve this.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 8, 2019, 10:48am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651/4 "2019-01-08T10:48:01Z")

</div>

How about using two sprites? One sprite could be a child of the other one. Or you are using the new group feature that comes with the next release (`R101`). That means you pass both sprites into a single instance of `THREE.Group` and apply a render order e.g `1` to the group. Sprites in the group are then sorted and rendered together.

---

<div class="post-metadata">

**Author:** ![tecnodcp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tecnodcp/32/3746_2.png) [@tecnodcp](https://discourse.threejs.org/u/tecnodcp)\
**Post date:** [January 8, 2019, 10:52am UTC](https://discourse.threejs.org/t/sprite-multiple-image-texture/5651/5 "2019-01-08T10:52:12Z")

</div>

I think i will use 2 sprites (One child of another).  
Tanks for the support.