Pentacreation Homeを制作
BlenderとThree.jsをいろいろと試してきましたが、一度形にしようと思い、Meta Questのホーム画面をイメージしてPentacreation Homeを制作しました。※Three.jsはr134を使用しています。
Pentacreation Homeを制作
● Blender3.0で部屋の3DCGを制作
「Blender2.9で部屋を制作」で部屋の3DCGを制作しましたが、Blender3.0で部屋の3DCGを制作しました。
最初にネットで参考になる写真を探して、空間デザインを検討しました。部屋の3DCGはglTFに出力してThree.jsで読み込む想定なので、ポリゴン数をなるべく少なめにして、テクスチャも必要な部分のみ設定しました。Blenderで制作した3DCGデータを、glTFに綺麗に出力方法は「glTF2.0のマテリアルについて」を参考にしてください。
ライトはThree.jsでも設定できますが、Blenderで設定した方が調整しやすいので、Blenderで設定してglTFとして出力しました。
● 床のテクスチャをベイク
影があるとリアリティが増すので、床に影をつけました。影はThree.jsでつけることもできますが、ベイクした方が綺麗につけられるので、床のテクスチャをベイクしました。
● Draco圧縮してglTFに出力
部屋の3DCGが完成したらglTFに出力します。そのまま出力すると87MBになりますが、Draco圧縮して55MBにしました。
BlenderでDraco圧縮するには、glTFに出力するさい、ジオメトリの圧縮にチェックを入れます。
● Three.jsで星空を制作
天井の窓から星空が見えるように、Three.jsで星空を制作しました。天井から見えるのは北半球のみなので、星空は北半球のみ生成しました。
● Three.jsでglTFを読み込み
Three.jsで部屋のglTFを読み込みました。
※ローディング画面で読み込み状況を表示していますが、Three.js r134のGLTFLoaderは、xhr.totalが取得できないので注意が必要です。
● Three.jsでオブジェクトをクリック
本を追加して、Three.jsでクリックできるようにし、ブログにリンクをはりました。
完成したPentacreation Homeになります。Meta Questで試したところ、ヘッドマウントディスプレイには負荷がかかりすぎるようなので、パソコンとスマホで見ることができるようにしました。