Three.jsでblenderの3Dモデルを使う

Three.jsはJavaScriptでWebGLを簡単に使用できるようにしたライブラリで、Three.jsでblenderの3Dモデルを読み込みたかったので、その方法をまとめておく。バージョンはr74。blenderはオープンソースの3Dアニメーションソフトウェア。

１．Three.jsのウェブサイトからダウンロードしたファイルを解凍する。

２．解凍したファイルから\utils\exporters\blender\addons\io_threeフォルダをさがし、まるごと以下のblenderのフォルダにコピーする。

 

[System drive]:\Users\[USERNAME]\AppData\Roaming\Blender Foundation\Blender\[バージョン番号]\scripts\addons

３．フォルダをコピーしたらblenderを起動し、以下の手順でThree.jsプラグインを有効にする。

 

①メニューの[File]>[User Preferences...]を選択して、「Blender User Preferences」ダイアログを開く
②［Addons］タブを表示し、Categoriesから「Import-Export」を選択
③「Import-Export: three.js format」のチェックをつける
④「Save As Default」ボタンで状態を保存しておくと、次回からデフォルトで有効になる

４．エクスポートするモデルを選択した状態で、メニューから[File]>[Export]>[three.js (.js)]を選び、出力するフォルダを選択し、ファイル名を入力するとjsonという拡張子のファイルがエクスポートされる。

５．Three.jsでJSONデータを読み込むにはJSONLoaderを使う。以下のコードでは、test.jsonというJSONデータを読み込んで、それをgeometryとしたオブジェクト（mesh）を作成してシーン（scene）に追加している。

var loader = new THREE.JSONLoader();
loader.load(
 'test.json',
 function ( geometry ) {
  mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color: 0xffffff}) );
  scene.add( mesh );
 }
);