2015年5月8日金曜日

Cardboard実験サイト2.1 / HTML (div構成)

概要

iPhoneを横位置にしたときに画面を二分割し、視差のあるイメージを表示します。
共通のjavascript(cardboard.js)は画面レイアウト設定と、左右の画面に対する処理を一括して行う機能を提供します。
タイマーイベントで描画関数を呼び、オブジェクトを移動させ、アニメを作ります。

このサンプルではdivだけで画面を構成しています。同一window内にあるため変数を共有でき、アニメ描画のためのループも左右で同じタイミングで行えます。

残念ながら、translate、rotateの結果divからはみ出してもクリッピングしてくれません。
クリッッピングが必要な場合はCardboard実験サイト2.2 / HTML (iframe構成)をご覧ください。

画面レイアウト設定
タグ構造 

bodyタグ内は次のようにdivを数階層積み重ねたものです。
javascript、cssはdivのidを使用するので、idはこのとおりにしておきます。

  <body onload="init();" ontouchmove="blockMove(event)" >
    <div id="container">
      <div id="outerBox">
        <div id="boxR">
          <div id="canvasR"></div>
        </div>
        <div id="boxL">
          <div id="canvasL"></div>
        </div>
      </div>
    </div>
  </body>

index.htmlのjavascript
js/cssインポート

    <script src="../../js/cardboard.js"></script>
    <script src="../js/Plate.js"></script>
    <script src="Plate1.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/cardboard.css" />

javascript
index.html

    //body.onloadで呼び出し、初期化を実行。
    function init() {
        Config.setBoxSizes();
        Config.setParspective(parsXd, parsYd, parsZ);
        var obj = Canvas.add(Part);
        obj.setParam({key:val, ... });
        Canvas.start();
    }
      function blockMove(event) {
          event.preventDefault();
      }

Plate1の場合
index.html

    function init() {
          Config.setBoxSizes();
          Config.setParspective(4, 0, 100);

          var tx = Config.centerX - 50;
          var ty = Config.centerY - 35;

          var p1 = Canvas.add(Plate1);
          p1.setParam({"tx":tx, "ty":ty, "tz":50, "rx":0, "ry":0, "rz":0, "c":"#ddf" });

          var p2 = Canvas.add(Plate1);
          p2.setParam({"tx":(tx-10), "ty":(ty-10), "tz":40, "rx":50, "ry":50, "rz":50, "c":"#dfd" });

          var p3 = Canvas.add(Plate1);
          p3.setParam({"tx":(tx+10), "ty":(ty+10), "tz":30, "rx":-50, "ry":-50, "rz":-50, "c":"#fdd" });

          Canvas.start();
      }

Plate1.js

    Plate1 = function(parentDiv, side, div) {
          //Plateのコンストラクタを継承。PlateはPartを継承。
          Plate.apply(this,arguments);
          this.div.innerText = "\n 3D Sample \n ";
          this.div.style.border = "solid 1px black";
    }
     //Plataのprototypeを継承
    Plate1.prototype = new Plate();
    //パラメータを変数にセット。
    Plate1.prototype.setParam = function(param) {
        this.Param = param;
        this.tx = param["tx"];
        this.ty = param["ty"];
        this.tz0 = this.tz = param["tz"];
        this.rx = param["rx"];
        this.ry = param["ry"];
        this.rz = param["rz"];
        this.div.style.backgroundColor = param["c"];
    }
    //Canvasのタイマイベントで呼ばれる。
    Plate1.prototype.move = function() {
        this.rx += 1;
        this.ry += 0.5;
        this.rz += 1;
        if (this.tz > -150)
            this.tz -= 2;
        else
             this.tz = this.Param["tz"];;
        this.div.style.webkitTransform = "translateX(" + this.tx + "px) "
                                                              + "translateY(" + this.ty + "px) "
                                                              + "translateZ(" + this.tz + "px) "
                                                              + "rotateX("+ this.rx + "deg) "
                                                              + "rotateY("+ this.ry + "deg) "
                                                              + "rotateZ("+ this.rz + "deg) ";
    }

canva.jsの関数

Config.setBoxSizes();
Config.setFrames();
Config.setFrameCanvas(window.name);
  デバイス横位置の大きさに合わせて左右の画面をリサイズ、イベント設定を行う。

Config.setParspective(parsXd, parsYd, parsZ);
  視点、視差を設定。
  parsXd 画面中心からの左右距離(px)。
                左画面はマイナス、右画面はプラスし、視差を作る。
  parsYd 画面中心からの上下距離(px)      
  parsZ   画面からの遠近距離。

var obj = Canvas.add(Part);
    Canvasにオブジェクトを追加。
  Part Parts(後述)のサブクラス。
  
  obj.setParam(param);
    param objが使用するパラメータを設定。
                例: {"tx":tx, "ty":ty, "tz":50, "rx":0, "ry":0, "rz":0, "c":"#ddf" }
                     パラメータのキー定義、値の適用はPartが実装。

 Canvas.start();
  タイマーイベントスタート。
  デフォルトは50msecの間隔でイベント実行。
  描画に50msec以上かかる場合は、描画完了後に次のイベントを実行。

  Part.prototype.move();
    タイマーイベントで呼ばれるfunction。
    デフォルトでは何も行わないので、各Partsで実行する。

0 件のコメント: