Three.js / WebGL を活用した3Dウェブサイトのギャラリーです。
WebGPUで組んだBtoBサイト。3DシーンをWeb WorkerのOffscreenCanvasに逃がし、メインスレッドを空けている。
業務用コーヒー焙煎機メーカーのサイト。3Dヒーローと360表示を載せたWebflow製で、Site of the Day と Developer Award を同時受賞している。
日本のクリエイティブデベロッパーの個人サイト。ステッカーを触るインタラクションとページ遷移で Site of the Day を獲った。
ポロシャツができるまでを工場に見立てた3D体験。編む・刺す・染めるの各工程がそれぞれ操作できる機械になっている。
ショーリールを動画にせず、WebGLの3Dプレビューで並べたエージェンシーの作品集。SOTDとDeveloper Awardの二冠。
インドのデザインスタジオの自社サイト。Site of the Day と Developer Award を同日に取った実装評価先行の3Dポートフォリオ。
ラコステの会員向けブロック崩し。テニスのラリーをゲーム化し、景品はローラン・ギャロスのチケット。
Site of the DayとDeveloper Awardを同日に取ったブランディングスタジオのサイト。暗い緑2色の中で3Dを抑制的に使う。
Awwwards で3Dタグが付いた Site of the Day。ただし中身は Webflow と Shopify と GSAP で、3Dライブラリは見当たらない。
高級腕時計 FS 60P の1ページサイト。時計のリアルタイムWebGL描画が周囲のコンテンツの進行に反応する。
延床53,300平方メートルのオフィスビルを、竣工前に売るためのサイト。写真の代わりにWebGLイラストが実物を務める。
Awwwards Site of the Day ＋ Developer Award。Webflowの上に、Netlifyから読み込む自作エンジンで流体シミュレーションを載せている。
Awwwards Site of the Day ＋ Developer Award。受賞理由はおそらく、本物のGPU流体シミュレーションをブラウザで回していること。
車を運転して回る3Dポートフォリオ。ナビゲーションが衝突判定に置き換わっている、WebGLサイトの古典。
英国ブリストルのリアルタイム特化型クリエイティブスタジオ。ポートフォリオ自体が常駐する一枚のWebGLキャンバスで、読み物としてのUIはDOM、背景は3Dという層構成をとっている。
ブラウザ上でリアルタイムに3Dをレンダリングし、スクロールに合わせて素材やライティングが変化していくドイツのWeb制作スタジオサイト。
太陽系をそのままナビゲーションにした個人ポートフォリオ。案件もスキルも軌道上のノードと星座として配置されている。
クリニック向けAI受付サービスの紹介ページ。3Dタグ付きだが、実体は書き出し済みのループ動画である。
デザイナー13人の会食シリーズを1本のWeb出版物に仕立てた企画。目次がそのままナビゲーションになっている。
記念碑に自分の歴史を語らせるアプリのランディング。石像のギャラリーを黒と白の2色だけで歩かせる。
アポロ11号が月面で過ごした21時間を、月面の3D再現とNASAの公開アーカイブだけで辿らせるSOTD。
AIスタートアップスタジオの会社紹介を、宇宙空間を進みながら実績を拾っていく体験に組み替えている。
空間演出プラットフォームのサイト。WebGLタグが無いのに3Dタグが付く、演出手段の読めない一件。
AIの門番と会話して通してもらう個人ポートフォリオ。守秘案件をどう見せるかをAI越しに解いている。
集中と休憩を交互に回すタイマーアプリの紹介サイト。見どころが全部、画面の間の遷移側にある。
フルスタック開発者の個人ポートフォリオ。Three.jsとカスタムシェーダによる演出を、Prismic管理の実務案件20件超の一覧に重ねている。
画像トレイル演出のポートフォリオ。キーボードのTでコンソールモードに入ると、画面全体がASCII表示に切り替わる。
普通の企業サイトをフォトリアルな3Dに置き換えるドイツのスタジオ。ヒーローの物体を掴んで投げられ、Bキー長押しで設計図表示に切り替わる。
6つの国からなる架空の惑星を旅する実験サイト。国歌・国旗・地形がそれぞれに用意され、空港の発着案内板ふうのナビで切り替わる。
ドゥカティ創業100周年記念モデルの特設サイト。3Dタグ付きだが、実体はスクロールに同期する動画シーケンスで組まれた一本道のスクロールテリング。
パリとベナンを拠点にする建築事務所のサイト。素材と土地の話を、Three.jsとBlender資産による終端のないスクロール空間で見せる。
炭素除去のMRVを自動化するドイツ企業のサイト。3Dはリアルタイムではなく、Cinema 4Dで焼いた映像をFramer上で流している。
全体367KBのWebGL小品。午後の光が差す日本の路地に、見知らぬ誰かの独り言が一度だけ流れて消えていく。
日本の小規模ブランディングスタジオの4代目サイト。セクションからセクションへ移る瞬間に重力がかかる遷移演出を売りにしている。
創業60年の家具ブランドの刷新サイト。3DコンフィギュレータをThree.jsではなくUnityのWebGLビルドで載せているのが珍しい。
VPNやプロキシの裏に隠れた通信を見抜くIPインテリジェンス企業。ヒーローの3Dグローブに静止画フォールバックを用意している。
ループのたびに世界を作り直すWebGLポートフォリオ。HTMLを取得すると本文に Reconstructing... の1語しか入っていない。
オーストリア・チロルのグラフィックデザイナーの個人サイト。ポスター作品が静かに並ぶ画面で、カーソルを追う目玉だけが動く。
1000体を超えるAIエージェントがラスベガスをマラソンする、Google Cloud Next 2026 基調講演用のオープンソース3Dシミュレーション。
商品動画1本を約1時間で回せる3Dモデルに変換するサービス。サイト自体がその出力を並べたショールームになっている。
撮影監督のポートフォリオ。3Dモデルではなく映像サムネイルの配置と遷移そのものを Three.js で組んでいる。
中東欧の商業不動産アドバイザリー。堅い業種のWebflowサイトに雲のモチーフとイースターエッグを仕込んでいる。
エポキシ樹脂メーカーのサイト。色と質感を画面上で比べるスウォッチラボと、アイソメトリックな3D仕様選択ツールが中心にある。
歯科・美容クリニックのサイトをスクロール連動のThree.js飛行に置き換えた例。トグル1つで昼の空とオーロラの夜空が反転する。
AI時代のソフトウェア開発を掲げるスタジオのサイト。無限スクロールのワークギャラリーが主役で、3D/WebGLは前面に出てこない。
ブランドアイデンティティ制作スタジオのサイト。3D/WebGLタグ付きだが、実体は Elementor 4.2.3 で組まれた WordPress。
架空のサプリのLPに見せかけて、途中で偽情報対策キャンペーンだと明かす。ケベック州選挙管理委員会の一本もの。
ブエノスアイレスのデザインエンジニアの個人サイト。パーティクルのモーフィングとスクロール連動のリグ操作が全編の主役。
ドバイのCXデザイナーのポートフォリオ。読むのではなく、機嫌の変わるロボットに案内されて歩き回るサイト。
大塚製薬の新ブランド /zeroz のサイト。3DCGの章が順に開いていく構成を、Astro の静的ビルドの上に WebGL で載せている。
月額の本のサブスクを Webflow で作り直した事例。スクロールで本が立ち上がる3D演出を、260冊超のCMSの上に載せている。
パリの3Dアーティスト兼ディレクターの個人サイト。Three.js と GSAP の表側に Sanity を繋いで作品を差し替える構成。
王子グループの事業全体をイラストの一本道で見せるブランドブック。GROW から RENEW まで5章がスクロールで繋がる。
Awwwardsでは3Dタグ付きだが、実体はBlenderの書き出しをmp4と静止画で流すWebflowサイト。リアルタイムWebGLは使っていない。
金融サイトの定石をわざと外した資産運用会社のブランドサイト。方眼罫のグリッドの上で3Dのロゴが動く。
プロダクトデザイナーの10年分の職歴を、宇宙空間を進んでいく3Dシーンの上に時系列で並べた個人サイト。
アイスランドの2人組スタジオ。Astro に Barba.js を載せるという今では珍しい構成で、ページ遷移の滑らかさを作っている。
IKEAスペイン30周年の記念サイト。家具の組み立て説明書という語彙を、そのまま社会の30年を分解する演出に転用している。
2万枚の花びらが、ある一点から見たときだけ鳥居と月に見える。視点そのものを売り文句にしたリヨンの3Dスタジオ。
家族経営のデジタルスタジオ。3Dはリアルタイム描画ではなく、Blenderで焼いた全画面の背景動画1本として置かれている。
四足歩行ロボットの製品LP。3Dタグが付いているが、動きの提示は実際にはVimeo埋め込みの映像で行われている。
Windows公式ページのリニューアル。WebGLのヒーローを、恒常運用されるアクセシブルなデザインシステムの中に同居させている。
デンバーのインタラクティブスタジオ。ブラウン管テレビの山とキャラクターが流れ続ける、無限スクロールのレトロフューチャー。
2026年W杯を題材にした非公式のファンサイト。18000点のパーティクルで組んだ黄金のトロフィーが重力の中心になっている。
テキサスのベーグル店のサイト。フッターで3Dのベーグルが無限に降ってくる、Webflow製の小ネタ集。
ビットコイン採掘からAI向けデータセンターに軸足を移した電力事業者のサイト。3Dは事前レンダーの動画で見せている。
モンドリアンの画風の変遷を章立てでたどるWebGLサイト。風景画が格子へ分解されていく過程をスクロールで見せる。
三角関数でカードを円環に並べただけの3D占い。Three.jsもWebGLも使わず、GSAPとバニラJSだけで奥行きを作っている。
記憶に残る1シーンを作ることを看板に掲げる韓国の制作スタジオ。サイト自体がその見本になっている。
映像制作会社TYOの採用サイト。3Dタグが付くが実体はBlender書き出しのループ動画で、PCとSPで別ファイルを配信している。
ASCIIアート生成器を自作してサイト全体の絵作りに使う暗号資産VCのサイト。glbもjpgもmp4も同じシェーダを通す。
カナダの制作会社のサイト。Developer Award を取っているが、配信されるHTMLは Loading... だけで中身はJS側にある。
イーサリアム・トレジャリー企業のサイト。Three.jsタグが付くが、ヒーローは30fpsのwebmに焼き込まれている。
官公庁・公益向けIT企業のWebflow移行事例。3DはBlender書き出しのイラストで、18種のページに敷き詰められている。
韓国のナイトマーケットを3Dで組み、ファンがラブレターを投函するキャンペーンサイト。現在は終了済み。
音声AI語学アプリのLPを、スクロールに反応するGLSL製のパーティクル球体ひとつで引っ張る。3Dはモデルではなく点の集合。
3本のワインボトルを回して見せる二言語の製品サイト。クリムトの装飾と金の質感を3Dの光沢で成立させている。
F1由来のバッテリー技術を売る新会社のサイト。3DはリアルタイムWebGLではなくBlenderのレンダー動画で見せている。
ベルリンのWeb3エンジニアリングスタジオのサイト。404ページがインタラクティブなゲームとして作られている。
微分音ダブルネックを38日で作った記録。既存WordPressサイトの1ページに3Dターンテーブルを載せている。
Webflowのサイトに Three.js で缶の3Dを載せた、無限スクロールのローンチサイト。SOTDとDeveloper Awardの二冠。
建築家向けAI設計エンジンのブランドサイト。トレーシングペーパーの重なりという紙の質感をWebGLで作っている。
大学の代替を掲げるZeroのマニフェストサイト。折り紙のように畳まれる登録フォームとゲーム的な地図まで作り込む。
実測標高タイルで作った8,849mのエベレストをスクロールで登り切るWebGL体験。品質を実機に合わせて自動調整する。
ペンテスト用ハードウェアの分解ビューをスクロールで見せる製品サイト。3D表現の実体は事前レンダリングのwebm動画。
3D/VFXスタジオのポートフォリオ。作品側はCG中心だが、サイト自体はNext.jsと動画配信で組まれている。
未公開のボツ案と実験だけを集めたアーカイブ。32本を、動きながら形を変えるナビゲーションで見せる。
W杯1試合分の約1,500イベントを起伏する布と地形に変換する。xGが高さ、主導権が縫い目の位置になる。
スウェーデンの小規模スタジオのポートフォリオ。リアルタイム3Dをサービスメニューの1項目として掲げている。
タバスコ155年の歴史を、唐辛子の色づきと樽の中の時間に置き換えた個人制作のWebGLスクロールテリング。
2026年6月のベネズエラ地震を伝える非営利サイト。3D演出の出口が検証済みの寄付先を探す機能になっている。
スマートリングの製品サイト。Awwwardsは3Dタグを付けているが、実体はAstroと静的webp画像のレイヤー合成。
1930年から2026年までのW杯を1本のスクロールで辿る個人制作。モデルは出てこず、画像遷移だけをWebGLで繋いでいる。
APAC中心の国際物流会社。3Dヒーローから始めて、1つの貨物が陸・海・空を渡る流れをスクロールで辿らせる。
サイト全体が1つの3D作業机。左ドラッグで回し、机上のギャラリーテーブルを押して作品シーンに切り替える。
ミラノのデザイナーの個人サイト。3DはトップではなくAboutにあり、本人の頭部モデルとガラス質の表現が置かれている。
高高度から海底まで動く自律機体の組込みネットワーク機器を、写真ゼロの3Dレンダーだけで見せるFramer製コーポレートサイト。
ドバイの会員制テニスリーグ。作り込んだテニスコートの3Dシーンそのものを、リーグ紹介の舞台に使い切っている。
ウクライナの家庭用洗剤ブランド。商品写真を1枚も使わず、全ボトルを3Dで起こしてスクロール再生させている。
1つの正方形が展開して作品群の銀河になる。ページ遷移が無く、全部が同じ空間の中の移動として繋がっている。
Astroの静的サイトにWebGLだけを足したクリエイティブデベロッパーの名刺。惑星テクスチャとカーソルの覗き窓が仕掛け。
紙に塗った魚をスマホで撮ると、その絵がそのまま3Dの魚になって共有の水槽を泳ぎ出す参加型ビューア。
ニュージーランドの建築事務所サイト。作り手は Codrops にも寄稿する WebGL 開発者で、住宅写真のギャラリー遷移を Three.js で組んでいる。
パリのアートディレクターのポートフォリオ。generator メタタグが Vite + Vue 3 で、WebGL ポートフォリオとしては珍しい選択。
モーションデザイナーのティザーサイトが、コインを集めて時間を巻き戻す小さなゲームになっている。スマホでは端末の傾きがカメラ操作。
映像ディレクターのポートフォリオ。Awwwards の3Dカテゴリだが申告技術は CSS と SVG と Next.js で、WebGL は使っていない。
Blender で組んだアイソメトリックのオフィスを Spline に持ち込み、Webflow のサイトへ丸ごと埋めたポートフォリオ。
ゲームスタジオの紹介を、スクロールではなくゲームボーイのカートリッジを1本ずつ差し替える操作で読ませる。
サイズと形を指定すると手吹きガラスの部品を最大1500個まで自動で詰めて吊り下げ照明を生成する。DXF と PDF の製作図まで出る。
北オンタリオの森林伐採会社が、重機と現場を3Dで見せて人を採用するために作ったコーポレートサイト。
エレバンのVFXスタジオのポートフォリオ。トップページが作業デスクの見立てで、画面の中に事例が流れる。
シカゴ拠点のUX/UIプロダクトデザイナーの個人ポートフォリオ。AI領域の設計を主軸に、3Dを見せ場として添える構成。
プロジェクト一覧をリングや螺旋に組み替えられるWebGLキャンバスが、そのままナビゲーションになっているスタジオサイト。
ジェット推進の無人機を、スペック表ではなくミッションのシーケンスごと3Dで見せる防衛スタートアップのサイト。
ベオグラードの住宅複合施設を、間取り表ではなくシネマティックな3D移動体験として見せる不動産サイト。
スペインと中南米に展開するベンチャービルダーのコーポレートサイト。GSAPではなくAnime.jsで彩度の高い遷移を組む。
Three.jsではなくPlayCanvasで組まれたAIインフラの巡回体験。軌道上の衛星からデータセンターまでを一続きで辿る。
GSAP主体の不動産サイト。横スクロールの物件ギャラリーとフロアプランのセクションに3Dを差し込む構成。
インタラクティブな3Dの胸像と、ポケモンやたまごっち風の隠しミニゲームが同居する個人サイト。
派手さを避けることを明言したポートフォリオ。Three.jsを前面に出さず、遷移と小さな反応の質に振っている。
シカゴのクリエイティブディレクターの個人サイト。Three.js と Cinema 4D を併用し、レコード盤モチーフで作品を切り替える。
フルスタック／AIエンジニアの個人ポートフォリオ。稼働中のAIエージェントと3D演出を同じ1ページに同居させている。
自律航行する無人ボートのメーカーサイト。3Dの見せ場は導入ムービーと、ケーススタディを紐づけた地球儀。
ドイツの制作会社の自社サイト。意図的に過剰で風刺的なトーンを、WordPress という土台の上で組み立てている。
VinFast VF8 の内部をレイヤーごとに剥がして見せるカットアウェイ・ビューア。バッテリーもモーターもホットスポットで開く。
WebGPU と TSL で書かれた1つのパーティクル場が、ページを移動しても破棄されず6つの世界へ姿を変える個人サイト。
Figma用3Dプラグインのプロモサイト。プラグインでできること（形・素材・光）を、そのままブラウザ上の3Dで触らせる。
リアルタイムAI向けサーバーレスGPU基盤のサイト。目に見えないインフラを3Dとデータ可視化で図解している。
2026年後半発売予定、鞄にクリップで留める携帯コンパニオン機のティザー。まだ実物がないので3Dモデルが製品写真を務める。
WordPress製のゲーム会社サイト。立体的に見えるコインやドミノの正体は、事前レンダリングした2D画像。
土が緑化するシェーダと開花する3Dアセットで主張を通すブランドスタジオのサイト。ただし配信物は動画と静止画。
WebGPU + TSL で組まれた個人ポートフォリオ。起動時にGPU性能を判定し、ティア別にアセットを出し分ける。
Smithfield Foods の傘下ブランド群を、イラストの土地をめぐる Three.js の3Dマップとして見せる企画サイト。
職歴を1枚の地図に変えたポートフォリオ。Three.js と p5.js を同居させ、経歴を有機的なデータビズとして歩かせる。
メルボルンのベトナムコーヒー焙煎所のShopifyストア。3Dのルックは Blender 書き出しの動画と静止画で作られている。
デジタル作品をデジタルのまま額装して物理空間に置く画廊のサイト。Webflow の上に Three.js の3Dヒーローを載せている。
モントリオールの制作会社が自社に置いた対話型AIアシスタント。WebGLの3Dモデルが応答の相手役として画面に居続ける。
ニュージーランドの家具ブランドの非公式リデザイン案。Webflow に結合済みの圧縮 .glb を1本だけ載せて椅子を回す。
ドバイの超高級レジデンスを、スクロールでズームするWebGLの3Dマップと3Dギャラリーだけで見せる物件サイト。
3Dを動画として持ち込んだWordPressサイト。血管のCGはmp4で流れており、リアルタイムWebGLは使っていない。
オリジナルの3Dキャラクターで世界を組んだポートフォリオ。技術タグにThree.jsが1つも無い3Dサイト。
画像1枚から3Dモデルを生成するサービス。最大30万ポリゴン、GLB／OBJ／STLの3形式で書き出せる。
コソボのプロダクトデザイナーの個人サイト。AI前提の制作フローそのものを実績として並べている。
DeFiの金利トランシェを説明するサイト。UIに落としにくい金融商品をWebGLのイラストで具体化している。
使用スタックを NEXT_THREE_GSAP と1つの識別子のように掲げる、フロントエンド開発者の個人サイト。
スクロールを映画のカット割りとして設計したポートフォリオ。ヒーローもケーススタディもフッターも独立した1シーンになっている。
「映画として演出されたデジタル体験」を掲げるスタジオ。ページ遷移を光の転換として設計している。
ニュージーランドのノンカフェイン飲料。1枚の大きなキャンバスではなく、セクションごとに6枚のキャンバスをSSRしている珍しい構成。
ブランドカラーをシェーダのuniformとして持つ、全ページ共通のWebGLパーティクル背景。モデルを一切使わない静的サイト。
エレベーター施工会社のサイト。4MBのGLB 1つを、スクロールでカメラを動かして「乗って移動する」ヒーローにしている。
WebGLを1行も使わずAwwwardsにノミネートされた例。3Dの正体は、WordPressプラグインでスクラブする事前レンダリングの連番画像。
アラビアの意匠をまとったスキンケアブランドの没入サイト。React製に見えて R3F は不使用、素のThree.jsで組まれている。
Webflowの上に手書きのThree.jsを重ねたフィンテックLP。地球儀がクレジットカードに変形する。
GSAPもLenisも使わず、framer-motion のスクロール値だけで React Three Fiber のシーンを動かしている採用エージェンシーのサイト。
モデルを1つも読み込まない3Dサイト。カールノイズで形を変えるGPUパーティクル群だけで構成されている。
ピックルボールのパドルのLP。ドラッグして回せる3Dは自前のWebGLではなく、工業用CTスキャンの外部ビューアをiframeで埋め込んだもの。
NASA/JPLによる太陽系のリアルタイム3Dモデル。1949年から2049年まで、126機の探査機の実際の軌道をブラウザでたどれる。
インストール不要のブラウザFPS。ローポリの絵作りは様式である以上に、古い端末でも同じビルドを動かすための設計判断。
WebGL/WebGPUエンジンの公式サイト。ヒーローのロゴが3Dガウシアンスプラッティングで、ドラッグして回せる。
東京のインタラクティブ制作会社。WebGLを装飾ではなくデザインの主媒体として使い続けている、国内の代表例のひとつ。
WebGL版と非WebGL版のDOMを二重に持ち、丸ごとフォールバックできるように作られた東京のクリエイティブスタジオサイト。
104個のDOM要素にフックを付け、その位置とサイズをGLシーンへ同期させる「HTMLがシーングラフを駆動する」構成。
トップページ全体をひとつの canvas に描く、国内スタジオの中でも最もWebGLに振り切った構成。
スイッチプレートの仕上げを選ぶコンフィギュレーター。132通りの組み合わせが、約19KBのglTF 1ファイルに収まっている。
クラウド側のUnreal Engineでレンダリングした映像をストリーミングする自動車コンフィギュレーター。描画品質が端末のGPUに依存しない設計。
Webflow製のページに、別ホストの自作Three.jsアプリをマウントするハイブリッド構成。約2MBのモデルで製品レンダーの質感を出している。
製品ギャラリーのタブのひとつとして3Dを置いた、派手さのないEC実装例。カラーごとにGLBとUSDZを対で用意している。
3Dライブラリを一切使わず、生のWebGLで書かれたポートフォリオ。デスクトップ版のJSは約70KBしかない。
body の中身が noscript だけ。UIもテキストもレイアウトも自社製3Dエンジンで描画する、極端なフルWebGLサイト。
スタジオを歩き回れるリアルタイム3D空間。しかもサイトのソースコードが丸ごとGitHubで公開されている。
Awwwards Studio of the Year 2024。浅浮き彫りのような3D表現と、KTX圧縮を軸にしたアセットパイプラインが見どころ。
建築家のポートフォリオ。慣性スクロールと余白設計で、作品を1点ずつ見せていく静かなスクロール体験を作っている。
プロダクトを軸に据えたスクロールテリング型のLP。GSAP と Lenis による滑らかな慣性スクロールに WebGL の演出を重ねている。
%20(3).webp)
