Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

3Dモデル「FBX形式 → JavaScript等」変換ツール


fig.
▲変換ツール

このWEBツールは、「Shade3D」や「Blender」などの3DCG作成ツールで作った3Dモデルを JavaScript などのプログラム言語で表示できるようにするためのデータ形式変換ツールです。

左の画像リンクをクリックすると、変換ツールの画面が開きます。

また、以下では1万円の「Shade3D」、無料の「Blender」での利用手順を説明しています。

この説明により誰でも3Dモデルを作成して、JavaScriptで表示できると思います。

3Dのゲームソフトなどの作成に活用してください。



Shade3Dでの利用手順

せっかくなので、面白い形状をShadeのサンプルから呼び出して変換したいところですが、最初から難しい形だと失敗する可能性があるので、簡単な形で行います。

Shade3Dはすでにインストールされているとして説明します。

では始めましょう。


1. Shade3Dを起動し、3Dモデルを作成する

Shade3Dを起動する。

ツール メニュー から 作成 をポイントし、続いて ポリゴン をポイント、球 を選びます。

(以後、同じ操作を ツール メニュー>作成>ポリゴン>球 と書きます)


続いて、4面図のどこでもドラッグすれば球を作成できます。

しかし、なるべく原点(方眼のマス目の赤青緑の十字線)からドラッグして作成してください。

大きさはとりあえず適当で構いません。



2. FBXへエクスポート

fig.
▲ブラウザ上での選択状態の表示

Shade3Dの画面の右上の「ブラウザ」で、「ポリゴンメッシュ」(作成した球のこと)を選択状態にする。(上記作業の後は選択されていると思います)



fig.
▲エクスポート>FBX...の画面
このように設定します。

ファイル>エクスポート>FBX... を選ぶ。

以下のように設定してください。

バイナリ/テキスト: テキスト

画面右側の「形式」タブにて

バージョン: FBX 2006

この2つだけで、その他の設定は特にいじりません。

OKボタンを押します。

続いて、名前を付けて保存 の画面が現れるので、デスクトップに適当な名前で保存。

エクスポートが完了しました。という表示が出ます。表示は×ボタンを押して消します。



 

Blender での利用手順

1. Blenderのインストール

https://blender.jp/(新しいウィンドウで開く)へアクセスします。
左側のリンクの「Blenderのダウンロード」をクリックします。(英語のページへ飛びます)

そのページの「Blender 2.76b for Windows」という部分にて、
「 Installer(.msi) 」 の 「 32bit版 」 を選びます。
USAとかDEとかNL1, 2とか並んでいますが、USAで良いと思います。
(もし、自分のパソコンの Windows が 64bit版 だとわかる場合は 64bit版 を選びます)
(調べたい場合は、コントロールパネルの「システム」を開いて、表示される画面の真ん中付近に「64ビットオペレーティングシステム」と書いてあれば 64bit です。)
(Windows が 64bit で、Blender も 64bit であれば、Blender の動きがよくなるようです)

ダウンロードしたらインストールを行ってください。
難しい設定などはなく、1~2分程度で終わります。
インストールするとデスクトップにはBlenderのアイコンが<作成されません>
Windowsマークをクリックしたりして、Blenderのアイコンを探してください。
Windows 8 の場合は、スタート画面の「すべてのアプリ」や「(↓)マーク」を開く必要があるかもしれません。

2. Blenderの起動と日本語化

Blenderを起動します。
BlenderはWindowsの普通のアプリケーションの使い方とは全然違うので、気を付けてください。
Blenderを使い続ける場合は、細かいウィンドウ操作の意味を落ち着いて理解する必要があると思います。
(どうして普通のウィンドウシステムにしないのだろう…)

まずは日本語にしましょう。
左上の File から User Preferences... を選びます。
(以後、同じ操作を File>User Preferences... と書きます)

(開いた画面の右端の) System タブ>(一番右下の)International Fonts にチェックを入れる。

この画面を下にスクロールする。

(今チェックしたすぐ下の) Language:>Japanese(日本語) を選ぶ。

(そのすぐ下の) Translate:>Interface、Tooltips、New Data の3つともクリックする。

(一番左下の) ユーザー設定の保存 ボタンを押す。
(ウィンドウ右上の) × ボタンでウィンドウを閉じる。

これで日本語になりました。

3. Blenderで3Dモデルを作成し、FBXへエクスポート

次に画面にはすでに正六面体が置かれています。
これを一度右クリックしてから、キーボードの DEL キーを押します。小メニューから削除を選びます。(選択と削除の操作)

左端にタブが縦に並んでいます。

左端のタブ>作成 タブ>メッシュ: から好きな形をクリックしてください。
(「UV球」や、「ICO球」が立体としてわかりやすく、おすすめです)
(UV球のUVってなに? 調べましたがちょっとわからなくて、たぶん「マッピング」のことだと思います。)
(ICO球のICOってなに? 正20面体の英語名の一部で、英語の"倍数接頭辞"というものらしいです Wikipediaより
すると画面にその形が現れると思います。
それを一応右クリックして選択してください。

ファイル メニュー>エクスポート>FBX (.fbx) を選ぶ。
すると、画面が変わります。

(左の)▼FBXをエクスポート という題名のパネル>バージョン:>FBX 6.1 ASCII を選ぶ。

(その下の) 選択したオブジェクト にチェックを入れる。

ウィンドウ上部に2つ横長の入力欄があります。
上の入力欄が "保存先フォルダ" で、下の入力欄が "ファイル名" です。
保存先は画面の下のフォルダのリストからデスクトップを探してください。説明のためです。
(C:\Users\<あなたのなまえ>\Desktop\)
ファイル名はそのまま untitled.fbx で大丈夫です。

(右上の) FBXをエクスポート ボタンを押す。

すると何事もなかったようにすぐに元の編集の画面に戻ります。

保存先フォルダを開いて、そのファイル名のファイルができているか確認してください。

以上でFBXファイルが作成できたと思います。

変換ツールを使用して、FBXをJavaScriptにする

fig.
▲変換結果の画面

WEBブラウザでこの変換ツールを開きます。

このページの上にスクロールするのは面倒なので、これをクリックしてください。→

変換ツールの画面の指示に従って変換を行ってください。

変換結果が出たらここに戻ってきてください。(^^)/~



変換結果をすべて選択し、コピーします。

Windowsのデスクトップを表示させます。

デスクトップを右クリックし、新規作成>テキスト文書 を選びます。

ファイル名を test.js にします。

拡張子を変更すると…と表示されたら「はい」です。


注:「登録されている拡張子は表示しない」

Windowsのコントロールパネルのフォルダーオプション(またはWindows10ではエクスプローラーオプション)の「表示」タブのリストの一番下から3番目。

「登録されている拡張子は表示しない」にチェックが入っている場合は、ここの作業で、ファイル名を test.js にしても、それは見かけのファイル名であって、実際は test.js.txt になっています。そのファイルのプロパティを開くと、ファイルの種類がテキスト文書(.txt)となっています。

その場合は、このチェックを外さないとこの作業はできないので、一時チェックを外してファイル名を test.js にして、後で戻すようにしてください。



fig.
▲test.jsはこのような感じになります。
(テキストエディタ「秀丸」使用)

test.js をテキストエディタで開きます。

貼り付けします。

変換結果が貼り付けされるはずです。

保存してテキストエディタを終了します。



以下のファイルをダウンロードしてデスクトップに保存してください。

ダウンロードするには:
このリンクを右クリックして、「リンク先を保存」を選び、デスクトップに保存してください。
※リンクを左クリックすると、「ICO球」のモデル(WEB上のtest.js)をサンプルで表示します。

fig.
▲こんな感じで表示されればOK。

デスクトップの forJavaScript_viewer.html をインターネットブラウザで開くと、3Dモデルがワイヤーフレームで表示されるはずです。

ただし、うまく表示されないことも割とよくあります。

心配しないで続きを読んでみてください。



こまった... _(_ _)_


【表示されない - 事例1】 真っ白い画面で何も描いていない1:

デスクトップの test.js をテキストエディタで開いてください。

もし、test.js が空の場合は何も描かれません。

変換結果の貼り付けがうまくいかなかったようなので、もう一度、変換結果のコピーから行ってください。


【表示されない - 事例2】 真っ白い画面で何も描いていない2:

デスクトップの test.js を右クリックし、プロパティを選んでください。

全般 タブの「ファイルの種類」が テキスト文書(.txt) になっていないでしょうか。

その場合は、実際のファイル名が test.js.txt になっています。

このページの上のほうで説明していますので、test.js.txt のファイル名を test.js に変更してください。

全般 タブの「ファイルの種類」が JS ファイル(.js) であればOKです。


【表示されない - 事例3】 真っ白い画面で何も描いていない3:

3DCG作成ソフトで物体が原点 0,0,0 から離れすぎていると、物体は画面に入らず画面外にあるので描かれません。

3DCG作成ソフトでなるべく原点に物体を置くようにしてください。

(Blenderの場合は物体がどこにあってもエクスポート時に原点に置いたようなデータを出すので、この問題はありませんが、Shade3Dはその場所に置いたデータを出すので原点に置く必要があります。)


【表示されない - 事例4】 真っ白い画面で何も描いていない4:

test.js に貼り付けをした後、ファイルを保存していなければファイルは実際には空で、何も表示しません。 test.js を開いているテキストエディタを表示させ、保存してください。


【表示がおかしい - 事例5】 画面全体によくわからない図を描いている:
fig.
▲乱れた画面。

3DCG作成ソフトで作成したモデルがとても大きいと、視点に近すぎてうまく表示できません。

現実で目から1cmくらいしか離れていない物体はほとんどまともに見えないことと同じです。

しかし厳密には、乱れる原因は、モデルが大きいことよりも、モデルが視点に触れていることが乱れる原因です。

デスクトップの forJavaScript_viewer.html をテキストエディタで開いて、上から18行目付近の modelPos.z = 100; という行の 100 という値を1000にしてみてください。ダメなら3000にしてみてください。それもダメなら20000(2とゼロ4つ)です。

この数値はモデルの視点からの離れ具合を表します。

物体が目から離れて見えるという結果になります。




【表示がおかしい - 事例6】 点になっている:

3DCG作成ソフトで作成したモデルがとても小さいと、点になってしまいます。

デスクトップの forJavaScript_viewer.html をテキストエディタで開いて、上から18行目付近の  modelPos.z = 100; という行の 100 という値を10にしてみてください。目の前に近づけます。

またはその下の行の modelScale = 15; の 15 という値を100にしてみてください。モデルを拡大します。

※モデルの離れ具合を倍にして、モデルの大きさも倍にすると、画面に変化はありません。試してみてください。現実で大きな物体が遠くにあって、小さな物体が近くにあると、2つの物体は同じ大きさに見えると思いますが、それと同じことです。(実際にそういう場面はあまりないですけどね。トリックアートとかでありそうですね) 数値の理解を深めるためにこのような話をしました。


そのほかの困った
test.jsの行数が数万行を越えてしまった。
ポリゴン数を減らしましょう。
■Shade3D:
物体を範囲選択などして選択してから
ツール メニュー>編集[メッシュ]>ポリゴンリダクション を選ぶ。
画面左下のパラメータという題名のパネルにて、スライダをドラッグして離すとポリゴン数がリアルタイムで変わります。よいところで確定ボタン。改めてFBXへエクスポートしてください。
■Blender:
物体を右クリックして選択してから
画面右側の小さいアイコンが8つくらい並んだパネルで、モンキーレンチ(スパナ)のアイコンをクリック。追加ボタンを押し、左から2列目、上から5行目付近の「ポリゴン数削減」を選びます。比率の丸っぽい枠内をドラッグしてください。ポリゴン数がリアルタイムに変わります。改めてFBXへエクスポートしてください。

JavaScriptで表示したモデルの向き、位置、大きさを変更したい。
■モデルの向きは下記で説明しています。
■位置の変更:
forJavaScript_viewer.html で、//物体を移動できるようにしましょう。という行があります。そのx, y, zをいじることでモデルは移動します。
■大きさの変更:
forJavaScript_viewer.html で、//物体を拡大できるようにしましょう。という行があります。そのmodelScaleをいじることでモデルの大きさが変わります。
上記の対策をしても、表示されない!
エラーになっている場合はFirefoxブラウザの場合は CTRL + SHIFT + J キーを押すとエラーメッセージなどの情報の画面が開きます。InternetExplorerやWindows10のEdgeではF12キーを押してコンソール タブです。
テキストエディタを使ってforJavaScript_viewer.htmlを変更したときに、何かおかしな文字を打ち込んだのかもしれません。見直してください。
またはJavaScriptが使えないように設定されている場合もあります。
 
それでもダメなときは、私に連絡をください。メールは迷惑メールへ振り分けられることが多いので、できれば掲示板を利用してください。掲示板はこちら
掲示板に書き込む際のタイトルは「カテゴリ/原理で3DCG」を選んでください。

回転しないとつまらない!(モデルの向き)

forJavaScript_viewer.html をテキストエディタで開いて、59行目付近の
//回転するならここで。
の行の下に以下のプログラムをそのまま追加してみてください。
回転します。
yokokaitenは地球が回る向きに回転します。
tatekaitenはおじぎするような向きに回転します。



最後に

こんな短いプログラムでShade3DやBlenderの物体が描けるなんてびっくりでしょう?

もし私が高校生のころにこのプログラムを誰かが気さくに教えてくれたら、たぶん大喜びしたと思います。あの頃はプログラミングのリファレンスマニュアルが私の宝の地図でしたから。

でもそれと同時に、あの頃の私にこの3DCGのプログラムを渡したら、毎晩毎晩徹夜を続けているところ、さらにもっとそれを助長するような結果(もっと徹夜する)になる可能性があったと思います。

このページを作っている現在、土曜の深夜12時すぎです。12時過ぎているので日付が変わって正しくは日曜です。

最近少しずつですが、早寝して朝早く起きることの気持ちよさや、昼間でも夜更かしのときと同様にプログラミングができることが分かってきました。また、夜更かししすぎると健康を害し、仕事(や学校)に影響も出てくるのでそういう意味でも夜更かしは禁物です。

それでも夜更かしには魅力があって、またいつか徹夜しそうではあります。

でも今回は、皆さん(特に少年少女のみんな)に早寝を教えたいとか、あまりプログラミングの魅力に取りつかれて人生を壊さないようにしてほしいとか、そういう気持ちもあるので、ちょっと今日は12時半過ぎに寝ることにしますよ。

少年少女のみんな! といったくだり、おまいだれやねんって感じですが…。

…で、その後、翌朝日曜日、午前8時半に目覚ましもなしで目が覚めましたが、いい気分でした。わりと元気な顔で買い物へ出かけられるだろうし、洗濯も普通に午前中にできます。プログラミング、その他もできるでしょう。損した気はありません。

なお、forJavaScript_viewer.html に著作権はありませんので自由に使ってください。


ページ制作 homepage6047


ページの上端へ (もくじ開く)