あらかじめ作ったステレオ写真を表示します。
これはステレオ写真をハコスコで見られるようにしようと作ったもので、画面分割は行っていません。
index.htmlで画面レイアウトのためのタグ構造を作り、画面サイズに応じてcardboard.jsでレイアウト設定を行います
タグ構造
bodyタグ内は次のようにdivを数階層積み重ねたものです。
javascript、cssはdivのidを使用するので、idはこのとおりにしておきます。
<body onload="init();" ontouchmove="blockMove(event)" >
<div id="container">
<div id="outerBox" class="photo" onclick="changeImage()">
</div>
</div>
</body>javascript
index.html
function init() { //divの配置
Config.setContainerSize(); //最初の画像表示
changeImage();
}
//画像名配列
var arr = new Array("image1.jpg", ""image2.png", ...);
var ix = -1;
//clickまたはtouchstartイベントで呼ばれ、画像を切り替える。
function changeImage() {
//右画面で次へ進み、左が画面で前に戻る。
if (event.pageX == null)
ix = 0;
else
ix += (event.pageX > (Config.winW / 2) ? 1 : -1);
if (ix >= arr.length)
ix = 0;
else if (ix < 0)
ix = arr.length - 1;
//divのbackgroundImageにセット。
with(document.getElementById("outerBox").style) {
backgroundImage = "url(Images/" + arr[ix] + ")";
backgroundSize = "100%";
}
}
//スワイプされても画面を動かさないようにする。
function blockMove(event) {
if (Config.isIOS) event.preventDefault();
}
Config.setContainerSize();
デバイス横位置の大きさに合わせて画面をリサイズ、イベント設定を行なう。
また、デフォルトで次のclickまたはtouchstartイベントハンドラをセットする。
左画面ダブルクリック 上の階層に戻る
右画面ダブルクリック location.reload();
シングルクリック Config.onclickにfunctionが設定されていればそれを実行、
さもなければなにもしない。
イベントハンドラが不要な場合はsetContainerSizeを呼ぶ前に次の行を追加。
Config.addClickEvent = false;Photo1ではdivにonclickイベントハンドラを設定することで上記設定を置き換えている。
<div id="outerBox" class="photo" onclick="changeImage()">
- デモサイト
- ソースコードダウンロード
- 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に含まれる関数、変数
