関連する記事 『初音ミクを群れで飛ばす』-- 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 ディスプレイ
|
|
【Three.jsの最新記事】
- 『初音ミクを群れで飛ばす』-- Three.js の Canvas サンプルで『鳥が群れで飛ぶ』という凄いのがあるんですが、平面の画像をテクスチャとして差し替えてブログに貼れるようしました。
- Google Chrome または Firefox で( WebGL ) フリーフォントを 3D 化して表示して画像を取得
- まだ、遊べるほどではありませんが、Cube World + 3D モデル 空間をカメラ目線で移動
- WebGL Miku / ioqueさん
- 天使キャラ( 3D ローポリゴン ) を Three.js で、ブラウザが表示可能なら、WebGL で表示。そうでないなら Canvas で表示しています。ぜひ、キーでぐりぐり動かして下さい。
- WebGL 限定 miku( キーボードで移動・回転をフルサポート )
- WebGL 限定 miku( カーソルがカメラになります )
- 最新の Three.js でできる事。JavaScript+WebGLの凄さを体験してみましょう
- メタセコイアの素材からまわりまわってこんな画像に例えばなる訳ですが( Google+の クリエイティブキット )
- Canvas を使って 3D データを描画する JavaScript ライブラリ『Three.js』のバグ対応( Firefox、IE9、Opera で正しくテクスチャが適用されない )
- Three.js と言います。JavaScript だけでこんな事ができる時代になりました( IE8 はダメです )
