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