Three.js の Blender エクスポータを利用する

Check

Three.js には Blender 用のエクスポートスクリプトが付属しています。これを利用すると Blender で作成したモデルデータを Three.js で簡単に使うことが出来ます。

エクスポータのインストール

さっそく Blender でエクスポータを使えるようにしてみましょう。

エクスポータの設置

エクスポータは “three.js/utils/exporters/blender” 以下に入っています。このディレクトリの下に Blender のバージョンに合わせたディレクトリがあり、その下の “scripts” ディレクトリを Blender の “scripts” ディレクトリにコピーします。(バージョンが合っていなくても大抵は問題なく動作すると思います)

エクスポータの有効化

次に設置したエクスポータを有効化します。 Blender を起動し “User Preferences” で “Addons” タブを選択し、 “Import-Export” カテゴリを選択します。

恐らく一番下に “Import-Export: three.js format” という項目があると思うので、右側のチェックボックスを有効にします。

すると “File” メニューの “Export” に “Three.js(.js)” が追加されます。あとは適当なオプションを選択して保存すれば OK です。とりあえず今回はデフォルトの状態で出力をしました。

モデルデータを WordPress(サーバ) にアップロードする

それでは作成したモデルデータ(.js ファイル)を WordPress にアップロードしてみましょう(外部からアクセス出来るのであればレンタルサーバなどにアップロードしても構いません)。

「メディア」 → 「新規追加」から対象のファイルをアップロードします。

アップロードしたモデルデータを Three.js から利用する

それではアップロードしたモデルデータを利用してレンダリングを行ってみます。解説は省きますがそれぞれに対応する行数を書いておきます。

ライトを追加する(16 から 18 行目)
JSONLoader を使ってモデルデータをロードする(24 から 25 行目)
ロードしたジオメトリデータにマテリアルを付けてシーンに追加する(30 から 35 行目)

今回はモデルデータが小さかったので、 33 行目で 100 倍に拡大するように指定しています。

<div id="div_canvas" style="text-align:center;">
<script>
var camera, scene, renderer,
    geometry, material, mesh;
 
init();
animate();
 
function init() {
    scene = new THREE.Scene();
 
    camera = new THREE.PerspectiveCamera( 75, 300 / 300, 1, 10000 );
    camera.position.z = 1000;
    scene.add( camera );
 
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 ).normalize();
    scene.add( light );
 
    div_canvas = document.getElementById( 'div_canvas' );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 300, 300 );
 
    var loader = new THREE.JSONLoader();
    loader.load( "http://www.soft-syokunin.com/wp-content/uploads/happy_buddha.js", createScene );
 
    div_canvas.appendChild( renderer.domElement );
}
 
function createScene( geometry ) {
    var material = new THREE.MeshFaceMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.x = mesh.scale.y = mesh.scale.z = 100;
    scene.add( mesh );
}
 
function animate() {
    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();
}
 
function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
 
    renderer.render( scene, camera );
}
</script>
</div>

今回は下記のリンクから “Happy Buddha” の一番解像度の荒いデータを使ってみました。
The Stanford 3D Scanning Repository
モデルデータを用意することや、それを読み込んで使うことは 3D グラフィクスを始めたばかりの障壁の一つでしたが全てフリーで出来るというのは嬉しいことですね。

月	火	水	木	金	土	日
« 3月
		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	31

ソフト職人