ui-mousecontrols v0.1.2

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