2020年03月02日 - WebVR・Three.js

部屋の3DCGをThree.jsで読み込み

「Blenderで部屋を制作」で制作した部屋の3DCGを、Web上で綺麗に表示できるように調整し、Three.jsで読み込みました。

部屋の3DCGをThree.jsで読み込み

● glTFに出力して確認

まずは、「Blenderで部屋を制作」で制作した部屋の3DCGをglTFに出力して、「Babylon.js Sandbox」で確認しました。Web上で綺麗に表示できるように調整していないので、いろいろと修正する必要があります。

【修正点】
・ソファとベッドのマテリアルの修正
・床のマテリアルの修正
・窓ガラスとレースのカーテンの透過設定
・観葉植物の葉の設定
・窓の外の風景の設定
・ライティングとシャドウの設定
・映り込みの設定

● マテリアルの修正

glTFをWeb上で綺麗に表示するには、glTF2.0の仕様を考慮してマテリアルを修正する必要があります。

例えばソファのマテリアルの場合、RGBミックスとテクスチャ座標はglTF2.0が対応していないため削除し、カラーはパフォーマンスも考えて、画像テクスチャではなくベースカラーで設定、質感を表現するためにノーマルマップは残して、他の設定は削除しました。

また、ベッドや床など修正が必要なオブジェクトのマテリアルとテクスチャを修正し、窓ガラスとレースのカーテンの透過設定をしました。glTF2.0の仕様を考慮したマテリアルの設定方法は、「glTF2.0のマテリアルについて」を参照ください。

● 観葉植物の葉の設定

観葉植物の葉は、「Blenderで観葉植物を制作」でやったようにパーティクルで制作しています。
パーティクルはglTF2.0への出力に対応していないため、メッシュ化する必要があります。モディファイアーでパーティクルシステムの変換をクリックしてメッシュ化します。

Blenderでの修正作業はこれで完了です。

● glTF2.0に出力

出力したいオブジェクトを選択して、トップバーの「ファイル > エクスポート > glTF2.0(.glb/.gltf)」をクリックします。glTF2.0をエクスポートする画面が表示されるので、選択したオブジェクト、+Yが上、モディファイアーを適用、UV、ノーマル、頂点カラー、マテリアル、圧縮をチェックして、glTF2.0をエクスポートをクリックして出力します。フォーマットをglTFバイナリ(.glb)にして、glbに出力すると読み込むさいに便利です。

これで、Web用に最適化したglTFを出力できました。

● glTFをThree.jsで読み込む

Draco圧縮したらうまくいかなかったため、圧縮せずにglTFに出力しました。glTFは、GLTFLoaderで読み込むことができます。

GLTFLoader

//glTFの読み込み
const gltfLoader = new GLTFLoader().setPath('./data/');

//const dracoLoader = new DRACOLoader();

//ライブラリデータの場所を設定
//dracoLoader.setDecoderPath('./js/lib/three_jsm/draco/');
//gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load('room.glb',function(gltf){
    const obj = gltf.scene;
    scene.add(obj);
});

//読み込んだシーンが暗いので、明るくする
renderer.outputEncoding = THREE.sRGBEncoding;