three.jsでjson形式のモデルを表示してみる

      2016/03/09

WebGLを使用しているサイトも増え、3D表現を勉強されているWeb技術者も多いかと思います。
私もthree.jsで色々と試行錯誤しています。

今回は外部3Dモデルファイルを読み込み、表示してみたいと思います。

ちなみに今回説明する各バージョンは以下の通りです。

  • blender : 2.76
  • three.js : r73

3Dモデルを入手する

blendファイル→blenderにてjsonファイル書き出し→three.jsでjsonファイル読み込み・表示

three.jsで表示させたい3Dモデルを一から作るのは大変なので今回はフリー素材を使います。
ちなみに3Dデータには色々な形式がありますが、three.jsでは今の所blenderと言うフリーの3DCG制作ソフトを使用し、[.json]形式で書き出すのがベターとされています。
なので、まずはblenderで使える[.blend]形式の素材を探します。

それでは早速、TF3DMという3Dモデルを販売・配布しているサイトより、[.blend]形式のモデルを適当(Commercial use License)にダウンロードしてきます。

l99890-aircraft-69962

blenderでエクスポートしてみる - インストール編 -

まずはblenderをインストールしましょう。
blenderにはjsonエクスポーターの機能が付いていないのでプラグインが必要です。
プラグインはthree.jsをダウンロードすると付いてきます。

※chromeのコンソールで"Loader.createMaterial: Unsupported colorAmbient..."などとエラーが出る方は下記参考
ただ、今現在のバージョンはblenderプラグインの不具合がある様なので、下記のdevブランチより修正されているものを使った方が良さそうです。

https://github.com/mrdoob/three.js/tree/dev

r74からは上記のエラーは出なくなったようです。

ダウンロードしたthree.jsフォルダ内[/utils/exporters/blender/addons/]のio_threeフォルダが今回使うプラグインです。
下記の場所へフォルダごとコピーして置いて下さい。

  • [Windows] C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons
  • [OSX] /Users/(myuser)/Library/Application Support/Blender/2.7X/scripts/addons

blenderでエクスポートしてみる - 設定編 -

それではダウンロードした3Dモデル素材をblenderで開きましょう。
blender画面
まずは使いやすくするため日本語化します。
メニューから[File]-[User Preferences]を選択し、[System]タブの右下にあるInternationalFontsにチェック。
言語を日本語にし、インターフェースとツールチップのボタンを選択します。
blender日本語設定
先ほど配置したプラグインを有効化します。
メニューから[ファイル]-[ユーザー設定]-[上タブ:アドオン]-[左カテゴリー:インポート/エクスポート]を選択し、Three.js Formatをチェック。
blenderエクスポート設定
そしていよいよエクスポートします。
メニューから[ファイル]-[エクスポート]-[Three.js(.json)]を選択します。
エクスポート設定は以下のような感じ。デフォルト設定にFace Materialsを足します。
 blender03 
そして[Export THREE]でjsonファイルをエクスポート。
 
※モデルによっては[A]にて全選択をし[Ctrl + J]で結合をした方がいい場合があります。

three.jsで表示させてみる

ではいよいよthree.jsにて先ほど書き出したjsonファイルをブラウザに表示させてみます。

ダウンロードしたthree.jsフォルダの中で使うファイルは以下の2つですので適所に配置してください。

  • build/three.min.js
  • examples/js/controls/OrbitControls.js

ソースコードは以下のような感じです。
特に変わったことはしていないのですが、ハイライト箇所でjsonファイルを読み込むnew THREE.JSONLoader関数を使用しています。

DEMOを見る

表示は以下のような感じになるはずです。

※最新のブラウザで見てください。
※読み込みに多少時間がかかります。

 

が。。。
飛行機の骨の部分が表示されていない!!
色が違う!!
この辺はblenderの扱い方をもう少し掘り下げなければいけなそうです。
WebGLのコンテンツが多くのブラウザ環境で使えるようになったとはいっても、やはり3Dは知らない単語も多く難しいですね。。

 - JavaScript Tips, three.js ,