ボタンを押すと、こんな感じの画像が表示されて、背景と前景の間を 3D オブジェクトが鳥のように舞います。
前景画像は背景透過。 鳥画像は、縦横 60px 推奨( 大きいと無駄にメモリを使うだけなので ) ※ オブジェクトは、マウスカーソルを避けようとします。 貼り付け用ソースコード
<input type="button" value="表示開始" onclick='three_canvas_bird()' />
<iframe
src="about:blank"
id="birds"
name="birds"
scrolling="no"
width="600"
height="450"
marginwidth="0"
marginheight="0"
style='display:block;border:solid 1px #000000;'
></iframe>
<script type="text/javascript">
function three_canvas_bird() {
var background_img = "https://lh3.googleusercontent.com/-FZouzPuFejo/UVSH_NqCE8I/AAAAAAAAMeg/iahQIvqs9k0/s600/_img.jpg";
var forground_img = "https://lh6.googleusercontent.com/-jwlcFaTFj2g/UVSJlDFpiEI/AAAAAAAAMeo/N5I5-coboAk/s500/_img.png";
var bird_img = "http://winofsql.jp/image/s60_1.png";
var doc = document.getElementById("birds").contentWindow.document;
doc.write("<"+"style> body { background:url("+background_img+") no-repeat; } </"+"style>");
doc.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min57.js\"></"+"script>");
doc.write("<"+"script type=\"text/javascript\">image_url=\""+bird_img+"\";</"+"script>");
doc.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/birds.js\"></"+"script>");
doc.write("<div style='position:absolute;left:0px;top:0px;width:100%;height:100%;background:url("+forground_img+") no-repeat center bottom;'></div>");
doc.close();
}
</script>
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js + Shadowbox 飛翔する200人の初音ミク
- 最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた
- 動的に typeface.js フォントを適用させる
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
- 自作デザインフォントによる、typeface.js での表示テスト
