Convert mouse coordinates to 3d screen element coordinates

Muhammad_Hassan_Ali · May 2, 2023, 9:03am

Project:
https://playcanvas.com/editor/scene/1734524

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.

Leonidas · May 2, 2023, 9:07am

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.

https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html#value

Leonidas · May 2, 2023, 9:09am

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:

github.com

playcanvas/engine/blob/96141aad3a19b4d3744a14c4f5198f4416a018d2/src/framework/components/scrollbar/component.js

import { math } from '../../../core/math/math.js';

import { ORIENTATION_HORIZONTAL } from '../../../scene/constants.js';

import { Component } from '../component.js';

import { ElementDragHelper } from '../element/element-drag-helper.js';

import { EntityReference } from '../../utils/entity-reference.js';

/**
 * A ScrollbarComponent enables a group of entities to behave like a draggable scrollbar.
 *
 * @property {number} orientation Whether the scrollbar moves horizontally or vertically. Can be:
 *
 * - {@link ORIENTATION_HORIZONTAL}: The scrollbar animates in the horizontal axis.
 * - {@link ORIENTATION_VERTICAL}: The scrollbar animates in the vertical axis.
 *
 * Defaults to {@link ORIENTATION_HORIZONTAL}.
 * @property {number} value The current position value of the scrollbar, in the range 0 to 1.

This file has been truncated. show original

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.

Muhammad_Hassan_Ali · May 2, 2023, 9:33am

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.

yaustar · May 2, 2023, 10:20am

What do you mean by this?

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

yaustar · May 2, 2023, 10:26am

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

Muhammad_Hassan_Ali · May 2, 2023, 10:27am

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.

yaustar · May 2, 2023, 10:45am

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