2015年6月6日土曜日

Cardboard実験サイト 4.2 Gyro / Cube1 (div構成)

概要
Gyroscopeのデータを取得して、デバイスの移動に応じて画面を動かすサンプルです。

このサンプルではdivで構成した左右二つの画面に視差を付けて３D画像を描画します。

HTML/Cube1のdivを組み合わせて作る立方体を中央に置き、Gyroと連動してCubeを回転させます。感覚的には頭の動きに合わせて視点が動くような感じです。

iOS/Androidで基本的に同じ使い方ができますが、Androidでのテストは行っていません。動作不良の場合は若干の修正で対応できるはずです。

画面レイアウト設定
タグ構造 
<body onload="init();" ontouchmove="blockMove(event)">
    <!-- HTMLL/Cube1と同じ -->
    <div id="container">
      <div id="outerBox">
        <div id="boxR" onclick="restart()">
          <div id="canvasR"></div>
        </div>
        <div id="boxL" onclick="back()">
          <div id="canvasL"></div>
        </div>
      </div>
    </div>
    <!-- Cubeを組み立てる６面のdiv -->
    <div id="divFaces" style="display:none">
        <div id="cube">
            <div class="face" id="f1">One</div>
            <div class="face" id="f2">Two</div>
            <div class="face" id="f3">Three</div>
            <div class="face" id="f4">Four</div>
            <div class="face" id="f5">Five</div>
            <div class="face" id="f6">Six</div>
        </div>
    </div>
</body>




index.htmlのjavascript
js/cssインポート
        <script src="../../js/cardboard.js"></script>
        <script src="../../js/gyro.js"></script>
        <script src="../../HTML/js/Cube.js"></script>
        <script src="Cube1.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/cardboard.css" />
        <link rel="stylesheet" type="text/css" href="Cube1.css" />


javascript
index.html
        var gyro = null;
        function init() {
              //Gyroオブジェクト生成
              gyro = new Gyro();
              //デバイス横位置の大きさに合わせて左右の画面をリサイズ、イベント設定を行う。
              Config.setBoxSizes();
              //視点の設定
              Config.setParspective(4, 0, 500);
             //Cubeオブジェクト追加
              var c1 = Canvas.add(Cube1);
              //タイマーイベントスタート
              Canvas.start(50);
        }
        //スワイプで画面が動かないようにする。
        function blockMove(event) {
              if (Config.isIOS) event.preventDefault();
        }



Cube1.js





//Cubeのコンストラクタを継承
Cube1 = function(parentDiv, side, div) {
            Cube.apply(this, arguments);
        }


        //Cubeのプロトタイプを継承
        Cube1.prototype = new Cube();


        //Canvasのタイマイベントから呼ばれる。アニメ描画。
        Cube1.prototype.move = function() {
            var ry = gyro.ox*2;
            var rx = gyro.oy*2;
            this.div.style.webkitTransform = "translateX(100px) "
                + "translateY(100px) "
                + "rotateX("+ rx + "deg) "
                + "rotateY("+ ry + "deg) ";
        }
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)