2015年6月9日火曜日

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

概要
iPhoneを横位置にしたときに画面を二分割し、視差のあるイメージを表示します。
iframeを使用しています。

二画面が各々独立したwindowとなり、translateの結果divからはみ出した部分はクリッピングされます。

一方、独立したwindowのためタイマーイベントのループも別々タイミングで行われるため、単純にループ内で定数を足すような方法では、時間経過とともに同期のズレが発生します。Dateの時刻を利用することで左右のズレを避けることができます。

javascriptはcardboard.jsとcardboard−iframe.jsをインポートします。cardboard−iframe.jsはcardboard.jsへのfunctionを追加と一部置き換えを行います。これらは
画面レイアウト設定と、左右の画面に対する処理を一括して行う機能を提供し、また
タイマーイベントで描画関数を呼び出します。

画面レイアウト設定
index.htmlで画面レイアウトのためのタグ構造を作り、画面サイズに応じてcardboard−iframe.jsでレイアウト設定を行います

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

index.html
    <body onload="init();">
        <div id="container">
            <div id="outerBox">
                <div id="boxL">
                    <iframe id="ifL" name="ifL" src="Part.html"></iframe>
                </div>
                <div id="boxR">
                    <iframe id="ifR" name="ifR" src="Part.html"></iframe>
                </div>
            </div>
        </div>
    </body>

 Part.html (iframeのsrc)
    <body onload="init();">
        <div id="container">
            <div id="outerBox">
                <div id="canvas"></div>
            </div>
        </div>
    </body>

 
js/cssインポート
        <link rel="stylesheet" type="text/css" href="../../css/cardboard.css" />
        <script src="../../js/cardboard.js"></script>
        <script src="../../js/cardboard-iframe.js"></script>
        <script src="../../js/gyro.js"></script>

cardboard.jsの後にcardboard-iframe.jsを追加。

javascript
index.html
    //body.onloadで呼び出し、初期化を実行。
    var gyro = null;
    var startTime = new Date().getTime();
    function init() {
        //cardboad.jsのGyroオブジェクト生成。
         gyro = new Gyro();
         //div, iframeの配置。
         Config.setFrames();
    }

Part.html (ifarmeのsrc)

             //onloadイベント
             function init() {
             //iframe内のdiv配置。
             Config.setFrameCanvas(window.name);
             //iframeのサイズがjavascriptで決定できず表示位置がズレるので位置を調整。
             Config.body.scrollLeft = 0;
             //視点設定(イタリックは実際の値で置き換え)
             Config.setParspective(Config.side=="L"?-4:4, parsY, parsZ);
             //描画オブジェクト追加。
             var obj = Canvas.add(Part);
             //パラメータ設定。paramはkey/valueのArray。JSONなら{key1:value1, key2:value2, ...}。 
             obj.setParam(param);
             //タイマーイベントスタート。
             Canvas.start();
        }

Cube2.js
    //cardboard-iframe.jsのCanvas.add(func)実行中に呼ばれる。
    Cube2 = function(parentDiv, side) {
        //HTMLに配置したCubeのdivをコピーする。
        this.div = document.getElementById("divFaces").cloneNode(true);
        this.div.className = "o3d";
        this.div.style.display = "block";
        //parentDivに追加。
        parentDiv.appendChild(this.div);
    }

    //cube.htmlのaddCube(param)から呼ばれる。
    Cube2.prototype.setParam = function(param) {
        this.ty = -70;
        this.rx = this.ry = this.rz = this.tx = this.ty = this.tz = 0;
        this.dx = param["dx"] == null ? 0 : param["dx"];
        this.dy = param["dy"] == null ? 0 : param["dy"];
        this.r = param["r"] == null ? 0 : param["r"];
    }

    //Canvasのタイマーイベントで呼ばれる。
    Cube2.prototype.move = function() {
        //index.htmlのonloadが実行されるまではgyroがnull。
        if (parent.gyro == null) return;
        //Dateの時刻を利用してアニメ用の変数を設定。
        var f = new Date().getTime() / 50;
        this.rx = f * 0.8;
        this.ry = f * 0.9;
        this.rz = f;
        //gyroから値を取得。
        var gx = (parent.gyro.ox + this.dx) * Math.PI / 180;
        var gy = (Math.abs(parent.gyro.oy) + 90) * Math.PI / 180;
        //オブジェクトの座標変換。
        var tx = this.r * Math.sin(gx) + Config.centerX;;
        var tz = this.r * Math.cos(gx) * Math.cos(gy);
        var ty = tz * Math.sin(gy);
        var tt = ty;
        ty -= this.r * Math.sin(this.dy * Math.PI / 180)
        this.div.style.webkitTransform = "translateX(" + tx + "px) "
            + "translateY(" + ty + "px) "
            + "translateZ(" + tz + "px) "
            + "rotateX("+ this.rx + "deg) "
            + "rotateY("+ this.ry + "deg) ";
    }
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

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