画像はです。大きい画像を指定しても強制的にこのサイズで描画します。つまり、大きくするとメモリが無駄になるだけです。 実行は、Google Chrome 推奨ですが、Three.js とは言え、Canvas を使用しているので他のブラウザでも動作はします。速度的に Google Chrome 推奨です。( 今日自分の iPhone で見たら物凄く遅いですが、一応動作していました )
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
function openThree(your_image_60) {
Shadowbox.open({
player: 'iframe',
content: 'about:blank',
options: {
onFinish: function(target) {
setTimeout( function() {
var doc = document.getElementById("sb-player").contentWindow.document;
doc.write("<"+"style> body { background-color:#fff; } </"+"style>");
doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
doc.write("<"+"script type=\"text/javascript\">image_url='" + your_image_60 + "';</"+"script>");
doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
doc.close();
},100 );
}
}
});
}
</script>
<input type="button" value="飛翔する200人の初音ミク" onclick="openThree('http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png')" />
元の大きな画像はこちらです。左上と右上の部分が座標移動しているだけですが、羽ばたいているように見えると思います。 Three.js のオリジナルはこちらから見る事ができます ここでは、Three.js の内容では無く、Shadowbox を使って IFRAME 内に動的にページを作成する事が重要です。Three.js では、通常画像の URL を指定する事によってその画像をページ内に大きく表示してくれますが、HTML ページを指定すると IFRAME を使用します。 昨今、他のページを埋め込むのは自分のサイトでもいろいろ難しい問題がありますが、ここでは document.write を使って同一ドメインのページを表示しているのと同等の IFRAME を動的に作成する方法を示しています。 自分で IFRAME を用意してもいいのですが、どうせなので Shadowbox の美しいウインドウを使ってみました。また、表示する内容も Three.js のサンプルを改造して『初音ミク』の画像を飛ばせています。Three.js の部分は全て JavaScript に書き込んで、画像だけを変更可能にしています。 Shadowbox も、自分のサイトにホスティングして、記事毎に動的にロードする方法を示していますが、もしよろしかったらこの部分はご自由にお使い下さい。( ホスティングをそのまま使ってもいいですし、コードを転用なさってもかまいません )
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 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 での表示テスト
