device-orientation-manager

DeviceOrientationManager

A manager which will help you to control DeviceOrientation easily.

This manager supports graceful degradation, configurable frequency and smoothing.

Usage

Install:

npm i device-orientation-manager --save

Then:

import DeviceOrientationManager from 'device-orientation-manager';

const options = {
  // Frequency, number, defaults to 10.
  // Event will be emitted every (1000 / freq)ms.
  freq: 10,
  // Allow user to control by mouse or touch? boolean | 'auto', defaults to 'auto'.
  // If 'auto', mouse controlling will be enabled on pc, touch controlling will be enable on mobile without supporting deviceorientation event.
  enableMouseOrTouch?: 'auto',
  // Field will be controlled, defaults to null.
  container?: HTMLElement,
  // User defined orientation mode, defaults to 'auto'.
  // If 'auto', orientation will be auto changed by window.orientation.
  orientation?: 0 | 90 | 180 | -90 | 'auto',
  // Filter smoothing, defaults to .5.
  // Larger smoothing, larger weight for current value.
  filterSmoothing?: number,
  // Filter window size, defaults to 10.
  // The larger size, better effect and larger delay for current value.
  filterWindowSize?: number
}

const doManager: DeviceOrientationManager = new DeviceOrientationManager(options);
// change options after constructor
doManager.freq = 30;

doManager.addEventListener(
  'orientationchange',
  orientation => {
    // 0 | 90 | 180 | -90
    console.log(orientation);
  }
);

doManager.addEventListener(
  'deviceorientation',
  ({yaw, pitch, roll, order, orientation}) => {
    console.log({
      // -PI ~ PI
      yaw,
      // -PI ~ PI
      pitch,
      // -PI / 2 ~ PI / 2
      roll,
      // 0 | 90 | 180 | -90
      orientation,
      // 'YXZ'
      order
    });

    const q0 = new Quaternion();
    const q1 = new Quaternion().rotateX(-Math.PI * 80 / 180);
    const euler = new Euler();
    euler.set(pitch, yaw, roll, order);
    camera.quaternion.fromEuler(euler);
    camera.quaternion.multiply(q1);
    camera.quaternion.multiply(q0.setAxisAngle(new Vector3(0, 0, 1), -orientation));
  }
);

doManager.start();

// If you want to stop
doManager.stop();