WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： furuhashi
カテゴリー： プログラム >JavaScript

前回の記事では、「Three.jsとは何か？」について、ブラウザ上で3D表現を簡単に実装できるライブラリであることを解説しました。
前回の記事：Three.jsって何？

「でも、実際にどんなことができるの？」
「普通のWebサイトとどう違うの？」

今回はそんな疑問にお答えすべく、Three.jsの技術が使われているWebサイトをご紹介します。どれも「これがブラウザで動いているの!?」と驚くようなものばかりなので、ぜひ実際にサイトを開いてみてください。

ゲームの世界に迷い込んだような「ポートフォリオ」

Bruno Simon’s Portfolio

フランスのエンジニア・クリエイター、Bruno Simon氏のポートフォリオサイトです。

サイトを開くと、画面上にはキーボード操作で動かせる真っ赤なラジコンカーが登場します。ユーザーはこの車を運転しながら、3D空間に配置された彼のこれまでの実績やスキルセットなどのオブジェクトにぶつかったり、走り回ったりして情報を閲覧します。

ただ情報を「読む」のではなく、「遊んで見つける」という全く新しいWeb体験を提供しており、Three.jsの物理演算やインタラクティブな表現力を最大限に活かした傑作です。

ブランドの世界観に入り込む「ミニチュア空間」

アプリファクトリーはるni株式会社

ゲーム開発を行う企業のコーポレートサイトです。
画面全体にレゴブロックで作られたような、ポップで可愛らしい街並みの3D空間が広がっています。散らばっているリンクや建物をクリックすると、カメラがシームレスにズームインして詳細が表示されます。

遊園地のマップを上から眺めているようなワクワク感があり、Three.jsによる「空間の移動（カメラワーク）」の美しさを体感できるサイトです。

なぜ多くの企業がThree.jsを取り入れるのか？

紹介したサイトに共通しているのは、ただカッコいいだけでなく「ユーザーの心を掴んで離さない」という点です。

• 滞在時間の向上： ついつい触りたくなる仕掛けがあるため、ユーザーがサイトに長く留まってくれます。
• 直感的な理解： 言葉や写真だけでは伝わりにくい製品の構造やスケール感を、3Dで視覚的に分かりやすく伝えられます。
• 強力なブランディング： 「他とは違う体験」を提供することで、企業やブランドに対する印象が強く記憶に残ります。

まとめ

Three.jsを使うと、ただ情報を並べただけの平面的なWebサイトを、ユーザーが自ら操作して楽しめる「体験型の空間」へと進化させることができます。

「3Dのサイトを作るなんてハードルが高そう……」と感じるかもしれませんが、簡単なアニメーションや3Dモデルの配置であれば、比較的少ないコードから始めることも可能です。

次回は、「Three.jsを実際にWebサイトに導入するための第一歩（環境構築や簡単なオブジェクトの表示など）」について解説していく予定です。お楽しみに！