クリエイティブ開発者のブルーノ・シモンズさんが、3DCGモデリングソフトの「Blender」を使って自身の部屋の3Dモデルを作成し、WebGLとThree.jsを使ってウェブブラウザ上で表現した「My Room in 3D」を公開しています。
My Room in 3D
https://my-room-in-3d.vercel.app/
これが「My Room in 3D」。画面右上には部屋の見た目を変更することができる各種パラメーターが用意されています。
「baked」では部屋全体の見た目を変更するオプションが並んでおり、「uNightMix」は部屋の明るさ、「uNaturalMix」は部屋の色味(白基調か木目調か)、「uLightTvStrength」は部屋に配置されているテレビの後ろのライトの強度、「uLightDeskStrength」はデスク周りのライトの強度、「uLightPcStrength」はPC周りのライトの強度を変更できます。
「googleLeds」では、テレビの前にあるテーブルの上に置かれたGoogle Home miniのLEDのカラーを変更可能。
「loupedeckButtons」では、デスク上にあるモニターの下にあるボタンのカラーリングを変更できます。
「coffeeSteam」では、デスク上に置かれたコーヒーから立ち上がる煙の見た目や色を変更可能です。
「bouncingLogo」では、テレビの中を動き回る「three.js journey」のロゴの動きやサイズを細かく調整できます。
実際に「My Room in 3D」をいろいろいじくり倒している様子は、以下のムービーで確認できます。
WebGL×Three.jsでウェブ上に3DCGで部屋を表現する「My Room in 3D」をいじってみた – YouTube
[embedded content]
なお、シモンズさんは実際の部屋の写真も公開しており、「My Room in 3D」とおおむね同じ見た目であることがわかります。
シモンズさんが「My Room in 3D」を製作する工程は、同氏のTwitchチャンネル上で全行程が公開されており、以下のからその様子を見ることが可能です。なお、製作工程ムービーは2～3時間のものが20本も公開されているため、すべてチェックするとなるとかなりの長さになるので注意。
My Room in 3D – Part 1 – Twitch
[embedded content]
また、シモンズさんは「My Room in 3D」のソースコードをGitHub上で公開しているので、気になる人はチェックしてみてください。
GitHub – brunosimon/my-room-in-3d
https://github.com/brunosimon/my-room-in-3d
この記事のタイトルとURLをコピーする
