関連する記事 『初音ミクを群れで飛ばす』-- 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 ディスプレイ