Three.js のネタ元は、canvas_geometry_birds です。あちらは鳥オブジェクトですが、少し変更して平面の画像を使えるように改造しています 2014/05/22 : 画像のカスタマイズ方法です 結局、open_three.js は、ただ jQuery のプラグインとして IFRAME の中身を作っているだけなので、を外部にする必要は特にありません。以下のように実装すれば、背景画像は簡単に変更する事ができます。 とりあえず画像を変えてみたい場合は、こちらに 3D イラストのフリー素材があるので、画像をクリックして大きく表示して、大きな画像を右クリックして URL を取得して使ってみて下さい。( 下にあるソースでは、15行目で指定しています ) 蝶の画像は、背景透過の PNG の必要があるので、フリーフォントで簡単ロゴ作成で作成して、Google のギャラリーにアップロードして使用していただくといいと思います。( 下にあるソースでは、12行目で指定しています ) ※ ここでは、jQuery を 1.11.0 にしていますが(4行目)、古い IE だと動作しないかもしれないので、古いバージョンを使用しています。
<script>
// このページに jQuery が無い場合にロード
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></"+"script>");
}
// ▼ 以下は Shadowbox と Three.js のコードロードします
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript">
// jQuery でボタンのイベントを取得して、好きな画像を飛ばします
$(function(){
$("#start_button").openThree("http://winofsql.jp/image/s60_2.png");
});
// ここで背景画像を指定します
var img_url = "https://lh4.googleusercontent.com/-n2hqoMHMJfk/U2JsTXjEtbI/AAAAAAAATV0/hQZ5Oc_RIqA/s1200/uf3_001.jpg";
$.fn.extend({
openThree: function(openThree_Param) {
$(this).bind('click', function() {
Shadowbox.open({
player: 'iframe',
content: 'about:blank',
options: {
onFinish: function() {
setTimeout( function() {
var doc = document.getElementById("sb-player").contentWindow.document;
doc.write("<"+"style> body { background:url("+img_url+"); } </"+"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='" + openThree_Param + "';</"+"script>");
doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
doc.close();
},100 );
}
}
});
});
return this;
}
});
</script>
<button id="start_button">開始</button>
※ このコードをオンラインでテストしたい場合は、こちらから実行できます。このソースコードの右上ツールバーの中の左から２番目のアイコンでクリップボードにコピーされますので、リンク先で貼り付けて『新しく開く』ボタンをクリックしていただくとデモ画面が表示されます 以下は元々の記事です ※ 実行のクリックは、ページが完全にロードしてからでないと動作しないので注意して下さい。 ページ上のコンテンツに対して、jQueryのプラグインを作って、さらにそのプラグインでクリックイベントを登録して Three.js のデモ画面を Shadowbox.js が開いた IFRAME のウインドウに表示します
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript" src="https://lightbox.sakura.ne.jp/demo/three/open_three.js"></script>
<script type="text/javascript">
$(function(){
$("#code140208003926").openThree($("#code140208003926").children("img").attr("src"));
$("#code140208003927").openThree("http://winofsql.jp/image/s60_2.png");
$("#code140208003928").openThree($("#code140208003928").attr("src"));
});
</script>
<button id="code140208003926"><img src="http://winofsql.jp/image/s60_1.png" /></button>
<button id="code140208003927"><img src="http://winofsql.jp/image/s60_2.png" /></button>
<input id="code140208003928" type="image" src="http://winofsql.jp/image/s60_3.png" style="border: solid 1px #000000;border-radius:10px;" />
loadShadowbox.js
if ( !window['lightboxTool'] ) {
window.lightboxTool = {};
}
if ( !window.lightboxTool.initShadowbox ) {
window.lightboxTool.initShadowbox = function ( ) {
Shadowbox.init();
}
}
(function() {
var str;
var userAgent = window.navigator.userAgent.toLowerCase();
if ( !window.Shadowbox ) {
str="";
str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
document.write(str);
if (window.attachEvent){
window.attachEvent('onload', lightboxTool.initShadowbox );
}
else {
window.addEventListener('load', lightboxTool.initShadowbox, false);
}
}
})();
open_three.js
$.fn.extend({
openThree: function(openThree_Param) {
$(this).bind('click', function() {
Shadowbox.open({
player: 'iframe',
content: 'about:blank',
options: {
onFinish: function() {
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='" + openThree_Param + "';</"+"script>");
doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
doc.close();
},100 );
}
}
});
});
return this;
}
});
見せたいのは、Three.js の 3D のデモ画面ですが、Three.js の実行はページの一部で実行するのはとても難しい問題があります。しかし、IFRAME 内に表示すればたいていの問題は解決します。ただ、IFRAME を使う場合殆どの場合は、外部ドメインにページを作っておいて src 属性でその URL を指定するのが通常です。しかし、それではいろいろ管理が面倒で拡張性が無いので JavaScript の document.write で動的に書き出しています。この方法は昔から Google 等が行っていますし、完全なクロスブラウジングです。 書き出すものも、javascript のライブラリにまとめて SCRIPT 要素のまま書き出します。この際少しルールがあり、依存するライブラリは別々の SCRIPT 要素内から書き出す必要があります。それさえ守れば特に問題も無く動作するのですが、書き出す為の文字列を作るのが手作業では無理があるので自作のツールで行っています。 実装そのものは、jQuery のプラグインでまとめています。こうしておくと好きなコンテンツのクリックイベントとしてデモを表示する事ができます。画像は、プラグインの『openThree』の引数として渡すようになっています。 動作環境は、やはり Google Chrome 推奨です。 ※ 背景は、ソースコードからは変えてあります
|
|
【Three.js & typefaceの最新記事】
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- 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 での表示テスト
