uiMouseControls
Mouse controls websemble component
Element to read mouse input. The element emits events only if the pointer is locked to the parent view.
Installation
cd myproject
npm install ui-mousecontrols
Getting started
Append the ui-mousecontrols
element to a page
or view, then request the pointer lock and
listen to mouse events.
<view-myview>
<ui-mousecontrols></ui-mousecontrols>
</view-myview>
// myview.js
class MyView extends HTMLElement {
// ...
connectedCallback() {
let view = this;
view.addEventListener('mouseMove',
(event) => view.doStuff(event.detail));
this.scope.onAppReady.then(
() => view.requestPointerLock()
);
}
// ...
}
Events
mouseMove
Fired every time the mouse moves. The payload is:
- x (number): X coordinate in pixels
- y (number): Y coordinate in pixels
-
normalized (object): Normalized coordinates:
- x (number): X normalized coordinate
- y (number): Y normalized coordinate