琴線に触れる

関連する記事

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

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

機能は変更して無いので、カーソルを避けて飛びます

画像の本来の姿は、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 で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました

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



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



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

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



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

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

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





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


関連する記事

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

こちらから遊べます

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



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

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

こちらから遊べます

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





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 : 光陰像型

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




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

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

以下は、カメラから見た移動キーです。( キーの同時押しは有効です )

『同一視点』は、結果的に、表示エリアを移動させる『トリミング』のようなものです。通常の移動では、視点が移動するので、見えなかったものが見えるようになりますが、『同一視点』では、ずっとそのままです。

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



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

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

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

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

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

こちらから



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

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



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



最後は、半透明 miku です。



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

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

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

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

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

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

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






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

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




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

注意事項
1 個人利用・商用利用してもらってかまいませんが、著作権は２６℃にあります。
2 データを利用・改造したものを公開してもかまいません。
3 ここで配布するデータのみの販売はダメです（ないと思いますが）。
4 このデータの利用が原因で起こったいかなるトラブルも、一切の責任を負いません。


なんて形で自由に使えます。ただ、『メタセコイア』というソフトで作られた
3D データなので、ちょっと敷居が高いのですが、既にできてしまっている素材
を少し変更するくらいなら頑張れます。

で、さそりの元素材は、尾が延びていたので『曲げる』機能で曲げました。この
機能は『シェアウェア』版のみで使用できますが、別に購入する必要は無く、シ
ェアウェアの意味は他のデータ形式のコンバート部分等のようです。( 購入して
登録しないと使え無い )
制限されていない機能のみを使う場合やMetasequoiaLEを使うのであれば送金の必要はありません

で、そのデータを Three.js 用に変換して WEB 上で表示できるようにしました。
『注意:IE8では表示できません』

これを適当な位置でキャプチャして、Google+ にアップロードしてクリエイティブ
キットを使ったわけです。

あ、それと今日はキューブに DAZ3D の画像を貼り込んでみました。
( キューブが表示されない場合は再表示して下さい )
『注意:IE8では表示できません』