UI clicking vs entity clicking

Help & Support
#1

Hi, I am working on some features where I need to be able to select a cube, move it around and rotate it with some UI buttons. This already works. The problem is whenever I click on something else than the cube (so anywhere), I wanna deselect my cube.

This is easy. The problem is whenever I click on my UI, my raycast sees empty because I didn’t click on any entity so it deselects my cube even though i’d like the UI action to be executed and my UI actions don’t work anymore…

Project
Everything i’m talking about is in GameManager.js, UI.js and Picker.js

Thanks !

#2

It’s tricky as you have multiple listeners for the mouse click so you need some way to filter or process the click and manually go through the different systems in terms of priority (eg UI, cube selection then orbit camera).

In this case since the UI is HTML, you could probably use mouse over and mouse down events to check if you user is interacting with the UI and then disable the cube deselector and camera.

#3

There is a mouse over event ? And if so, it would detect the UI ?

#4

As it’s HTML, all the standard HTML events will work as it’s a DOM on the page.

https://www.w3schools.com/jsref/event_onmouseover.asp

#5

Oh ok ! I’m kinda new with JS but i’ll try to figure it out thanks ! :smiley:

#6

Just to be sure, how do I link my mouse over event from my html to my desired JS script ? Do I use my handle to my rotate button and do rotateButton.theEvent ?

Thanks :slight_smile:

#7

If can find the DOM object (I normally add ids and classes for this reason), you can add the eventlistener onto it with a callback in the script like how you have done it with the click event on the buttons.