部屋の3DCGをThree.jsで読み込み
「Blenderで部屋を制作」で制作した部屋の3DCGを、Web上で綺麗に表示できるように調整して、Three.jsで読み込みました。
部屋の3DCGをThree.jsで読み込み
● glTFに出力して確認
まずは、部屋の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で読み込むことができます。
//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;
● ライティングとシャドウの設定
Three.jsでライティングとシャドウの設定をしました。
AmbientLightの他、メインのライトはPointLightを使用しました。PointLightはシャドウマッピングできないため、シャドウマッピング用のDirectionalLightも設定しました。シャドウマッピングの設定方法は「Three.jsでオブジェクトを選択」を参照ください。
● 窓の外の風景の設定
「Three.jsで360度パノラマコンテンツ制作」でやったように、窓の外の風景を設定しました。
● 映り込みの設定
マテリアルの粗さを0.0に近づけた場合、マテリアルに環境マップを設定した方が綺麗になります。Blenderから360度パノラマ画像をレンダリングして、マテリアルに環境マップを設定しました。
Draco圧縮できなかったためglTFの容量は200MBありますが、完成したデモになります。Oculus Questで試したところ、ヘッドマウントディスプレイには負荷がかかりすぎるようなので、パソコンとスマホで見ることができるようにしました。