three.js buffergeometryに複数のmaterialを設定する

今回は以下のDEMOのように、Blender上で作成し,exportしたbuffergeometryに対して、複数のマテリアルを適用させる方法を説明します。
ドラッグ:カメラ回転

別ウインドウ

解説

お好きなMeshを用意します。

Tabキーを押してEdit modeに入り、全ての面を選択し [CTRL]+[t]キーを押してtriangulate(三角化)します。
これは、three.jsが三角形ポリゴンのみ対応しているため、Blenderからexportする際に意図しない結果になることを防ぐためです。

ジオメトリの面番号(face index)を編集するで説明と同様にface indexを編集します。今回は下の画像のように右半分の面を選択し、[sort elements],[selected]とします。
このようにすることで右半分の面は左半分の面より面番号が若くなります。

exporterでexportします。
とりあえずTypeをbuffergeometryにしておけば問題ないと思います。

exportしたjsonファイルを次のように読み込むことで複数のマテリアルを適用できます。
事前に面番号を編集したおかげで、右半分と左半分を綺麗に分けることができました。

var loader = new THREE.BufferGeometryLoader();
loader.load('./monkey.json', function (geo) {

    //ジオメトリのグループ分け。
    //第1引数:配列の開始地点 第2引数:開始地点から数えた範囲 第3引数:マテリアルのIndex
    //1452は頂点数。つまり右半分の面の数(484)*3=1452 1449も同様に左半分の面を表す。
    geo.addGroup(0, 1452, 0);     //mat[0]
    geo.addGroup(1452, 1449, 1);  //mat[1]

    let mat = [
        new THREE.MeshBasicMaterial({ color: 0x0000ff, }),
        new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xaaaaaa, shininess: 80 })
    ];
 
    var mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);
    renderer.render(scene, camera);
});

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL