topimage

2011-08

スポンサーサイト - --.--.-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jsdo.itでThree.jsを使用して3D表示してみました、のつづきです - 2011.08.13 Sat

ひとつ前のブログエントリの続きで、またいくつかThree.jsライブラリを使用した3Dプログラミングを行ってみました。 今回のプログラミングはほぼThree.jsのサンプルをコピペしただけのものなので、コピペ元ファイルも示しておきます。 以下のコピペ元ファイルは全てmrdoob/three.js - GitHubからダウンロードしたものです。

Three.js Practice08 3D Model Load
WaltHead(3Dモデル)
jsファイルとして保存された3Dモデルを読み込んで表示しています。 3Dモデルは少し前のBlender用のプラグイン?から出力されたファイルのようです。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_materials_normal.html
mrdoob-three.js-418780f/examples/obj/WaltHead.js

Three.js Practice09 3D Earth

地球の3Dモデルを表示しています。 地球の3Dモデル表面に貼り付けて表示している画像はDropboxに置いています。 Chromeでは問題なく表示されましたが、Firefoxでは性能のいいパソコンでは表示され、性能の劣るパソコンでは表示されませんでした。。。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_geometry_earth.html
mrdoob-three.js-418780f/examples/textures/land_ocean_ice_cloud_2048.jpg
mrdoob-three.js-418780f/examples/textures/shadow.png


以下コードはChromeでしか動作確認できていませんが、最近のBlender用プラグインから出力された3Dモデル表示サンプルをDropboxに配置したものです(要WebGL)。

・まずは二種類の立方体を表示するものです
webgl_geometry_blenderexport_colors.html
・次にBlenderについてくるおまけ?の猿の3Dモデルが大量に表示されるものです(PCによってはかなり重いかも)。
webgl_performance.html

こちらの形式での表示がWebGLが必須となる新しい方式のようですが、jsdo.itでは3Dモデルを格納したjsファイルをうまく読み取れなかったのでDropboxへ配置しました。 今後もjsdo.itへの配置方法などいろいろわかればちょいちょい作業続けていこうかと思います。 
スポンサーサイト

jsdo.itでThree.jsを使用して3D表示してみました - 2011.08.01 Mon

3Dライブラリがなければ3Dなにもできない自分としては、Three.jsという3Dライブラリがjsdo.itに入ったようなので、Javascriptの3D表示を試してみたくなりいくつかのコードを投稿してみました。

Three.jsの概要や自分への動機付けにはこちらの説明やデモを参考にさせていただきました。
CanvasタグとJavaScriptで3Dのデモを作ってみました

こちらの
Three.js example
を大元のフォーク元にして以下のような3D表示コードをjsdo.itに投稿しました。
・動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・うまく表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・以下コードは全てマウス動作で回転します

1、Three.js Practice01 Cube
フォーク元を参考にして赤いワイヤーフレームによる立方体を表示してみました。

2、Three.js Practice02 Sphere
次は赤い球体を表示させてみました。

3、Three.js Practice03 Plane
3枚のプレーンの色をそれぞれ赤、緑、青の半透明色にして微妙にずらしながら表示してみました。

4、Three.js Practice05 Texture on Plane
プレーンにテクスチャを貼りつけて表示してみました。

5、Three.js Practice06 Texture on Cube
立方体にテクスチャを貼りつけて表示してみました。

6、Three.js Practice07 Light
赤いトーラス型3Dオブジェクトに光をあててみました。

以上のようにシンプルな3Dオブジェクト表示をいくつか試してみましたが、以下のようなサイトに倣えば複雑なMetasequoiaやBlenderからの3Dオブジェクトなども表示できるようです。
Three.jsでMQOデータを表示するまで
Blender exporter
Three.js: 3Dコンテンツを Web ページで表示しよう
WebGLを経由させるとさらにスゴくなる?

今回のコーディングではJavascriptで3Dが表示できたこともそうですが、Three.jsにCanvasが隠蔽されていてCanvasを気にせず作業できたのが一番嬉しかったかもしれない。。。 Three.jsスゴイ。

参考リンク
Three.js開発者Mr.doob先生のブログ
github mrdoob / three.js

jsdo.itでJavascriptのCanvas練習してみました2 - 2011.08.01 Mon

前回ブログエントリの続きで、jsdo.it上でJavascriptのCanvasの練習を行いました。

にもロールプレイングゲームもどきを作成するときに雛形とさせていただいた、Wonderfl上にあるワンダフルクエストというコードを、JavascriptのCanvas上に再現できないか試してみました。
ワンダフルクエスト

以下その経過リストです。 結果としては、ちょいちょいコードをごまかしつつのミニ?ワンダフルクエストができました。
1、ゲームっぽい画面表示、にできず。。。
2、前回コードから勇者の上下左右画像の表示機能を追加しました
3、前回コードから障害物に引っかかる?機能を追加しました
4、前回コードから勇者の移動をなめらか?にしました
5、前回コードからマップスクロール機能を追加しました
6、前回コードからFirefoxでも動くマップスクロール機能にしました
7、ワンダフルクエスト jsdo.it Ver.(最終成果物です)

・最終成果物の動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・画面表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・↑、↓、←、→またはw、s、a、dキーでマップスクロールします

以下は画像の表示倍率を3倍にしてWonderflのワンダフルクエストと同じような見た目にしようとしてけど失敗して作業終了したものです。。。 アンバランスな小人勇者が歩きまわる感じになってしまってます。。。 なので最終成果物は「ミニ」ワンダフルクエストとなってます。。。
前回コードから背景だけスケール3倍率表示にしてみました(失敗作です)

失敗作にもあるようなことをはじめ、Canvasの扱いにかなり苦労しました。 ChromeとFirefoxでの微妙な動作の違いなどもあったりして、前回ブログエントリに引き続きCanvasはムズイです、という感想で終了。。。

NEW ENTRY «  | BLOG TOP |  » OLD ENTRY

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

07 | 2011/08 | 09
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

RSSフィード

リンク

このブログをリンクに追加する

スポンサーリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。