この記事は、トラストバンク Advent Calendar 2022の記事です。 フロントエンドエンジニアの君田（きみた）です。
3Dグラフィックとかってなんとなくカッコいいイメージがあり、前々から触ってみたかった技術だったので、 Advent Calendar を機に使ってみることにしました！
せっかく記事として投稿するなら、ふるさとチョイスのオリジナルキャラクターである「チョイタ」を3Dコンテンツとして ブラウザに表示させたいなと思ったので本日はチョイタを回してみたいと思います。（笑） また、チョイタの誕生秘話はここから読めますので、ぜひ目を通してください！
Three.jsとは
JavaScriptの知識だけで簡単に3Dコンテンツが作成できるライブラリです。 [Three.js 公式]
以前はWebGLで3Dコンテンツを表現するのに多大なコードを書く必要がったらしいのですが、 Three.jsの登場によりJavaScriptの知識さえあれば誰でも簡単に少ないコード量で実現することができるようになったそうです。
実際にThree.jsを使用して作成されたWEBサイトの事例をいくつかピックアップしたので、アクセスしてみてください。
どのWEBサイトも3Dコンテンツを利用し、とても印象に残るようなデザインになっています。 （あと、カッコいい）
チョイタを回す
完成画面からお見せします。
3Dチョイタがくるくる回っています！ みなさんもぜひ手元で確認していただきたいので、コードを置いておきます。
どうやっているのか
具体的なコードの説明はThree.jsのさまざまなチュートリアルや入門記事がわかりやすいと思いますので、 そちらで確認いただくとして、Three.jsの描画方法をざっくり説明すると
scene(シーン)を作り、 camera(カメラ)とobject(オブジェクト)を配置し、 light(ライト)を当てて、 renderer(レンダラー)で描画する
といった感じです。 自分も最初はなんのこっちゃだったのですが、舞台をテレビで見ていることイメージしていただくとわかりやすいかと思います。
scene(シーン) ⇨ 舞台 camera(カメラ) ⇨ カメラ object(オブジェクト) ⇨ 俳優さんや女優さん、舞台のセットなど light(ライト) ⇨ 照明 renderer(レンダラー) ⇨ テレビに表示される舞台（カメラが切り替わったり移動したりする）
それぞれを作成し、角度や光度やカメラワークなどを調整して表現します。
3Dモデルはどうやってつくるの？
有名なのはBlender（ブレンダー）とか、Adobe Substance 3D Modelerとかでしょうか？ しかし、いづれも難しそうでモデルを作り終わる前に年が明けてしまうと思ったので探しました、 簡単に3Dモデルが作れるツール、、、、、、、ありました。
3Dモデリングに関する知識ゼロで作成できます。 ソフトウェアのインストールなども不要で、ブラウザ上で線を書くだけです。
最後に
WEBデザインは日々進化し、現在ではとても衝撃的なデザインが多くなってきました。 その中の選択肢の１つとして3Dコンテンツがあると思います。 例えばふるさとチョイスのWEBサイト内で3Dのチョイタが走り回ったり（笑）など、面白い表現もできると思います。 いづれふるさとチョイス内にも3Dコンテンツを使用するときが来たら、その時はぜひ挑戦したいと思います！
トラストバンクでは一緒に活躍するエンジニアを募集中です。
