Equivalent mouseenter and mouseleave events for VR

Ramon · July 11, 2022, 3:34pm

Hi all,

I have built ui components with hover events. These are using mouse event listeners. Mainly click, mouseenter and mouseleave.

Obviously everything is working when I test it on desktop using my mouse. But when I test it on my Quest 2 the events don’t trigger. Makes sense, I guess.

What I am looking for are the equivalent event listeners of mouseenter and mouseleave for VR controllers.

I could not find them online and am wondering if they exist.

Could anybody point me in the right direction?

yaustar · July 11, 2022, 4:02pm

Having a quick look at the engine codebase, it looks like there are events called: selectenter and selectleave. I’ve not tried it myself though

github.com

playcanvas/engine/blob/main/src/input/element-input.js#L836

      
        
            
            
inputSource._elementEntity = element || null;
            
            
if (element) {
                this._selectedElements[inputSource.id] = element;
                hoveredNow = element;
            } else {
                delete this._selectedElements[inputSource.id];
            }
            
            
if (hoveredBefore !== hoveredNow) {
                if (hoveredBefore) this._fireEvent('selectleave', new ElementSelectEvent(event, hoveredBefore, camera, inputSource));
                if (hoveredNow) this._fireEvent('selectenter', new ElementSelectEvent(event, hoveredNow, camera, inputSource));
            }
            
            
if (eventType === 'selectstart') {
                this._selectedPressedElements[inputSource.id] = hoveredNow;
                if (hoveredNow) this._fireEvent('selectstart', new ElementSelectEvent(event, hoveredNow, camera, inputSource));
            }
            
            
const pressed = this._selectedPressedElements[inputSource.id];

Ramon · July 12, 2022, 7:24am

This works perfectly!

Thanks again @yaustar

farzan · December 21, 2022, 9:31am

@yaustar, I am unable to access the link you shared which directs to the engine codebase. Kindly share that again. Thanks!

yaustar · December 21, 2022, 10:36am

The events are still the same
selectleave and selectenter

Not sure why they aren’t in the API though

github.com

playcanvas/engine/blob/main/src/framework/input/element-input.js#L805

      
        
            _onSelectStart(inputSource, event) {
                if (!this._enabled) return;
                this._onElementSelectEvent('selectstart', inputSource, event);
            }
            
            
_onSelectEnd(inputSource, event) {
                if (!this._enabled) return;
                this._onElementSelectEvent('selectend', inputSource, event);
            }
            
            
_onElementSelectEvent(eventType, inputSource, event) {
                let element;
            
            
    const hoveredBefore = this._selectedElements[inputSource.id];
                let hoveredNow;
            
            
    const cameras = this.app.systems.camera.cameras;
                let camera;
            
            
    if (inputSource.elementInput) {
                    rayC.set(inputSource.getOrigin(), inputSource.getDirection());