topimage

2017-09

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

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

Three.jsでBlenderから出力した3Dモデルを表示実験 - 2012.12.11 Tue

タイトルのように実験を行なってみました。 自分で昔「のまねこ」のつもりで作成した3DモデルをThree.jsの機能を使って表示できるか実験してみました。 

結果は失敗です。。。 

昔、Flashの3D表示機能で同じことをしようとしたときと同じように、Blenderから出力された3Dモデルのテクスチャがおかしくなってしまいました。 しかも今回のThree.jsでもFlashでの3D表示のときと全く同じ形式?でテクスチャがおかしくなりました。。。 根本的に自分のBlenderモデルの作り方がおかしいのだろうか???

以下、そんな失敗したファイルです。

「のまねこ」3Dモデル表示失敗

おまけ
1,Flashで失敗した「のまねこ」3Dモデル表示
2,その後「のまねこ」モデルのファイルを手動で修正してなんとかFlashで思う通り表示できたもの


あと備忘録的に、

今回自分が使ったBlenderのバージョンは2.64、Pythonのバージョンは2.6です。 Three.jsのバージョンはReivision53で、そのエクスポータはBlenderのバージョンを意味する?2.64です(ココより)。

久しぶりに使う、全く操作方法を覚えていなかった、Blenderの操作を思いだすために参考させてもらったのは以下のサイトです。
Blender フリーの総合3D制作ソフト「Blender」
独特I/FのBlender、久しぶりだと笑えるほど全く操作できなかった。。。

BlenderからThree.js用ファイルを出力するためのエクスポータの説明は以下のサイトを参考にさせてもらいました。
ソフト職人 » Three.js の Blender エクスポータを利用する


次は、今回うまくテクスチャ表示できなかったThree.js用3Dモデルファイルを解析して、なんとかテクスチャが想定したとおりに表示されるところまでもっていきたい。

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

前のブログエントリの続きで、今回はテクスチャ付きの3DモデルをThree.jsで読み込んで表示してみました。 3Dモデルは今回もサンプルコードにあったものから使用させて頂きました。

あと、サンプルではテクスチャ付き3Dモデル読み込みのためのコードを見つけられなかったので、以下サイトでの質問とその答えの参考コードをもとに、上記テクスチャ付き3Dモデルの読み込みを行いました。

そのサイト
その参考コード

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

以下がそのテクスチャ付き3Dモデルの読み込みコードとなります

その1 うしモデル
サンプル

その2 女性モデル
サンプル



は~、やっとテクスチャ付き3Dモデル出力までできた~。


追記:
前回エントリと同じようにjsdo.itに、コード自体はコメントアウトして動かないものだけれど、かわりにリンクを貼って上記Three.jsプログラムを取り込めるようにしたものを投稿してみました。 今回もコードの管理・記録なんかも考えながら。
以下となります。

Three.js テクスチャ付き うし 3DModel 表示機能への胡散臭いリンク
Three.js テクスチャ付き 女性 3DModel 表示機能への胡散臭いリンク

今回はダミー的なサムネイルなんかも作ってみました。

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コードでした。
次はもう少し自分でサンプル弄ったものを投稿したい。

ソーシャルボタン?貼りつけ練習 - 2012.10.01 Mon

はてなブックマーク、ツイッター、フェイスブックのそれぞれのソーシャルボタン?が貼りつけられるか試してみました。

はてなブックマークはココ

ツイッターはココ

フェイスブックはココ

からそれぞれのボタン表示のためのコードを作成しました。
ボタンを横並びにしようとしたレイアウトはイマイチうまく作成できませんでしたが。。。
フェイスブックのボタン作成には、IDが必要?で、HTML5やIFRAMEといったコード群からよくわからないままコードを選択する必要もあったりと、少々めんどくさかった(自分は昔作ったアプリIDを使用して、コードはIFRAMEのものを使用)。

今回はこのブログ全体のURL http://oretaikan.blog20.fc2.com/ を参照するボタンとしましたが、それぞれのブログエントリを参照する場合はどうすれば。。。 ブログエントリ書くごとにいちいち違うURLでボタン作成しなくてはならない??? 何かいいボタン生成方法でもあるんかな? 

まぁでも、今回はボタンが表示できただのでとりあえずよしとしておきます。

このエントリーをはてなブックマークに追加





NEW ENTRY «  | BLOG TOP |  » OLD ENTRY

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

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