Rotate and scale the added image texture

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.

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

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

How did you manage to select them? I was looking at their documentation, and this SO answer indicates that you can fake canvas events with: canvas.fire('mouse:down', {}); along with a long list of other events.

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

2 Likes

@polymorphist helped me to select the object here 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

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

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

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