コンテンツ開始

2013年03月27日


Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました

関連する記事

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


posted by at 2013-03-27 03:56 | Three.js | このブログの読者になる | 更新情報をチェックする

2013年03月24日


『初音ミクを群れで飛ばす』-- Three.js の Canvas サンプルで『鳥が群れで飛ぶ』という凄いのがあるんですが、平面の画像をテクスチャとして差し替えてブログに貼れるようしました。

画像は、良く見ても絶対解りませんが以下が原寸です。

機能は変更して無いので、カーソルを避けて飛びます
画像の本来の姿は、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 で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました



posted by at 2013-03-24 00:03 | Three.js | このブログの読者になる | 更新情報をチェックする

2012年07月16日


Google Chrome または Firefox で( WebGL ) フリーフォントを 3D 化して表示して画像を取得

なかなか環境限定で申し訳ないですが、これから世の中もっと進歩していけば問題無くなると思います。



まだ実験段階なので、フォントは4つしかありませんが(ファンシーバルーン/切絵時/水面字/モフ字)、本体の機能が出そろったらもっとフォント増やして行きます。



Canvas の対応も、ブラウザ毎なので画像の保存はこんな感じです。

1) Firefox の場合は右クリックから保存すると背景は透過。



2) 背景が欲しい場合はとにかく Print Screen 等でキャプチャ( Google Chrome も同じです )

とりあえず雰囲気を楽しむのに、『二つ名メーカー』というおもちゃがあるのでそれを使って『ぬこ』の二つ名作ってみました。



posted by at 2012-07-16 01:51 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年06月24日


まだ、遊べるほどではありませんが、Cube World + 3D モデル 空間をカメラ目線で移動

まだ、こんなもんですが。(WebGL なんで、Google Chrome と Firefox 用です)
※ キーで動かす場合は同時押しできます





できている内容の割にはコードは単純なんです。いまんとこおすすめブラウザは Firefox です。どうも Google Chrome は、まだメモリの扱いに問題あるみたいです。


関連する記事

Three.js の webgl_geometry_minecraft.html で使われている Cube World を使って、3D モデルを乗っけてカメラを動かすとかなりいい雰囲気です



posted by at 2012-06-24 01:03 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年06月04日


WebGL Miku / ioqueさん

こちらから遊べます

WebGL Miku の 6メガものです。前回は 12 メガでしたが、前回分も jQuery のスライダーを追加しています。



元データはメタセコイアで、こちらからダウンロードできますが、そのままでは変換した Three.js には都合が悪いので一部データを消去しています( そのままだと目が表示されない )。また、オリジナルの光の設定では暗すぎるのでふつうの状態にして Three.js でもふつうに光源を用意しています( 前回とおなじ )

キーボードも以下のようになっていますが、ドラッグで FLY はオプションにしました。でないと、スライダーを動かす時にも FLY 状態になるので。






posted by at 2012-06-04 21:04 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年06月03日


天使キャラ( 3D ローポリゴン ) を Three.js で、ブラウザが表示可能なら、WebGL で表示。そうでないなら Canvas で表示しています。ぜひ、キーでぐりぐり動かして下さい。


こちらから遊べます

キーで移動するのは、『カメラ』のほうです。





Canvas は、何故か Google Chrome より IE9 のほうがきれいに表示されます

(wキーで近づいています)


※ あと、羽の作り方の都合で、WebGL ではきちんと透過されません。Canvas では OK です。
※ そういう都合で、WebGL の羽は、羽そのものを透過したり黒くしたりして趣向を変えています。

素材はメタセコイアです。腕をシェアウェア版で( 購入する必要はありません )『曲げる』を使って腕を下におろしています。あとは、blender(2.61) で Three.js 用に変換しています。Canvas では、光の対応がされないので、わっかの色を解りやすく変えてあります。

Google Chrome と Firefox は WebGL で表示されますが、Canvas でもリンクをクリックして表示を切り替える事ができます。他のブラウザは、たぶん残念ながら Canvas のみですが、Mac の Safari なら WebGL が見れる設定になっているかもしれません( つっても使ってる人が解ってるはずですけど )。Windows の Safari は、WebGL が使えない上に、キーイベントで落ちます・・・・。

関連する記事

WebGL 限定 miku( キーボードで移動・回転をフルサポート )


素材 Credit : 光陰像型
タグ:Three.js WebGL 3D
posted by at 2012-06-03 23:16 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年05月19日


WebGL 限定 miku( キーボードで移動・回転をフルサポート )

※ データが 12メガあるので、最初のロードはしばらく時間がかかります。
WebGL に対応しているブラウザでないと動作しません
日本語入力状態になっているとキーが効かないので注意して下さい




好きな角度から見る事ができます。
( 前回のマウス位置をカメラ位置としたのは こちら )

マウスをドラッグすると、『Fly』効果です( ふわふわ飛んでいるような移動 )

以下は、カメラから見た移動キーです。( キーの同時押しは有効です )
W前進S後退 A左移動D右移動
R上移動F下移動 Q左回転E右回転
Y同一視点上移動H同一視点下移動 G同一視点左移動J同一視点右移動
O対象物縦回転L対象物縦回転 K対象物横回転;対象物横回転
『同一視点』は、結果的に、表示エリアを移動させる『トリミング』のようなものです。通常の移動では、視点が移動するので、見えなかったものが見えるようになりますが、『同一視点』では、ずっとそのままです。


posted by at 2012-05-19 00:45 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年05月11日


WebGL 限定 miku( カーソルがカメラになります )


結局動くのは、Google Chrome と Firefox です。



元データはこちらからお借りしました。

いろいろデータが複雑でしたので、メタセコイアでいらない部分を削除して最低限のオブジェクトにまとめてから腕を下へ曲げて Blender に読み込んで Three.js 用にエクスポートしています。

とりあえずでの実装なのでただ見るだけですし、ライトもいまいちうまく使えていませんが、まあ一度見てみて下さい。いずれ、キーボードでカメラ位置を移動する予定です。

Opera Next をインストールして WebGL 使えるようにして見てみたんですが・・・・。うまく表示されませんね。

時間があったので、もう一つ変換して表示できるようにしました。相当ポリゴン数多いですが、WebGL だと普通に動きますね。でも、ロードは不安になるくらい時間かかります。定義ファイルはなんと 11M もありますし。

こちらから



データはこちらからお借りしました。

これはポーズも付いてるし、すごくかっこいいです。データはちょっと手作業で変換しないと目が表示されずに怖〜い miku になってたのですが、なんとか修正しました。



ちなみに、Opera Next で表示したら顔がまったく表示されませんでした。そもそも、ライト効果が変なのですが、Three.js の問題では無いとは思うのです。Firefox は 全く問題無いですし。Safari は、Windows は対応していないようなので、確認できません。こうなると、IE が WebGL 使えないのにこの先やっていけるんでしょうかね・・・と、真剣に思います。



最後は、半透明 miku です。



このへんのパラメータをリアルタイムでオンラインで変更できるように調査中です。キーボードで操作は簡単なので近いうち・・・というか一週間以内予定です。

▼ キーボード操作を作成しました
WebGL 限定 miku( キーボードで移動・回転をフルサポート )

初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )


posted by at 2012-05-11 00:52 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年05月07日


最新の Three.js でできる事。JavaScript+WebGLの凄さを体験してみましょう


配布元のデモページ
( 山のようにあるデモのメニュー:WebGLRenderer examples からどうぞ )

ほんの数か月でサンプルがとんでもなく濃厚になっています。このサンプルは動きだけで言えばもうほとんどゲームと言ってもいいようなもんで、こいつら(重火器持ったモンスターが)立ってるだけでもアニメーションしていて、左右上下矢印キーで、フィールド上を、もちろんアニメーションで走るわけでして。しかも、全員が・・・・

Google Chrome と Firefox で動作確認しました。推奨は、Google Chrome ですが、PC のパワーの
ほうが重要でしょう。キーは他に( 仕様なんですが ) WASD で矢印キーと同じです。

あと、マウスは左ドラッグと、中央ドラッグと、右ドラッグで動作が変わり(回転、遠近、上下左右)、カメラが移動します。この操作は、ASD をそれぞれ押しながらだとドラッグしないでもマウスを動かしただけで同じ動作をします。






この他にもおすすめはたくさんありますが、このモンスターのキャラ設定画面のようなデモが別にあります。それと、ジェットコースターのような視点でカメラが移動する、すぐにゲームに使えそうなサンプルは必見です。





posted by at 2012-05-07 03:01 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

2012年03月08日


メタセコイアの素材からまわりまわってこんな画像に例えばなる訳ですが( Google+の クリエイティブキット )

目玉と吹き出しは、クリエイティブキットで追加しています。




もともとの素材は、http://www.geocities.jp/oirahakobito2/ でダウンロードしました。

注意事項
1 個人利用・商用利用してもらってかまいませんが、著作権は26℃にあります。
2 データを利用・改造したものを公開してもかまいません。
3 ここで配布するデータのみの販売はダメです(ないと思いますが)。
4 このデータの利用が原因で起こったいかなるトラブルも、一切の責任を負いません。
なんて形で自由に使えます。ただ、『メタセコイア』というソフトで作られた 3D データなので、ちょっと敷居が高いのですが、既にできてしまっている素材 を少し変更するくらいなら頑張れます。 で、さそりの元素材は、尾が延びていたので『曲げる』機能で曲げました。この 機能は『シェアウェア』版のみで使用できますが、別に購入する必要は無く、シ ェアウェアの意味は他のデータ形式のコンバート部分等のようです。( 購入して 登録しないと使え無い ) 制限されていない機能のみを使う場合やMetasequoiaLEを使うのであれば送金の必要はありません で、そのデータを Three.js 用に変換して WEB 上で表示できるようにしました。 『注意:IE8では表示できません』 これを適当な位置でキャプチャして、Google+ にアップロードしてクリエイティブ キットを使ったわけです。 あ、それと今日はキューブに DAZ3D の画像を貼り込んでみました。 ( キューブが表示されない場合は再表示して下さい ) 『注意:IE8では表示できません』
posted by at 2012-03-08 02:16 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
コンテンツ終了
右サイド開始
コンテナ終了 base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX