aframe-shake2show-component

    1.0.3 • Public • Published

    aframe-shake2show-component

    Tap the side of the smart device (qick shake trigger) to display a UI Modal for A-Frame VR.

    shake2show-illustration


    Integrated Shake.js - JavaScript plugin for mobile web browsers using device accelerometer.

    Author: Alex Gibson

    https://github.com/alexgibson/shake.js

    Modified aframe-ui-modal-component

    Author: IdeaSpace

    https://github.com/IdeaSpaceVR/aframe-ui-modal-component


    Properties

    Property Description Default Value
    trigger Event to make dialog or menu visible: 'shake' or 'click' 'shake'
    threshold Default for shake velocity threshold for shake to register 5
    timeout Default for shake interval between events. 500
    zpos Position the dialog or menu on the z-axis. In meters. -0.85
    xoffset Position offset value on the x-axis from center. In meters. 0
    yoffset Position offset value on the y-axis from center. In meters. 0

    Usage

    Demo

    Browser Installation

    Install and use by directly including the browser files:

    <head>
      <title>My A-Frame Scene</title>
      <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> 
      <script src="https://rawgit.com/rdub80/aframe-shake2show-component/master/dist/aframe-shake2show-component.min.js"></script> 
    </head>
     
    <body>
      <a-scene>
       <a-entity shake2show visible="false"></a-entity>
       <a-entity camera look-controls></a-entity>
      </a-scene>
    </body>

    NPM Installation

    Install via NPM:

    npm install aframe-shake2show-component

    Then register and use.

    require('aframe');
    require('aframe-shake2show-component');

    In browser testing

    For console testing on desktop trigger shake event

    <script>
    var triggerShake = document.createEvent("HTMLEvents");
    triggerShake.initEvent("shake", true, true);
     
    function shakeMe(){
      document.dispatchEvent(triggerShake);
    }
    </script> 

    Dependencies

    You need a camera component in your scene.

    Your web browser must support the devicemotion event for this plugin to work. Shake.js uses built-in feature detection to determine if it can run in your web browser. It will terminate silently on non-supporting browsers.

    http://w3c.github.io/deviceorientation/spec-source-orientation.html

    Supported web browsers/devices

    • iOS Safari 4.2.1 (and above)
    • Android 4.0.3 (default browser)
    • Chrome 41+ for Android
    • Opera Mobile (Android)
    • BlackBerry PlayBook 2.0
    • Firefox for Android
    • FirefoxOS Devices

    Install

    npm i aframe-shake2show-component

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • roland.dubois