こんにちは、たまにはWebの話でもしようかと思っている藤岡です。

とは言っても技術系の難しい話をしても一部の人以外には「ちょっと何言ってるのか分からない」と言われてしまうので、
誰が読んでもわかりやすい内容にします！

今回はタイトルにもある通り、「Webサイトに3Dモデルを表示してみた🌎」です！

PCやスマートフォンのプロモーションサイトなどでは、よく3Dモデルがサイト上で使われていますね。
そんな3Dモデルを今回はThree.jsという、JavaScriptという言語のライブラリと呼ばれる技術を使って作成しました。

はい、地球です。🌍️

自転していますね。
これは動画などではなく、Webブラウザ上で3Dモデルをレンダリングしてアニメーションさせています。

ちょっと北極海が狭すぎたかな…？
そして影が濃ゆすぎたかも…夜が長い……

この地球に関してはすべてプログラム上でコードを書いて作成しているので、3DCGソフトなどは使用しておりません。
（地球の表面や背景の宇宙に、画像は使用しています…🛸）

逆にblenderなどの3DCGソフトで緻密なモデルを作成し、それをThree.jsに持ってきてWebに表示するということもできます。

また今回の地球はただ回っているだけですが、構築次第ではマウスや指でドラッグして360度眺めてみたり、拡大縮小などをさせることもできます。

使い方によってはいろいろな表現ができる3Dモデル。
僕もblenderが使えるようになってWebと連携させて表現したい…勉強しよう……。👨‍💻

以上、久しぶりのWebの話でした！

こんな事もできるんだなぁと、少しでもWebの世界に興味を持っていただけましたら幸いです！