プログラミング雑記: 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で実行する。

プログラミング雑記

2015年5月8日金曜日

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

0 件のコメント:

コメントを投稿

自己紹介