2024.10.21
お互い疑心暗鬼になりがちな、経営企画と事業部の壁 組織に「分断」が生まれる要因と打開策
Three.js の魅力を語る(全1記事)
リンクをコピー
記事をブックマーク
佐々木祥晶氏:それでは発表いたします。題目は、「Three.js の魅力を語る」です。
目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや?」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。
では、軽く自己紹介を。初めまして、佐々木祥晶です。株式会社ゆめみに2022年卒として入社しました。フロントエンドエンジニアとして、主にReact、Next.jsを触っています。LTの参加は、今回が初めてです。
趣味は、ピアノと動画投稿です。気に入った曲を耳コピアレンジして、鍵盤が光るように改造したピアノを使って、「After Effects」でVFX編集した動画をよく「YouTube」に投稿して遊んでいます。よろしくお願いします。
自己紹介はここまでにして、さっそく本題に入っていきたいと思います。まず「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が選ばれる理由、それはなんと言っても入門のハードルが低いことが大きいのではないかなと思っています。JavaScriptの基本的な知識さえあれば、誰でもリッチな3Dアニメーションを制作できます。
Three.js固有のメソッドもあるので、ある程度キャッチアップや検索はしなければいけませんが、とはいえ、Three.jsを使わず、仮にWebGLだけで3Dコンテンツを表現しようとすると、例えば、3DCGを表現するための基礎知識だけでなく、3DCGをキャンバス要素で表現するための座標変換や、それを描画するために必要な専門の言語を用いる必要があり、それなりに高度なことが要求されてしまいます。
Three.jsは基本的なJavaScriptの知識があれば、Three.jsの機能を使うだけで、気軽に3Dコンテンツを制作できます。そのため、入門のハードルが低く、Three.jsが選ばれているのではないかなと考えています。
ほかには、利用者数が多いことで、Three.jsについて検索するとヒットする情報が多いということも挙げられます。また、ライブラリ容量もおよそ150キロバイト、圧縮版のサイズですが、比較的軽めなのもうれしいところだと思います。
それでは、Three.jsがどこで使われているのか、いくつか導入事例を紹介していきます。
まずは、私たちがよく使う「GitHub」。とはいっても、いつもの見慣れたみんなのアクティビティが載っているトップページではなく、GitHubのランディングページのほうです。URLの後ろに「/home」が付くのが特徴です。ちょっと実際に見てみたいと思います。
こんな感じでランディングページがあるのですが、けっこう下のほうにスクロールすると出てきますね。これです、ありました。この地球です。
マウスのドラッグ&ドロップで、この地球を3次元的に動かすことができます。また、この飛び出ているところにホバーをすると……出てきました、これです。どこで何が行われているのかとか、今プルリクが出されたとか、世界中で開発が行われていることがわかって、なかなかおもしろいです。
ちなみにこれはちょっとおまけですが、「Wappalyzer」という、技術を明らかにするブラウザ拡張機能で見ると……ここですね。こういった感じで、このサイトでThree.jsが使われていることがわかります。
GitHub以外に、例えば「Zenly」という位置情報共有アプリの公式サイトがあるので、こちらを見ていきたいと思います。
実はこのサービスはあと10日ほどでサービスが終了してしまうようで(※登壇当時)、それに伴い見られなくなってしまったのですが、かつて、このサイト上で人はが歩いていたり、謎の生き物が動いていたりなど、なかなか愉快なアニメーションがたくさんありました。
今あるものだと、例えばこの地球をこういうふうに回転させることができたりするところとか、あとはこのマウスポインターの軌跡とかでThree.jsが使われていそうです。
では、最後にThree.jsの公式のイグザンプルをちょっとご紹介します。時間の都合上、すべてを紹介することはできませんが、こんなふうになかなか愉快なアニメーション例がたくさん載っているので、興味がある方はぜひのぞいてみてください。
ちなみに、これですね。ちょっと下のほうに行くと、なかなかこれまたおもしろいものがありまして……あるかな、あるかな。出てきました。
これ。「Minecraft」をブラウザ上で描画するなど、おもしろい取り組みもあります。たしか、マインクラフトのデータをThree.jsで取り込む際は、「Mineways」というプラグインを使えば実現できた気がします。
導入事例はここまでにして、最後に、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の魅力。まず1つは、JavaScriptで簡単に3Dアニメーションを表現できること。
ちなみに補足ですが、型も提供されているのでTypeScriptでも書けますし、Reactなどでも使うこともできます。
2つ目は、利用者数も多いので情報の検索がしやすいこと。
そして3つ目は、Webサイトに3Dコンテンツを取り入れれば、ユーザーの興味を惹きつけられるかもしれないということ。
ほかにもまだまだ魅力はあるかなと思います。比較的お手軽に始められると思うので、今回の発表でThree.jsに入門してみてはいかがでしょうか?
以上で発表を終わります。ご清聴ありがとうございました。
関連タグ:
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.21
40代〜50代の管理職が「部下を承認する」のに苦戦するわけ 職場での「傷つき」をこじらせた世代に必要なこと
2024.11.20
成果が目立つ「攻めのタイプ」ばかり採用しがちな職場 「優秀な人材」を求める人がスルーしているもの
2024.11.20
「元エースの管理職」が若手営業を育てる時に陥りがちな罠 順調なチーム・苦戦するチームの違いから見る、育成のポイント
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.19
がんばっているのに伸び悩む営業・成果を出す営業の違い 『無敗営業』著者が教える、つい陥りがちな「思い込み」の罠
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.15
好きなことで起業、赤字を膨らませても引くに引けない理由 倒産リスクが一気に高まる、起業でありがちな失敗
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.21
40代〜50代の管理職が「部下を承認する」のに苦戦するわけ 職場での「傷つき」をこじらせた世代に必要なこと
2024.11.20
成果が目立つ「攻めのタイプ」ばかり採用しがちな職場 「優秀な人材」を求める人がスルーしているもの
2024.11.20
「元エースの管理職」が若手営業を育てる時に陥りがちな罠 順調なチーム・苦戦するチームの違いから見る、育成のポイント
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.19
がんばっているのに伸び悩む営業・成果を出す営業の違い 『無敗営業』著者が教える、つい陥りがちな「思い込み」の罠
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.15
好きなことで起業、赤字を膨らませても引くに引けない理由 倒産リスクが一気に高まる、起業でありがちな失敗