# Rotate and scale the added image texture

**URL:** <https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666>\
**Category:** Questions\
**Tags:** image, custom-material, textures\
**Created:** [October 9, 2021, 4:17pm UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666 "2021-10-09T16:17:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tylernguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tylernguyen/32/21466_2.png) [@tylernguyen](https://discourse.threejs.org/u/tylernguyen)\
**Post date:** [October 9, 2021, 4:17pm UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/1 "2021-10-09T16:17:05Z")

</div>

Hi guys,

I’m building a product customiser similar to the one in the gif attachment,  
I don’t find any solutions for the image adjust stuff, it may be a caster from FabricJS to ThreeJS.  
But I’m just newbie.

[![](https://media.giphy.com/media/w6513riqz1q1tWOiBD/giphy.gif) ](https://media.giphy.com/media/w6513riqz1q1tWOiBD/giphy.gif)

Could you point me or give me some suggestions how to implement that feature  
Thanks,

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 10, 2021, 7:04am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/2 "2021-11-10T07:04:34Z")

</div>

have you found a solution for that? i manage to select fabricjs object directly from 3d object, but idk how to move them

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [November 10, 2021, 7:28am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/3 "2021-11-10T07:28:44Z")

</div>

How did you manage to select them? I was looking at their documentation, and [this SO answer](https://stackoverflow.com/a/65238133/2608515) indicates that you can fake canvas events with: `canvas.fire('mouse:down', {});` along with [a long list of other events](http://fabricjs.com/docs/fabric.Canvas.html#Canvas).

Alternatively, you could take the UV coordinates from a raycaster, convert them into fabric’s canvas coordinates, then invoke a `'mousedown'` event on the `<canvas>` element, as explained [in this SO demo](https://stackoverflow.com/a/61187877/2608515)

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 10, 2021, 7:37am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/4 "2021-11-10T07:37:01Z")

</div>

@polymorphist helped me to select the object here [https://discourse.threejs.org/t/coding-problems/30230/18](https://discourse.threejs.org/t/coding-problems/30230/18)

i was thinking about your 2nd solution, i was tried to move the `object.top` increment by `1` if mouse if moved, but then i can’t select the `object` again on new position. I need to click on the first position

---

<div class="post-metadata">

**Author:** ![tylernguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tylernguyen/32/21466_2.png) [@tylernguyen](https://discourse.threejs.org/u/tylernguyen)\
**Post date:** [November 10, 2021, 8:13am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/5 "2021-11-10T08:13:57Z")

</div>

Thank you for the answer,  
I couldn’t find the solution yet, and my client also can’t find someone to design the base models.  
and we decided to use a much more easier way, using SVG 2D image.  
But I am very interested in the solution, let me try to implement following your refs.  
It’s great if you can help us to make a codepen project,  
I believe there’re lots of developers are reaching for the solution like me.

Thanks,  
Tyler

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 10, 2021, 8:20am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/6 "2021-11-10T08:20:08Z")

</div>

well u could download the base models from free site actually, there are plenty of them

---

<div class="post-metadata">

**Author:** ![tylernguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tylernguyen/32/21466_2.png) [@tylernguyen](https://discourse.threejs.org/u/tylernguyen)\
**Post date:** [November 10, 2021, 8:22am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666/7 "2021-11-10T08:22:43Z")

</div>

those models are not match to my client designs,  
that’s why we can’t use the public-free models,