コンテンツ開始

2013年03月27日


Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました

関連する記事

『初音ミクを群れで飛ばす』-- Three.js の Canvas サンプルで『鳥が群れで飛ぶ』という凄いのがあるんですが、平面の画像をテクスチャとして差し替えてブログに貼れるようしました。 

前回は、単純に Three.js のサンプルを貼っただけのようなものでしたが、画像をもっと簡単に使用できるようにして、いろいろやってるうちに、ブログで 3D の可能性が見えて来たような気がしてみたり。

ここまで来れば、背景やら画像やら差し替え機能の付いた、jQuery のプラグイン作るのはすぐですし。
※ まだ、ID が固定なので同じページに二つの記事が同じものを使うとまずいです。
<img src="http://lh6.googleusercontent.com/-rALYQbtofec/UU2QP5kdd2I/AAAAAAAAMa0/btK53_S7RSc/s60/wing.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;" onclick='strat_birds(this.src)' />

<img src="http://lh6.googleusercontent.com/-ee7i9HqCPvo/UVHqU36hnAI/AAAAAAAAMc0/r78cSNjeu8g/s60/_img.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;"  onclick='strat_birds(this.src)' />

<img src="http://lh5.googleusercontent.com/-AinOaWGth88/UVHj_A27xzI/AAAAAAAAMcs/_vJj9Koxq2s/s60/_img.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;"  onclick='strat_birds(this.src)' />

<img src="http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;"  onclick='strat_birds(this.src)' />

<input type="button" value="表示終了" onclick='document.getElementById("birds").src="about:blank"'>
<div style='margin-top:8px;'>
<iframe
	src="about:blank"
	id="birds"
	name="birds"
	scrolling="no"
	width="600"
	height="400"
	marginwidth="0"
	marginheight="0"
	style='border:solid #000000 1px;background:url(https://lh4.googleusercontent.com/-RY1wQcR1nEE/UVHtKZXhRII/AAAAAAAAMc8/maFCUrPKRzw/s600/_img.jpg);'
></iframe>
</div>
<script type="text/javascript">
function strat_birds(url) {
	var str;
	str="<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min57.js\"></"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\">image_url='"+url+"';</"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/birds.js\"></"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);
	document.getElementById("birds").contentWindow.document.close();
}
</script>

関連する記事

『ブラウザ元年』 Three.js 使って、ブログにも簡単に 3D ディスプレイ


posted by at 2013-03-27 03:56 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
コンテンツ終了
右サイド開始
コンテナ終了
base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX