「three.js」でつくるお手軽3Dマンガ作成ソフト - 前編

JavaScriptとWebGLによるはじめての3Dプログラミング（1）

立方体の表示

　基本的なオブジェクトとして、まずは立方体を作成してみます。「three.js」には、平面や立方体、球体など、多彩な基本オブジェクトが用意されています。本ページでは立方体の作り方を示し、次ページでは平面ポリゴンの作り方を示します。

立方体

　「three.js」の立方体は、以下の手順で作成します。

1. ポリゴンの表面情報を持った「マテリアル」を作る。
2. ポリゴンの座標情報を持った「ジオメトリ」（立方体専用の「CubeGeometry」）を作る。
3. 「マテリアル」と「ジオメトリ」を引数にして、3Dオブジェクトである「メッシュ」を作成する。
4. 「メッシュ」をシーンに追加する。
5. レンダリングを実行する。

　それでは以下、順番に見ていきましょう。

マテリアルの作成

　立方体を作成するので、まずは要素数6のマテリアルの配列を作成します。マテリアルは「MeshBasicMaterial」を使って作成します。マテリアルは、初期化時の引数で、どういった表面情報を持たせるかを設定できます。どういったパラメータを与えられるかは「MeshBasicMaterialのドキュメント」で確認可能です。

　ここでは、単色で塗り潰した立方体を作る予定なので「color」という値を設定します。この属性には、RGBの数値を指定します。

　最後に配列から「MeshFaceMaterial」という、メッシュの表面を覆うマテリアルを作成します。

マテリアルの作成

var col = [0x0000ff, 0x00ff00, 0xff0000, 0x00ffff, 0xffff00, 0xff00ff];

// マテリアルの作成
var materials = [];
for (var i = 0; i < 6; i ++) {
    var material = new THREE.MeshBasicMaterial({color: col[i]});
    materials.push(material);
};
var MeshFaceMat = new THREE.MeshFaceMaterial(materials);

ジオメトリの作成

　立方体の座標情報を持つ「CubeGeometry」には6つの引数があります。最初の3つは立方体の「横、高さ、奥行き」のサイズです。残りの3つは、「横、高さ、奥行き」のポリゴンの分割数です。

ジオメトリの作成

// ジオメトリの作成
var CubeGeo = new THREE.CubeGeometry(100, 100, 100, 4, 4, 4);

メッシュの作成

　最後に「マテリアル」と「ジオメトリ」を引数にして、3Dオブジェクトである「メッシュ」を作成します。

メッシュの作成

// メッシュの作成
var mesh = new THREE.Mesh(CubeGeo, MeshFaceMat);

回転、シーンに追加、表示

　作成したメッシュには「位置（position）」「回転（rotation）」「拡縮倍率（scale）」の値があります。それぞれ「x, y, z」の値があり、この値を書き換えることで、移動や回転や拡縮を行えます。

　ここでは、立方体を真正面から見ると正方形にしか見えないので、若干角度を付けて立体として見えるようにします。

　作成したメッシュはシーンに追加する必要があります。そうしなければ、画面に表示されません。また最後に「レンダリング」を実行するのを忘れないでください。レンダリングを行わなければ、画面は再描画されません。

回転、シーンに追加、表示

var d3 = crocro.bc.d3;    // 3D格納用

mesh.rotation.x = Math.PI / 4;
mesh.rotation.y = Math.PI / 4;
mesh.rotation.z = Math.PI / 4 * 4;
d3.scene.add(mesh);

d3.renderer.render(d3.scene, d3.camera);

立方体の表示の「まとめコード」

　それでは、ここまでの処理をまとめた「crocro.bc.viewCube.js」を掲載します。

「crocro.bc.viewCube.js」

//= サンプル：立方体の表示

//== 立方体の表示
crocro.bc.viewCube = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用

    // 要素の作成と格納
    var cube = crocro.bc.mkColCube();
    cube.rotation.x = Math.PI / 4;
    cube.rotation.y = Math.PI / 4;
    cube.rotation.z = Math.PI / 4 * 4;
    d3.scene.add(cube);

    crocro.bc.render();
};

//== 色立方体の作成
crocro.bc.mkColCube = function() {
    var col = [0x0000ff, 0x00ff00, 0xff0000, 0x00ffff, 0xffff00, 0xff00ff];

    // マテリアルの作成
    var materials = [];
    for (var i = 0; i < 6; i ++) {
        var material = new THREE.MeshBasicMaterial({color: col[i]});
        materials.push(material);
    };
    var MeshFaceMat = new THREE.MeshFaceMaterial(materials);

    // ジオメトリの作成
    var CubeGeo = new THREE.CubeGeometry(100, 100, 100, 4, 4, 4);

    // メッシュの作成
    var mesh = new THREE.Mesh(CubeGeo, MeshFaceMat);

    // メッシュを戻して終了
    return mesh;
};