ブログ
blog
【WebGL特集】第4回：Blenderでモデル出力
※この記事はGoogleChrome9以上 またはFireFox4以上で見てください。
前回までは、CGソフトを使わず、Three.jsのチカラのみで３Dオブジェクトを出力していました。
今回はBlenderというフリーの3DCGソフトを使い、自作のオブジェクトモデルをコンバートし出力する方法を解説します。
１、【なぜBlenderなのか】
現在webGLと最も相性のいい3DCGソフトはBlenderです。というより、Blender以外のソフトはほとんど対応していません。
モデルのみであれば一応、各ソフトにwebGL出力用のプラグインなり、Collada出力なり、何かしらの手段がないことはないです。しかし、バグやエラーが多く、開発途上であったりと、はっきりいって安定的に使えるものではありません。
後半の回でも説明しますが、主要3DCGソフトからアニメーションをwebGLに出力したいのであれば、一度Blenderにデータを持っていきBlenderからwebGL用にデータを出力するのが、今のところ最も確実な手段です。急がば回れってやつですね。
２、【Blenderの起動からsuzanneの取得】
Blenderを起動したところからはじめます。
ブレンダーのマスコットキャラクターsuzannneを取得します。
追加＞メッシュ＞モンキー
ついでにマテリアルも変更してみましょう。
３、【suzanneをJSON(three.js)形式で出力する】
JSON(three.js)形式をBlenedrで使えるようにするにはthree.jsエキスポーターというのを組み込む必要があります。以下の手順で導入してみましょう。
２、フォルダをコピペする。
Windows
C:UsersUSERNAMEAppDataRoamingBlender FoundationBlender[バージョン番号]scriptsaddons
にio_mesh_threejsフォルダをコピペ
３、Blenderで有効にする
Blenderのユーザー設定 ＞ アドオン ＞ 左側import&Exportで選んで右側一番下にあるthree.jsをOnにする。
４、これでJSON(three.js)で、ファイルをエキスポートできるようになりました。オブジェクトは選択する必要はありません。デフォルト設定のままエキスポートしてしまいましょう。
４、【scriptの記述】
基本的には前回のトラックボールカメラのソースのオブジェクト部分をjson(Three.js)ファイル用のスクリプトに変更しただけです。モデルのパスは自分のパスに書き換えておいてください。
<html>
<meta charset="utf-8">
<body>
<script src="build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, 640/480, 1, 10000 );
camera.position.z = 1000;
//scene.add( camera );
trackball = new THREE.TrackballControls( camera );//カメラぐりぐりしたいならこれと・・・
//ライティング
var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); //平行光源（色、強度）
directionalLight.position.set(0,0,3);
scene.add( directionalLight );
//オブジェクト
loader = new THREE.JSONLoader();
loader.load( 'suzanne.js', function ( geometry, materials ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得）
var faceMaterial = new THREE.MeshFaceMaterial( materials );
json = new THREE.Mesh( geometry, faceMaterial );
json.position.set( 0,100,0);
json.scale.set( 100, 100, 100 );
scene.add( json );
} );
//グリッド
planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.position.y = -100;
planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
scene.add( planeMesh );
//レンダラー
renderer = new THREE.WebGLRenderer();//THREE.CanvasRenderer();でもいいけどポリゴンの裏が非表示？
renderer.setSize( 640, 480 );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
trackball.update(); //これ追加
}
</script>
</body>
</html>
５、【ソースの解説】
前回のトーラスオブジェクトとの、変更部分だけを解説します。
//オブジェクト
loader = new THREE.JSONLoader();
loader.load( 'suzanne.js', function ( geometry, materials ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得）
var faceMaterial = new THREE.MeshFaceMaterial( materials );
json = new THREE.Mesh( geometry, faceMaterial );
json.position.set( 0,100,0);
json.scale.set( 100, 100, 100 );
scene.add( json );
} );
jsonを読み込むためには、まず、Three.jsに組み込まれている、「JSONLoader」を取得します。26行目で取得しています。
loadメソッドで、作ったモデルをロード（モデルパスを入力）し、functionのカッコ内で一度ジオメトリーとマテリアルに仕分けします、そのまま28行目で取得したマテリアルをMeshFaceMaterial化して使えるようにしています。
29行目で、ジオメトリーと合体させて、それ以降で位置とサイズを決めて、シーンに追加します。
他にも、スムーシング、スペキュラー、テクスチャー、ノーマルマップなど、多くの表現が出来るっぽいのですが、追求しだすとキリが無いのでここまでにしておきます。
次回は、いよいよアニメーションの出力です。