勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

  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度回転させたい場合は選択肢として使えそう。

 - jQuery

  関連記事

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...