JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<script src="http://admiralpotato.github.io/js/npos3d/build/npos3d.min.js"></script>
<div id="output">Output</div>

CSS

*{
    font-family: sans-serif;
}
#output{
    background-color: #f99;
    color: #000;
}

JavaScript

//http://tomg.co/gyrojs

(function(){function e(){window.addEventListener("MozOrientation",function(c){d.push("MozOrientation"),a.x=c.x-b.x,a.y=c.y-b.y,a.z=c.z-b.z},!0),window.addEventListener("devicemotion",function(c){d.push("devicemotion"),a.x=c.accelerationIncludingGravity.x-b.x,a.y=c.accelerationIncludingGravity.y-b.y,a.z=c.accelerationIncludingGravity.z-b.z},!0),window.addEventListener("deviceorientation",function(c){d.push("deviceorientation"),a.alpha=c.alpha-b.alpha,a.beta=c.beta-b.beta,a.gamma=c.gamma-b.gamma},!0)}var a={x:null,y:null,z:null,alpha:null,beta:null,gamma:null},b={x:0,y:0,z:0,alpha:0,beta:0,gamma:0},c=null,d=[];window.gyro={},gyro.frequency=20,gyro.calibrate=function(){for(var c in a)b[c]=typeof a[c]=="number"?a[c]:0},gyro.getOrientation=function(){return a},gyro.startTracking=function(b){c=setInterval(function(){b(a)},gyro.frequency)},gyro.stopTracking=function(){clearInterval(c)},gyro.hasFeature=function(a){for(var b in d)if(a==d[b])return!0;return!1},gyro.getFeatures=function(){return d},e()})(window)


var n = NPos3d,
    s = new n.Scene()
cube = new n.Ob3D({
    scale: [5, 5, 5],
    rotOrder: [2,0,1],
    shape: n.Geom.axies
});
s.add(cube);

var output = document.getElementById('output');

gyro.startTracking(function(o) {
    // o.x, o.y, o.z for accelerometer
    // o.alpha, o.beta, o.gamma for gyro
    output.innerHTML = 
        '<br />x: ' + o.x +
        '<br />y: ' + o.y +
        '<br />z: ' + o.z +
        '<br />alpha: ' + o.alpha +
        '<br />beta: ' + o.beta +
        '<br />gamma: ' + o.gamma;
    
    //cube.pos[0] = o.alpha * 0.5;
    //cube.pos[1] = o.beta * 0.5;
    //cube.pos[2] = o.gamma * 0.5;
    //COMPAS!!!
    cube.rot[0] = o.gamma * deg;
    cube.rot[1] = o.beta * deg;
    cube.rot[2] = o.alpha * deg;

});