2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
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.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには