topimage

2017-09

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

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

jsdo.itにThree.jsコード投稿、このブログにもひさしぶりに投稿 - 2015.01.17 Sat

2年以上ぶりにブログを更新してみます。

とりあえず直近にjsdo.itに投稿したコードを載せてみます。 要WebGL機能のコードです。

こちららのコード「Three.js + Oimo.js で箱に色々入れてみるテスト」を参考にさせていただいて(フォークさせてもらって)、以下の3コードを作成してみました。 最初の2つのコードはMgicaVoxelというソフトで自分で作成した3Dドット絵?を使用しています。  3つのコードともに、フォークさせてもらったコードと同じように上から3Dモデルがバラバラと落ちてくるものです。

作成中になぜか上から3Dモデルがバラバラと落ちてくる様が楽しく感じられました。 子供がおもちゃ箱をちらかして喜んでいるような気分になったのでしょうか? そんなわけでjsdo.itで3回もフォークして同じようなコードを3つも作ってしまいました。。。


投稿コードその1
Three.js + Oimo.js で勇者・僧侶・魔法使いキャラ候補を箱に入れてみるテスト



投稿コードその2
Three.js + Oimo.js で「しかばね」キャラたちを箱に入れてみるテスト



投稿コードその3
Three.js + Oimo.js で箱に色々追加で入れてみるテスト

スポンサーサイト

jsdo.itでThree.jsによるテクスチャ付き3Dモデル表示の実験 - 2012.12.20 Thu

タイトルのように実験を行った結果、

失敗しました。

前回エントリでこのブログ上で表示できた「のまねこ」もどき3Dモデルを、jsdo.it上でも表示できるか実験してみました。
JSONやJSONPとか調べながらいろいろ試してみましたが、jsdo.it上ではテクスチャを3Dモデルにうまく貼り付けることができませんでした。

そんな失敗したコードです。
Three.jsでテクスチャ付き3D「のまねこ」モデル読み込み失敗

失敗はしましたが、かわりに副産物的にテクスチャなしの3Dモデルデータはjsdo.it上でも表示できるようになりました。
以下、そんなコード3つです。
Three.js お猿頭 3DModel 表示機能
Three.js 木 3DModel 表示機能
Three.js うし 3DModel 表示機能

前にこのエントリで表示していたもののJSONデータを文字列としてJavascriptコード上にベタ書きして表示してます。 文字列の状態のJSONデータは一行でもっていなければいけないようなので、右側に非常に長いJavascriptコードとなってしまってますが。。。

あと少しなにかすればテクスチャ付き3Dモデルも表示できそうな気もするけど、う~ん、わからん。。。

今後は、jsdo.it上でのテクスチャ表示方法がわかるまでは、jsdo.it上でのThree.jsコードでは3Dモデルを使用しないものを作成するようにして、3Dモデルを使ったThree.jsコードはこの自分のブログかサイトに載せるようにしようか、考え中。

Flashのときもそうだったように、3Dモデル変換・出力・表示部分でのいつもの迷走となっていきそう。。。

Three.jsでBlenderから出力した3Dモデルを表示実験、のつづき - 2012.12.12 Wed

前回エントリの続きで、「のまねこ」もどき3Dモデルのテクスチャを想定通りに表示できるかいろいろ実験してみました。

結果は、想定通りのテクスチャ表示成功です。

以下その成功した「のまねこ」3Dモデル表示ページへのリンクです。



 テクスチャ表示にあたって修正したのは、「のまねこ」3Dモデルのデータを保持している「nomaHeadAndBody05.js」ファイルです。 BlenderのThree.js用エクスポーターから出力されたファイルです。 上記3Dモデル表示ページから3Dモデルデータとして読み込んでいるものです。 URLにすると「http://blog-imgs-43.fc2.com/o/r/e/oretaikan/nomaHeadAndBody05.js」にあるファイルです。 よくわかってませんがJSON形式による3Dデータ表現でしょうか???

 この「nomaHeadAndBody05.js」ファイルのfaces項目にある「0」または「1」で貼り付けるテクスチャの種類を設定しているようだったので、「のまねこ」頭部に貼る顔テクスチャ以外は「のまねこ」体全体に白いテクスチャが貼られるように値を変更していきました。 今回の場合はは「1」が顔テクスチャで「0」が白い体テクスチャとなっています。 また、そのテクスチャ指定の値「0」と「1」は「nomaHeadAndBody05.js」ファイルのmaterials項目にあるDbgIndexの値によって元となる画像ファイルと関連付けられているようでした。

 Flashで同じように「のまねこ」3Dモデルのデータを修正するよりはかなりすんなりとモデルデータ修正ができた気がします。 ふ~、よかったよかった。 


つぎはThree.jsで何しよかな。

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 表示機能への胡散臭いリンク

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

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