Cardboard実験サイト 6 / gyro.jsに含まれる関数、変数

デモサイト

ダウンロード

rotationRate(移動量）

rx = event.rotationRate.beta

ry = event.rotationRate.gamma

rz = event.rotationRate.alpha

acceleration(移動速度)

ax = event.acceleration.x

ay = event.acceleration.y

az = event.acceleration.z

orientation(初期状態に対する向き)

ox = event.alpha

oy = event.gamma

oz = event.beta

orientation(デバイスの向き)

"PU” portrait upside up

"PD” portrait upside down

"LL" landscape left

"LR" landscape right

例:

//Gyroオブジェクト生成

var gyro = new Gyro();

//x方向の相対位置

var ox  = gyro.ox;

//x方向の移動速度

var ax  = gyro.ax;

//x方向の移動量

var rx  = gyro.rx;

gyro.jsソース


devicemotion、devicemotionイベントハンドラを設定し、イベントからGyroscopeの情報を取得して変数にセットする。
accelerationの値からデバイスの縦、横位置を推測して変数にセットする。

Gyro = function() {

    try {

        if (event == null

            || typeof window.DeviceMotionEvent == "undefined"

            || typeof window.DeviceOrientationEvent == "undefined") {

            throw("Gyro not available.");

        }

        this.rx = this.ry = this.rz = this.ax = this.ay = this.az = 0;

        this.orientation = "";

        var gyro = this;

        window.ondevicemotion = function(event) {

            gyro.rx = event.rotationRate.beta;

            gyro.ry = event.rotationRate.gamma;

            gyro.rz = event.rotationRate.alpha;

            gyro.ax = event.acceleration.x;

            gyro.ay = event.acceleration.y;

            gyro.az = event.acceleration.z;

            gyro.orientation = "PU";

            if (gyro.ax < -5) gyro.orientation = "LL";

            else if (gyro.ax > 5) gyro.orientation = "LR";

            else if (gyro.ay > 5) gyro.orientation = "PD";

        }

        window. ondevicemotion = function(event) {

            gyro.ox = event.alpha;

            gyro.oy = event.gamma;

            gyro.oz = event.beta;

        }

    } catch(e) { alert(e); }

}

• デモサイト
• ソースコードダウンロード
• Cardboard実験サイト 
• Cardboard実験サイト 2.1 / HTMLサンプルの構成 

• Cardboard実験サイト 2.2 / HTML (iframe構成)

• Cardboard実験サイト2.3 / HTML (Photo1 - ステレオ写真)

• Cardboard実験サイト 3 / Threeサンプルの構成 
• Cardboard実験サイト 4.1 Gyro/Panorama 
• Cardboard実験サイト 4.2 Gyro/Cube1 (div構成)
• Cardboard実験サイト 4.3  Gyro / Cube2 (iframe構成)
• Cardboard実験サイト 5 / cardboard.jsに含まれる関数、変数 
• Cardboard実験サイト 6 / gyro.jsに含まれる関数、変数