topimage

2017-10

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

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

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
スポンサーサイト

● COMMENT ●


管理者にだけ表示を許可する

トラックバック

http://oretaikan.blog20.fc2.com/tb.php/338-1ef611c8
この記事にトラックバックする(FC2ブログユーザー)

jsdo.itでThree.jsを使用して3D表示してみました、のつづきです «  | BLOG TOP |  » jsdo.itでJavascriptのCanvas練習してみました2

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

09 | 2017/10 | 11
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。