topimage

2012-11

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

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

Three.jsで3Dモデル(テクスチャなし)を読み込んで表示してみました - 2012.11.30 Fri

前回ブログエントリに続き、今回はサンプルにあった3Dモデルをいくつか読み込んで表示してみました。 3Dモデルはテクスチャとか貼れていないものですが。。。

今回はjsdo.it上での、JSON形式として表現された3DモデルのJSファイル読み取り方法がわからなかったので、jsdo.itへの動くコードの投稿はできませんでした。

なので、今回の3Dモデル表示のためのThree.jsコード関連ファイルは、このブログにアップロードしたファイルで構成しています。 

以下今回のThree.jsによる3Dモデル表示をおこなっているhtmlファイルへのリンクとなります。

Blenderに用意されたお猿の頭モデルを表示したもの

サンプルタイトルによれば「木」らしいモデルを表示したもの

元々のテクスチャ付き牛モデルが表示できなかったので、テクスチャなしにデグレして表示したもの。。。

前にも表示した某有名人モデルを違ったファイル形式・読み込み方法で。 前より処理はやくなってる???
ちなみに、前のやつ

jsdo.itでのJSON形式3Dモデルの読み込み方法がわかれば、今後またjsdo.itに動くコードも載せていきたいです。


↑今回このブログエントリに掲載したコードは全て mrdoob/three.js · GitHub からのサンプルコードをもとにしています。


追記:
jsdo.itに、コード自体はコメントアウトして動かないものだけれど、かわりにリンクを貼って上記Three.jsプログラムを取り込めるようにしたものを投稿してみました。 ちょっとしたコード管理・記録にもなればいいかな~と思って。
以下となります。
Three.js お猿頭 3DModel 表示機能への胡散臭いリンク
Three.js 木 3DModel 表示機能への胡散臭いリンク
Three.js うし 3DModel 表示機能への胡散臭いリンク
Three.js ウォル頭部 3DModel 表示機能への胡散臭いリンク
スポンサーサイト

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

jsdo.itで使用できる3D表示用ライブラリのThree.jsのRevision(バージョンのようなもの?)が、ちょうど自分が最近GitHubからダウンロードしていろいろ試していたThree.jsのRevisionと同じ53になっていたので、いろいろ試してみたもののうちいくつかをjsdo.itに投稿してみました。

まぁ、まずは単純に動いてくれそうなサンプルを投稿してみました。 GitHubからダウンロードしたThree.jsのサンプルコードからほぼそのままでコピペしただけ、といった感じの投稿コードです。

以下のようになります。

Three.js r53 Test 
まずはとりあえずなんでもいいのでThree.jsのRevision53を動かせるものをテスト的に投稿です。

Three.js Sample Test01
次にマウスドラッグによって立方体が回転するコードです。

Three.js Sample Test02
最初のコードに、指定文字クリックでカメラの角度やカメラからの距離が変更できる機能が加わったサンプルです。

Three.js Sample Test03

たくさんの立方体が表示されてマウス移動で視点が変わるものです。 見栄えがしそうなので投稿してみました。

Three.js Sample Test04
立方体でプチMinecraft的な機能??? GitHubよりダウンロードしたサンプルでは動いていた「Shift」ボタンで視点を変更できる機能が投稿コードではうまく動かず残念。

Three.js Sample Test05
3DのSphere(球体)の表面にいろいろなマテリアル(質感?)を貼り付けて試しているサンプルコードです。

Three.js Sample Test06
サンプルコードタイトルにはパーティクル何々とありましたが、棒みたいなのが並んでマウスの動きにあわせて(視点が?)動きます。

Three.js Sample Test07
こちらはサンプルコードタイトルにあったようにパーティクルらしい3Dオブジェクトがマウスの動きにあわせて動きます。

以上サンプルコードベタ貼りのjsdo.it投稿Three.jsコードでした。
次はもう少し自分でサンプル弄ったものを投稿したい。

NEW ENTRY «  | BLOG TOP |  » OLD ENTRY

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

10 | 2012/11 | 12
- - - - 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 -

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

RSSフィード

リンク

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

スポンサーリンク

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