画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン
3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せるプラグインがあったのでメモ。
■必要プラグイン
- jquery.reel-min.js
- jquery.disabletextselect-min.js
- jquery.mousewheel-min.js
ものによって公式っぽいダウンロード先が見つからなかったのでリンク無し。
■サンプル
http://sample.taitan916.info/3dview2/
■ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3Dビューのテスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script language="JavaScript" type="text/javascript" src="jquery.reel-min.js"></script> <script language="JavaScript" type="text/javascript" src="jquery.disabletextselect-min.js"></script> <script language="JavaScript" type="text/javascript" src="jquery.mousewheel-min.js"></script> <script type='text/javascript'> $(function(){ $('#imageId').reel( { frames: 36, //フレーム数。画像の総枚数を入れる。 images: './img/chair_###.jpg', //画像指定。「#」はワイルドカード。 } ); }); </script> </head> <body> <dif id="imageArea"> <img id="imageId" src="./img/chair_001.jpg" width="500" height="500" /> </div> </body> </html>
■その他
スマホからも操作できるのが良い。3Dデータよりは動作が軽くなりそう。縦方向とかまでは無理だけど、横方向に360度回転させたい場合は選択肢として使えそう。
関連記事
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
imgタグで作成したグラフをjQueryでリアルタイムに動かす
このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...
テキストエリアを自動でリサイズ
改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
jQueryでボタンをクリックしてクリップボードにコピー
■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...