Convert mouse coordinates to 3d screen element coordinates


I am trying to move the handle of scrollbar by clicking on scrollbar without dragging. I was trying to convert coordinates of mouse click to points on the 3d screen of the clicked element but I am not able to do so. I have tried using screenToWorld and worldToScreen but failed to do so.

Hi @Muhammad_Hassan_Ali,

I think you could try and set the value property on the scrollbar component, that is normalized, to move the scrollbar without user input.

Actually I take it back, I’m not sure if that will work, I don’t see any property setter in code for that component:

You could try and see if there is a non documentated method that you could use, although that isn’t recommended since the signature of the methods can change with no warning.

I have tried many methods. I am actually confused there is not way to get the values of x and y coordinates of 2d screen of an element upon interaction. When I was trying to implement it I thought I could get it from the engine but no luck. But thx for the help @Leonidas.

What do you mean by this?

There is an event you can send to the scrollbar to set the position:

1 Like

The way that element input works is doing a raycast to a quad as shown here: engine/element-input.js at main · playcanvas/engine · GitHub

It doesn’t convert to a 2D space hence there isn’t a position to return a UI screen space positions.

What would helpful maybe is for the hit position on the quad to be returned that is relative to the element :thinking:

Use scrollbar like a video timeline. Like not dragging the handle of scrollbar but clicking on the scrollbar and the handle set’s its values itself. For that I need the coordinates of the click on the element in 3d screen cause I am doing it for 3d but I am unable to calculate the coordinates of the click event on element placed in the 3d screen component. Just think of the scrollbar as video time bar in youtube video. I want to use it like video time bar.

Yeah, I don’t have a good answer for this unfortunately. My hacky solution would be to check for a click event on the scroll bar background and do a raycast plane to get the world position of the click

From that, use the world corners of the element to work out where to move the scroll bar too: ElementComponent | PlayCanvas API Reference