I’ve implemented HTML/CSS UI via a CSS kit for responsive user interfaces within my game.
The issue is that press the ESC key is required to click on the buttons, etc.
I enable the pointer lock upon a player deploying into the world, yet I would like to disable it upon hovering over the UI so it may properly read the events.
I’m sure it’s a simple fix yet I can’t seem to figure it out, should I simply add hover events to the UI elements which disable it?
One thing you might want to try is to make your lookaround click and drag based. This will mean that you no longer have to lock the mouse at all.
How would the user be able to hover over UI if the pointer is locked and hidden?
@yaustar I get this but how do such UI’s get implemented with camera movement in place for the player?
It should only be locked and hidden when the user is moving the camera.
@eproasim Seems like the only thing that makes sense with my current implementation, the camera movement is what’s doing it for sure.
How does the user move the camera? I would detect when they stop moving and disable pointer lock.
Once the user is spawned and clicks on the screen, it activates the camera movement / enables Pointer lock.
I’ll attempt implementing your suggestions tonight, it should work in this aspect 
How would I allow the camera to move if the pointer lock is disabled? In other words, how would I go about this without pointer lock?
How would they stop moving the camera in this case? It sounds they would have to press another button/do an action to stop being in control of the camera which would be Esc, or something like I for inventory etc.
I’m attempting to do so via the onRelease and onPress mouse events, toggling the enable/disable pointerLock functions when a user either isn’t pressing the screen (camera movement) so the mouse events can be read on the HTML/CSS UI.
The only fix right now is changing the camera movement to the right mouse button.
this.app.mouse.disableContextMenu(); // Disable right-click
this.app.mouse.on("mousemove", this.onMouseMove, this);
this.app.mouse.on('mousedown', this.onPress, this);
this.app.mouse.on('mouseup', this.onRelease, this);
// Listen to when the mouse travels out of the window
window.addEventListener('mouseout', this.onMouseOut, false);
// Unsubscribe from events on destroy
this.on('destroy', function() {
this.app.mouse.off("mousemove", this.onMouseMove, this);
this.app.mouse.off("mousedown", this.onPress, this);
this.app.mouse.off('mouseup', this.onRelease, this);
window.removeEventListener('mouseout', onMouseOut, false);
});
};
CameraMovement.prototype.onPress = function(e) {
window.focus();
//console.log('MOUSE DOWN/PRESS');
// e.button
switch (e.button) {
case (pc.MOUSEBUTTON_LEFT):
break;
case (pc.MOUSEBUTTON_MIDDLE):
break;
case (pc.MOUSEBUTTON_RIGHT):
if (this.clientHandler.playerDeployed && this.clientHandler.allowPlayerMovement) {
this.app.mouse.enablePointerLock();
console.log('LOCK ON:', pc.Mouse.isPointerLocked());
}
break;
default:
break;
}
};
CameraMovement.prototype.onRelease = function(e) {
//console.log('MOUSE RELEASE');
this.app.mouse.disablePointerLock();
console.log('LOCK: OFF', pc.Mouse.isPointerLocked());
};
CameraMovement.prototype.onMouseMove = function (e) {
if (this.app.mouse.isPressed(pc.MOUSEBUTTON_RIGHT) && !this.app.xr.active) {
console.log('CAM movement');
this.eulers.x -= ((this.mouseSpeed * e.dx) / 60) % 360;
this.eulers.y += ((this.mouseSpeed * e.dy) / 60) % 360;
if (this.eulers.x < 0) this.eulers.x += 360;
if (this.eulers.y < 0) this.eulers.y += 360;
// Restrict camera rotation if in first person
if (this.activateFirstPerson) {
if (this.eulers.y <= 378 && this.eulers.y > 296) {
} else {
//console.log('restrict camera movement');
this.eulers.y -= ((this.mouseSpeed * e.dy) / 60) % 360;
}
}
}
};
Hmm… there are a few things you can try.
The HTML UI could stop the event propergration when interactived with so the PlayCanvas event doesn’t get the event. I can’t remember what the order is.
You may also would like to try having your own abstract input layer that listens to the mouse events and checks if the UI is being interacted with before sending its own event that your game listens to for mouse events.
I’ve done something like that here https://playcanvas.com/project/560025/overview/isometric-base-builder
How would I go about stopping the event propergration from UI script?
Overviewing that project, I am confused as to where the events are actually occuring due to (logic-game.js & taps-input.js) scripts.
Using the HTML/CSS UI for example, how would one be able to rotate the camera and still interact with the UI click button?
Assuming the UI is the HTML/CSS, listen for the mouse event on the DOM on the HMTL and use Event.stopPropagation() - Web APIs | MDN I believe.
Here’s a quick example based off that HTML/CSS project you have linked: https://playcanvas.com/editor/scene/1302577 (notice that you can’t move the camera while over the HTML container for the UI in the top left)
This is what I needed man, I highly appreciate it!
I was starting to get gray hairs from this 
not even gonna lie.