みなさんこんにちは!おさかなです!
今回は「My Room in 3D」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・3Dグラフィックで遊びたい方
・Three.jsを使ったサービスを知りたい方
・3Dモデルを学びたい方
3Dマイルームで遊びぼう!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
最近Three.jsを使ってみたよ!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
Three.jsで作られた「3Dマイルーム」で遊んでみると、おもしろいかもー!?
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ついにネット上におさかなの部屋が!!
![](https://osakanav.com/wp-content/uploads/2021/03/echoar-top-160x90.jpg)
「My Room in 3D」って何?
「My Room in 3D」とは、自分でカスタマイズして遊べる「3Dマイルーム」のことです。
3Dグラフィックが描画できるJavaScriptライブラリの「Three.js」を使っており、オリジナルの部屋を作ることができます!(すごいっ!!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/1134d1dfdd348b73c930494cf35df3e8.png)
![](https://osakanav.com/wp-content/uploads/2021/08/3dbay-top-160x90.jpg)
実際につかってみよう!
カスタマイズしよう!
それでは早速サイトにアクセスします!(めっちゃすごい!)
![](https://osakanav.com/wp-content/uploads/2021/10/3d-room.png)
(動いてる〜!!)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-defoult.gif)
右上のボックスから色々とカスタマイズすることが出来るみたいです!
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-menu.png)
それでは上から順に見ていきましょう!
まず「uNightMix」のメーターを動かすと「部屋の明るさ」を変更することができます。(エモい)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-lights.gif)
次に「uNeutralMix」を変更すると、白ピンクっぽい色に!(かわいい!)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-pink.png)
次に「tv」から「TVライトのカラー」を変更してみましょう!
(16進数のカラーコードも使えます!)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-tv.gif)
「uLightTvStrength」では「TVライトの明るさ」を変えることができます。(神々しい…✨)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-lights-tv.png)
マウス操作で「拡大」「縮小」もできます!(本当に部屋の中にいるみたい!)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-size.gif)
他にもこんな感じで、PCのライトを変更できたり…。
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-pc-lights.gif)
細かいですが、コーヒーの湯気までカスタマイズできます!☕
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-coffee-hot.gif)
ちなみに、GitHubからソースコードを見ることもできるので、プログラムの学習をしたい方はぜひご活用ください!(ふむふむ…。)
「製作者さん」のサイトも面白い!
右下の「Bruno Simon」をクリックすると、製作者さんのサイトへ飛べるのですが、これがまた面白い!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-make.png)
サイトを開いてみると、何やら「START」との文字が!?笑
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-car.gif)
あれ?!この映像どこかで…?!笑
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-profile-tv.png)
↓気になる方は、ぜひ覗いてみてください!
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/05f6c62af84e4cb9e497a2d6ee7dfbdf.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
3D技術も進化していて、すごいな〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/07/deep-javascript-160x90.jpg)