必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力

株式会社ゆめみ所属・新人フロントエンドエンジニア

佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。

目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。

では、軽く自己紹介を。初めまして、佐々木祥晶です。株式会社ゆめみに2022年卒として入社しました。フロントエンドエンジニアとして、主にReact、Next.jsを触っています。LTの参加は、今回が初めてです。

趣味は、ピアノと動画投稿です。気に入った曲を耳コピアレンジして、鍵盤が光るように改造したピアノを使って、「After Effects」でVFX編集した動画をよく「YouTube」に投稿して遊んでいます。よろしくお願いします。

Webブラウザ上で簡単に3Dアニメーションを作れるJavaScriptライブラリ「Three.js」

自己紹介はここまでにして、さっそく本題に入っていきたいと思います。まず「Three.jsって何ぞや？」「どんなことができるんだ？」っていうことを紹介できればなと思います。

簡潔に言うとThree.jsとは、Webブラウザ上で簡単に3Dアニメーションを描画できるJavaScriptライブラリです。2010年4月にOSSとして公開され、現在も開発が続けられている、活発なライブラリです。

WebGLと呼ばれる技術の発達によって、Webブラウザ上で3次元空間を描画できるようになりました。それにより、簡単に3Dのコンテンツを表現できるThree.jsというものが生まれました。

1点補足をすると、このWebGLは、「Flash Player」のようなプラグインを使用せずとも2DCGや3DCGを描画することが可能な、マルチプラットフォームのJavaScript APIのことです。

Three.jsが選ばれる理由とは？

次に、なぜThree.jsが使われているのか、その理由を説明していきたいと思います。

Three.jsが選ばれる理由、それはなんと言っても入門のハードルが低いことが大きいのではないかなと思っています。JavaScriptの基本的な知識さえあれば、誰でもリッチな3Dアニメーションを制作できます。

Three.js固有のメソッドもあるので、ある程度キャッチアップや検索はしなければいけませんが、とはいえ、Three.jsを使わず、仮にWebGLだけで3Dコンテンツを表現しようとすると、例えば、3DCGを表現するための基礎知識だけでなく、3DCGをキャンバス要素で表現するための座標変換や、それを描画するために必要な専門の言語を用いる必要があり、それなりに高度なことが要求されてしまいます。

Three.jsは基本的なJavaScriptの知識があれば、Three.jsの機能を使うだけで、気軽に3Dコンテンツを制作できます。そのため、入門のハードルが低く、Three.jsが選ばれているのではないかなと考えています。

ほかには、利用者数が多いことで、Three.jsについて検索するとヒットする情報が多いということも挙げられます。また、ライブラリ容量もおよそ150キロバイト、圧縮版のサイズですが、比較的軽めなのもうれしいところだと思います。

「GitHub」「Zenly」…Three.jsの導入事例

それでは、Three.jsがどこで使われているのか、いくつか導入事例を紹介していきます。

まずは、私たちがよく使う「GitHub」。とはいっても、いつもの見慣れたみんなのアクティビティが載っているトップページではなく、GitHubのランディングページのほうです。URLの後ろに「/home」が付くのが特徴です。ちょっと実際に見てみたいと思います。

こんな感じでランディングページがあるのですが、けっこう下のほうにスクロールすると出てきますね。これです、ありました。この地球です。

マウスのドラッグ＆ドロップで、この地球を3次元的に動かすことができます。また、この飛び出ているところにホバーをすると……出てきました、これです。どこで何が行われているのかとか、今プルリクが出されたとか、世界中で開発が行われていることがわかって、なかなかおもしろいです。

ちなみにこれはちょっとおまけですが、「Wappalyzer」という、技術を明らかにするブラウザ拡張機能で見ると……ここですね。こういった感じで、このサイトでThree.jsが使われていることがわかります。

GitHub以外に、例えば「Zenly」という位置情報共有アプリの公式サイトがあるので、こちらを見ていきたいと思います。

実はこのサービスはあと10日ほどでサービスが終了してしまうようで（※登壇当時）、それに伴い見られなくなってしまったのですが、かつて、このサイト上で人はが歩いていたり、謎の生き物が動いていたりなど、なかなか愉快なアニメーションがたくさんありました。

今あるものだと、例えばこの地球をこういうふうに回転させることができたりするところとか、あとはこのマウスポインターの軌跡とかでThree.jsが使われていそうです。

では、最後にThree.jsの公式のイグザンプルをちょっとご紹介します。時間の都合上、すべてを紹介することはできませんが、こんなふうになかなか愉快なアニメーション例がたくさん載っているので、興味がある方はぜひのぞいてみてください。

ちなみに、これですね。ちょっと下のほうに行くと、なかなかこれまたおもしろいものがありまして……あるかな、あるかな。出てきました。

これ。「Minecraft」をブラウザ上で描画するなど、おもしろい取り組みもあります。たしか、マインクラフトのデータをThree.jsで取り込む際は、「Mineways」というプラグインを使えば実現できた気がします。

Three.jsをどう使っていく、メリットとデメリット

導入事例はここまでにして、最後に、Three.jsをどう使っていくかを紹介していければなと思います。けっこう私の考えも入りますよ。

今までいくつか見てきましたが、やはりWebに3Dコンテンツを取り入れると2Dでは表現できないようなリッチな演出が可能になると思います。

3DコンテンツをWebサイトに取り入れると、2Dのような……ここでは情報提供型コンテンツと表現しますが、それだけではなく、体験型のコンテンツとしてユーザーに臨場感のある体験を提供できると思います。

3D表現を用いたWebサイトでユーザーの興味を惹きつけられるなら、ファーストインプレッションの差別化も期待できると考えます。

しかしデメリットとして、3Dのままなのでやはりどうしても開発に手間がかかるということが挙げられると思います。

また、3Dコンテンツは2Dのコンテンツよりも大容量であるため、表示するために多くの処理が必要となります。そのため、高速通信のネットワークや、それに対応した規格の端末が環境として整っていないとスムーズな閲覧が難しく、ユーザー体験を悪くしてしまうこともあるかもしれません。

このように、Webサイトに3Dコンテンツを取り入れることは、メリット、デメリット、両方あるかなと思います。

とはいえ、見ていて楽しいものが作れるのは間違いないはずです。おまけでデモを作ってきたので、最後にちょっとご覧ください。

こちらは、Webサイト上に、スクロールに応じてアニメーションが変化する仕掛けをThree.jsで実装したものです。こういうふうにスクロールに応じてアニメーションが変化していきます。

ポートフォリオや個人サイトなどに、こんな感じのアニメーションを入れたらなかなか楽しいサイトになるのではないかなと思います。どんなアニメーションを入れるかは、もちろん各々の自由です。

このアニメーションは、実は100行ちょっとぐらいのJavaScriptで実装できました。けっこうお手軽にThree.jsを始めることができるのではないかなと思います。

あとは、もう1つですね。ちょっと昔に作った完全にネタ枠のものなんですが、あれですね、ちまたで人気の「宇宙猫」。

実家のかわいい猫ちゃんで、アニメーション付きで作ろうと思ったやつです。

この後ろの銀河。これですね。Three.jsでパーティクルと呼ばれる粒子を整列させて、拡大するとこんな感じになっています。なんかいい感じに数式に当てはめてやると、こんな感じの渦巻き状のものを表現できる。そしてそれを回転させています。

難易度は先ほどのスクロールアニメーションより高いですが、たしかこれも100行ちょっとぐらいで実装できたと思います。デモは以上にしたいと思います。

Three.jsの魅力のまとめ

まとめです。Three.jsの魅力。まず1つは、JavaScriptで簡単に3Dアニメーションを表現できること。

ちなみに補足ですが、型も提供されているのでTypeScriptでも書けますし、Reactなどでも使うこともできます。

2つ目は、利用者数も多いので情報の検索がしやすいこと。

そして3つ目は、Webサイトに3Dコンテンツを取り入れれば、ユーザーの興味を惹きつけられるかもしれないということ。

ほかにもまだまだ魅力はあるかなと思います。比較的お手軽に始められると思うので、今回の発表でThree.jsに入門してみてはいかがでしょうか？

以上で発表を終わります。ご清聴ありがとうございました。