Three.jsのかっこいい作例10選｜作り方まで読める制作事例と学べるサイト【2026年版】
📖 この記事はThree.jsシリーズの1本です。全体の流れは【まとめ】Three.js入門完全ガイドにまとめています。
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。
Three.jsを触り始めた頃、僕はよく「すごいサイト」を眺めては落ち込んでいました。かっこいいのは分かる。でもどうやって作っているのかが1ミリも分からない。ソースを開いても圧縮済みのJSが1行あるだけで、結局「自分には無理だな」で閉じる。その繰り返しでした。
なので今回は、選び方にルールを1つだけ決めました。
制作者自身が「どう作ったか」を公開している作品だけを選ぶ。
眺めて終わりではなく、気になったらそのまま作り方を読みに行ける10個です。ほとんどは、Web制作者向けメディアのCodropsに載っている制作者本人のケーススタディ（英語）です。作品そのものへのリンクは各記事の冒頭にあります。
それぞれに「ここから何を学べるか」と、このシリーズで近いことを扱っている記事も添えておきます。
Table of Contents
1. Susurrus ── 水彩画がそのまま3Dになった世界
水に浮かぶ風車小屋を、水彩画のタッチのままぐるぐる見回せる作品です。穏やかで居心地がいいのに、よく見ると小屋が無限にパンを焼き続けているという、少し不気味な仕掛けがあります。
- 技術：React Three Fiber / drei / React Three Rapier（物理）/ Howler.js（音）
- ここから学べること：水彩の見た目はKuwaharaフィルタという1枚のポストプロセスだけで作られています。しかも制作者は、Blenderでモデルを仕上げる前に、まずシェーダーから作り始めたそうです。「見た目のルールを先に決めて、モデルをそこに合わせる」という順番は、真似する価値があります
- 作り方 → Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders
- シリーズで近い記事 → React Three Fiber入門 / GLSL入門
2. Sketching the Impossible ── 3Dモデルを1つも使わない3Dポートフォリオ
ノートを開いたら、落書きが3Dに飛び出してきた。そんな見た目のポートフォリオです。白黒のスケッチにマウスを乗せると、そこから色が塗られていく演出が気持ちいい。FWA of the DayやAwwwardsのHonorable Mentionなどを受賞しています。
- 技術：React Three Fiber / GSAP（カメラやドアの動きは全部GSAP）
- ここから学べること：制作者は「3Dモデリングができない」ので、板と立方体だけを置いて、手描き風のテクスチャ（AIで生成）で包みました。できないことが、そのまま作品の個性になった例です。色が塗られていく演出は、ゼロからシェーダーを書くのではなく、
MeshBasicMaterialにonBeforeCompileで処理を足して作っています - 作り方 → Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model
- シリーズで近い記事 → マテリアル・テクスチャ・ライティング入門
Blenderが使えなくて3Dを諦めかけている人には、いちばん勇気が出る1本だと思います。
3. ガラスの木琴 ── なぞると鳴る、終わらない楽器
らせん状に並んだ64本のすりガラスのバーを、カーソルでなぞると音が鳴って揺れて、色がにじむ作品です。スクロールすると、らせんが無限に続きます。
- 技術：Three.js / Vite / postprocessing
- ここから学べること：64本のバーはまとめて1回で描いている（インスタンス描画）ため、Three.js標準の「透けるマテリアル」が原理的に使えません。そこでガラスの見た目をシェーダーで“それっぽく”偽装しています。揺れも、叩いた時刻を1つ覚えておいて頂点シェーダーで計算するだけ。本物を再現するのではなく、それっぽく見える一番安い方法を探す、というシェーダーの考え方がよく分かります
- 作り方 → Building an Endless Interactive Glass Xylophone with Three.js
- シリーズで近い記事 → GLSL入門
スクロールで体験させる
4. More Than a Portfolio ── スクロールで「場所」を旅するポートフォリオ
作品が並んだページではなく、訪問者が中に入っていく「場所」として作られたポートフォリオです。スクロールするたびに、映画のワンシーンのように構図が決まった3D空間が切り替わっていきます。
- 技術：Three.js / GSAP / Blender
- ここから学べること：制作は3ヶ月＋仕上げ3週間で、公開されなかった旧バージョンが3つあるそうです。技術面では、テクスチャのKTX2圧縮、モデルのDraco圧縮、インスタンシング、スマホ向けの低解像度シェーダーと、「重い3Dを軽く見せる」手札が一通り入っています
- 作り方 → More Than a Portfolio: Building a Scroll-Driven 3D World with Something to Say
- シリーズで近い記事 → Three.js × GSAPでスクロール連動の3D演出 / パフォーマンス最適化
5. ZERO ── 「ゼロを描け」と言われるサイト
サイトを開くと、入るボタンがありません。あるのは「ゼロを描け」という指示だけ。マウスで円を描いて閉じると、線から霜が広がって体験が始まります。
- 技術：Three.js / GSAP / Howler.js / Vite
- ここから学べること：1GBを超える素材を10MB未満に落として、安いAndroidでも60fpsで動かしています。しかもブラウザ本来のスクロールを一切使わず、1つの「仮想スクロール値」ですべてを動かす設計です。制作者いわく、開発時間の大半は描画ではなく素材の準備とGPUへの転送に使ったとのこと。最適化はコードより前、素材の段階で勝負が決まるという話は刺さりました
- 作り方 → ZERO: The Engineering Behind a Defiant Interactive Narrative
- シリーズで近い記事 → パフォーマンス最適化
6. Hubtown ── 企業サイトでここまでやる
インドの不動産デベロッパーのコーポレートサイトです。制作はUnseenというスタジオ。「作品」ではなく普通の企業サイトなのに、3Dとスクロール演出がしっかり入っています。
これだけはケーススタディが無いので、僕が実際にサイトを開いて中身を覗いてみました。
- 技術（実測）：Nuxt（静的書き出し）/ three.js（
ShaderMaterialで生のGLSL）/ GSAP（ScrollTrigger・SplitTextなど）/ Lenis / Theatre.js - ここから学べること：GSAPの記事で書いた「GSAP＋Lenis」の組み合わせが、実案件でもそのまま使われていることが確認できます。面白いのはTheatre.jsの使い方で、アニメーションをGUIのタイムラインエディタで作って、JSONとして書き出し、本番ではそのJSONを読み込んでスクロール量でタイムラインを進めています。シェーダーの色や係数までGUIから触れるようにしてあり、GLSLを開かずに演出を詰められる。デザイナーと分業しやすい構成です
- サイト → hubtown.co.in
7. False Earth ── 100万本の草がそよぐ偽物の惑星
地球に似ているのに、どこか「偽物」に感じる惑星を歩く作品です。100万本を超える草が、風になびき、キャラクターの動きに反応します。
- 技術：Three.js / WebGPU / TSL
- ここから学べること：前作はWebGLで作っていて、大量のデータを扱うためにデータを画像のピクセルに詰めて読み書きするという、かなり無理のある方法を使っていたそうです。WebGPUとTSLに移ってからは、データを素直にGPUのメモリに置けるようになり、「APIと戦うのではなく、世界のロジックに集中できるようになった」と書いています。なぜWebGPUなのかが一番よく分かる事例です
- 作り方 → False Earth: From WebGL Limits to a WebGPU-Driven World
- シリーズで近い記事 → TSLとは？ / WebGPU移行ガイド
8. 手続き型ジオメトリ・ペインター ── なぞった場所から水晶が生える
浮かんでいる球をドラッグすると、なぞった跡から水晶・溶岩のひび割れ・オーロラ・光る葉っぱが生えてくる作品です。
- 技術：Three.js / WebGPU
- ここから学べること：「なぞる」側のコードと「何が生えるか」側のコードをきっちり分けたおかげで、4種類の表現を、なぞる側のコードを一度も開かずに作れたそうです。WebGPUで
PointsMaterialのサイズが効かない、といった移行時のハマりどころも書かれていて実用的です - 作り方 → Exploring Procedural Geometry with Three.js and WebGPU
- シリーズで近い記事 → WebGPU移行ガイド
9. Shader.se ── 80年代風の会社サイトを、WebGPUで
スウェーデンの制作スタジオShaderの自社サイトです。80年代のビジネス広告をパロディにしたデザインで、スクロールするとシーンからシーンへ継ぎ目なく切り替わります。
- 技術：React Three Fiber / TSL（WebGL・WebGPUの両対応）
- ここから学べること：画面に映っていないシーンは描画を丸ごとスキップし、見えているシーンだけを順番につないで描いています。UIまでWebGPUの中に置くために、ライブラリをフォークして対応させたそうです。R3Fでここまでやれる、という上限を知るのにちょうどいい1本です
- 作り方 → 80s Business Tech and Seamless Scene Transitions Inside Shader.se’s Scroll-Driven WebGPU Pipeline
- シリーズで近い記事 → React Three Fiber入門 / WebGPU移行ガイド
10. Lusion ── 迷ったらまずここを見る
イギリスのブリストルにある制作スタジオです。Coca-ColaやPorscheなどと仕事をしていて、Three.js系の「かっこいい」を探すと、かなりの確率でここに行き着きます。
- ここから学べること：信条は「ゼロから作る」。テンプレートに押し込んだ瞬間に良いアイデアは壊れる、という考え方です。創業者は元々音楽の道を目指していて、デザインもコードも独学だったそうです。作品より先に、この経歴に勇気づけられました
- スタジオ紹介 → Lusion: Where Digital Craft Meets Ambitious Experimentation
書き出してみて、共通点が3つありました。
- 最適化の話が必ず出てくる。 10個中ほとんどが、テクスチャ圧縮・見えないものを描かない・データを軽くする、のどれかに紙幅を割いています。かっこいいサイトほど、裏で地味に軽くしている
- 全部を本物で作っていない。 水彩はフィルタ1枚、ガラスはシェーダーの偽装、3Dモデルの代わりに板とテクスチャ。「それっぽく見える一番安い方法」を探すのが上手い
- 制約から個性が生まれている。 モデリングができない、スマホで動かしたい、容量を10MBに収めたい。できないことを受け入れたところに、その作品らしさが出ています
最初に書いた「どうやって作っているのか1ミリも分からない」の正体は、魔法のような技術ではなく、こういう地道な判断の積み重ねでした。そう思えると、少し手が届く気がしてきます。
最後に、僕が普段どこで作例を探しているかも書いておきます。
| サイト | 使い方 |
|---|---|
| Codrops | 今回の10個のほとんどはここ。制作者本人のケーススタディとチュートリアルが読める。更新を追うだけで最新の手法が分かる |
| three.js examples | 公式のサンプル集。「この機能で何ができるか」をソースコードつきですぐ確認できる。WebGPU版のサンプルも増えている |
| Awwwards | 受賞サイトのギャラリー。Three.jsで検索すると、Three.js製の受賞サイトがまとめて見られる。見るのは「アイデア」で、作り方は載っていないことが多い |
| Three.js Journey | Bruno Simonによる有料の動画講座。基礎から体系的に学ぶならこれ（英語） |
| Maxime Heckel’s Blog | シェーダーやR3Fの解説記事。図とインタラクティブなデモで理屈から分かる |
おすすめの使い方は、Awwwardsで「かっこいい」を見つけて、Codropsで「作り方」を読んで、three.js examplesで「その機能」を試す、という3段階です。
まとめ
- 今回の10個は、全部制作者が作り方を公開している作品。気になったらそのまま読みに行ける
- シェーダーで見た目を作る（Susurrus・ガラスの木琴）、テクスチャで乗り切る（Sketching the Impossible）、スクロールで体験させる（More Than a Portfolio・ZERO・Hubtown）、WebGPUで物量を出す（False Earth・ペインター・Shader.se）
- かっこいいサイトほど裏で地味に軽くしている。そして全部を本物で作っていない
- 作例探しはAwwwards → Codrops → three.js examplesの順が効率がいい
かっこいい作品を見て落ち込むのは、たぶん作り方が見えていないからです。作り方が見えると「これは今の自分でもできる」「これは次に覚えること」と分けられるようになります。シリーズの記事と対応づけておいたので、気になった作品から逆引きしてみてください。
- シェーダーで見た目を作るなら → GLSL入門｜ShaderMaterialで自作シェーダー
- WebGPUの作品を作りたいなら → TSLとは？WebGPU時代の新しいシェーダーの書き方
- 全体のロードマップは → 【まとめ】Three.js入門完全ガイド
📕 見るだけでなく、自分の作品を作ってみたい人へ
今回のような作品に一歩ずつ近づけるように、小さな表現を積み重ねて作品にまとめるまでを書いたKindle本があります。
『Three.jsでつくる、小さなWebGL表現 ── はじめての”作品づくり”ガイド』
環境づくりから、モデルや質感を組み合わせて自分の作品にまとめ上げるところまで順を追って解説しています。
僕もXやInstagramで、Three.jsで作った作品を投稿しています。反応拡散（Gray-Scottモデル）で模様が育っていく作品や、磁性流体をブラウザで再現した作品など、「作り方が気になる」ものがあれば気軽に聞いてください。@shun_webdesignで待っています。それでは、よいThree.jsライフを🌊
