画像は、良く見ても絶対解りませんが以下が原寸です。機能は変更して無いので、カーソルを避けて飛びます
画像の本来の姿は、DAZ3D の3Dキャラクタに初音ミクのツインテールさせて羽を付けた後姿です。貼り付け方
<input id="birds_button" type="button" value="Three.js Birds 表示開始" onclick='strat_birds()' />
<div>
<iframe
src="about:blank"
id="birds"
name="birds"
scrolling="no"
width="600"
height="400"
marginwidth="0"
marginheight="0"
style='border:solid #000000 1px;'
></iframe>
</div>
<script type="text/javascript">
function strat_birds() {
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='ここを好きな60x60の背景透過png画像に変更する';</"+"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>
ブログによったら、改行が br に変換されないようにする必要があるかもしれませんが、Seesaa では問題ありませんでした。( おそらく今時のブログならば問題無いと思います ) 関連する記事 『ブラウザ元年』 Three.js 使って、ブログにも簡単に 3D ディスプレイ Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました
|
|
【Three.jsの最新記事】
- Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました
- 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 はダメです )
