UNPKG

device-orientation-manager

Version:

A manager which will help you to control DeviceOrientation easily.

83 lines (68 loc) 2.2 kB
# DeviceOrientationManager A manager which will help you to control DeviceOrientation easily. This manager supports graceful degradation, configurable frequency and smoothing. ## Usage Install: ```sh npm i device-orientation-manager --save ``` Then: ```ts 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(); ```