Three.jsの最新リリース：r186（npm
three@0.186.0）、2026年9月8日公開。ひとつ前のリリースはr185（2026年6月25日公開。7月1日にパッチ0.185.1）。最終確認日：2026-09-23。
Three.jsのリリースは「rNNN」という名前で、npmには0.NNN.xとして公開されます。2026年は8〜11週間ごとに新しいリリースが出ています。本記事では、r182以降の各リリースの変更点、アップグレード時に壊れやすいポイント、そしてWebGPUプロジェクトへの影響をまとめます。
要点まとめ
- 最新リリースはr186（
three@0.186.0、2026年9月8日公開）。 - 9か月で5リリース：r182（2025年12月10日）からr186まで。2026年は8〜11週間ごとに新しいリリースが出ています（2月18日、4月16日、6月25日、9月8日）。
- r186の新機能：両レンダラーでカスケードシャドウが使える
SunLight、コンピュートシェーダーを事前コンパイルするcompileComputeAsync()、PBRシェーディングのエネルギー保存の見直し。 - r186で削除されたもの：
PCFSoftShadowMap（警告を出してPCFShadowMapを使用）、TSLのrangeFogとviewportResolutionのエクスポート、minifyビルド。require('three')は非推奨の警告を出すようになりました。 - r183で
PostProcessingはRenderPipelineに改名、Clockは非推奨になりTimerへ。旧名も動作しますが、警告が出ます。 - WebGPUはChrome、Edge、Safari 26、Firefox（WindowsとApple Silicon Mac）でデフォルト有効です。three.jsの
WebGPURendererは、WebGPUが使えない環境ではWebGL 2に自動でフォールバックします。 - npm週間ダウンロード数（2026年9月15〜21日）：
threeは約1,218万回で、@babylonjs/coreの約39倍、playcanvasの約215倍でした。
1. Three.jsのリリース一覧（r182〜r186）
新しい順に並べています。リリース名のリンク先は公式のリリースノートです。注意点はthree.jsのMigration Guideとリリースノートに基づいています。「当社サイトでも発生」と記した項目は、私たちが自社のWebGPUサイトをアップグレードした際に実際に壊れた箇所です。
| リリース | 公開日 | 主な変更点 | アップグレード時の注意点 |
|---|---|---|---|
| r186（0.186.0） | 2026年9月8日 | 両レンダラーでカスケードシャドウマップが使えるSunLightアドオン、compileComputeAsync()、PBRシェーディングのマルチスキャッタリングとエネルギー保存の見直し、ガウシアンスプラッティングのアドオン、MeshPhysicalMaterialの再帰反射（retroreflective）対応 | PCFSoftShadowMapを削除（レンダラーは警告を出してPCFShadowMapを使用）、TSLのrangeFogとviewportResolutionのエクスポートを削除（screenSizeを使用。当社サイトでも発生）、minifyビルドの廃止とCommonJSビルドの非推奨化、SourceをTextureSourceに改名、Object3Dのカスタムサブクラスはsuper.dispose()の呼び出しが必要 |
| r185（0.185.0、7月1日に0.185.1） | 2026年6月25日 | WebGPURendererでのWebXR対応、クラスター（Forward+）ライティング、WebGPUバックエンドへのディスクリプタクラスとキャッシュの導入、レンダーターゲットのテクスチャ破棄の修正 | WebGPURendererのプリマルチプライドアルファの扱いが変更（ブレンドがおかしい場合は不透明な背景色かクリアカラーを設定）、positionNode内のpositionLocalにスキニングが含まれなくなった（代わりにpositionGeometryを使用。当社サイトでも発生）、TiledLightingを削除、directionToColor()とcolorToDirection()を改名、npmパッケージにexamples/fontsが含まれなくなった |
| r184（0.184.0） | 2026年4月16日 | WebGPURendererのcompileAsync()がレンダリングをブロックしなくなった、互換レイヤー経由でWebGLRendererでもTSLとノードマテリアルが利用可能に、FSR 1とTAAUのアップスケーリングノード、LightProbeGridによるグローバルイルミネーションのアドオン | 非推奨だったBatchedMeshのマルチドローインスタンシングの経路を削除（当社サイトでも発生）、背景と環境マップの回転がオブジェクトの回転と同じ向きに統一、FBXLoaderがZアップのモデルをYアップに自動変換 |
| r183（0.183.0、パッチは0.183.2まで） | 2026年2月18日 | PostProcessingをRenderPipelineに改名、Clockを非推奨化（Timerへ移行）、TSLでストレージテクスチャの読み書きに対応、BatchedMeshのインスタンスごとの不透明度、WebGPURendererのリバースデプスバッファ | WebGPUのシャドウ改善に伴い、既存のシャドウバイアスを小さくするか削除、WebGLCubeRenderTargetはWebGPURendererで使用不可（CubeRenderTargetを使用）、RoomEnvironmentとSkyの見た目が変化 |
| r182（0.182.0） | 2025年12月10日 | シャドウマッピングを刷新（PCFShadowMapがソフトシャドウに）、MeshStandardMaterialとMeshPhysicalMaterialの物理的な正確さを改善、WebGPURendererとそのポストプロセスに関する公式マニュアルを追加 | WebGLRendererでPCFSoftShadowMapが非推奨に、WebGPURendererのcolorBufferTypeをoutputBufferTypeに改名 |
使っているバージョンを確認する
- プロジェクト内：
npm ls threeでインストール済みのバージョンが表示されます（例：three@0.185.1）。 - コード内：
console.log(THREE.REVISION)でリビジョン番号が文字列で表示されます（例：'185'）。 - 公開中のサイト：three.jsはリビジョン番号をグローバル変数
__THREE__に保存します。three.jsを読み込んでいるページなら、ブラウザのコンソールで__THREE__と入力すると確認できます。 - npm上の最新版：
npm view three versionで最新の公開バージョンが返ります。
2. r186へのアップグレード
r183以降からアップグレードする場合は、以下のリストを順に確認してください。それより古いバージョンからは、Migration Guideの推奨どおり10リリース以内の刻みで段階的に上げます。非推奨の警告は10リリース分しか残らないためです。
- シャドウ：
PCFSoftShadowMapをPCFShadowMapに置き換え（r182以降はこちらもソフトシャドウです）、shadow.biasを再調整します。 - TSLのインポート：
rangeFog()はfog(color, rangeFogFactor(near, far))に、viewportResolutionはscreenSizeに置き換えます。旧名のエクスポートは削除されたため、インポートするとエラーになります。 - ビルド：ESモジュール（
import * as THREE from 'three'）で読み込みます。*.min.jsのビルドは同梱されなくなり、require('three')は非推奨の警告を出します。 - 改名されたクラス：
PostProcessingの代わりにRenderPipeline、Clockの代わりにTimerを使います。旧名も動作しますが、警告が出ます。 - カスタムオブジェクトとノード：
Object3Dのカスタムサブクラスではsuper.dispose()を呼び出します。スキンメッシュのpositionNodeでは、positionLocalではなくpositionGeometryを読みます。 - 見た目の確認：アップグレード前後のスクリーンショットを比較します。今回のリリースでPBRのエネルギー保存が見直されたほか、r185では
WebGPURendererのプリマルチプライドアルファの扱いも変わっています。
既存のWebGLプロジェクトをWebGPUへ移行する場合は、レンダラーの置き換え、非同期の初期化、TSLシェーダー、フォールバックまで作業範囲が広がります。手順はWebGPU移行チェックリストの完全版に、現行APIでのコード例はr186対応のパフォーマンス改善100のヒントにまとめています。
3. WebGPU：主要ブラウザエンジンのすべてが対応
何年もの間、WebGPUは「もうすぐ準備完了」の状態でした。Appleは対応を見送り続け、10年以上前に登場したWebGLが唯一の安全な選択肢であり続けました。
それが2025年9月に変わりました。
Safari 26：最後のピース
AppleがSafari 26（macOS、iOS、iPadOS、visionOS）でWebGPUを搭載したことで、主要なブラウザエンジンのすべてがWebGPUに対応しました。現在の状況は次のとおりです：
| ブラウザ | WebGPUがデフォルトで有効 |
|---|---|
| Chrome / Edge（デスクトップ） | Windows、macOS、ChromeOSはv113以降。Linuxはv144以降（Intel）とv147以降（Wayland上のNVIDIA） |
| Chrome（Android） | v121以降（Android 12以上） |
| Firefox | v141以降（Windows）とv145以降（macOS 26、Apple Silicon）。v147以降はApple Silicon上のすべてのmacOSバージョン。LinuxとAndroidは引き続きフラグが必要 |
| Safari | v26以降（2025年9月）。macOS、iOS、iPadOS、visionOS |
（出典：caniuse.com/webgpu、gpuweb implementation status）
WebGPUが使えない環境ではWebGPURendererがWebGL 2に自動でフォールバックするため、ひとつのコードベースですべてのユーザーをカバーできます。
WebGPUが実際に変えるもの
WebGPUは単に「WebGLの新しいバージョン」ではありません。アーキテクチャが根本的に異なります：
- コンピュートシェーダー: 汎用GPUコンピューティングを実行—物理演算、ML推論、データ処理
- より良いリソース管理: GPUメモリと状態の明示的な制御
- 現代的なAPI設計: GPUの実際の動作に合わせて構築（OpenGLからの変換ではなく）
- CPU負荷の軽減: Chromeチームは、同じグラフィックスを描く際のJavaScriptの処理負荷が大幅に減ると説明しています（出典：Chrome Developers）
効果はシーンによって異なります。ドローコールが多いシーンやGPUコンピュートでは効果が大きい一方、常に速くなるわけではありません。three.jsのフォーラムでも、WebGPURendererがWebGLRendererより遅くなったシーンが報告されています（スレッドの例）。速度だけを目的に移行する前に、まず計測してください。
Three.jsが簡単にした
マイルストーンはr171（2024年11月29日）です。このリリースでthree/webgpuとthree/tslのエントリーポイントが追加され、WebGPUの導入はインポート1行で済むようになりました：
import { WebGPURenderer } from 'three/webgpu';
バンドラーの設定もポリフィルも不要です。setAnimationLoop()が最初のフレームの前にレンダラーを初期化し、WebGPU非対応のブラウザではWebGL 2にフォールバックします。セットアップは公式のWebGPURendererマニュアル（英語）で解説されています。
この時期に本番投入できる段階へ進んだブラウザAPIは、WebGPUだけではありません。詳しくは2026年に本番投入できるフロンティアWeb APIをご覧ください。
4. 数字で見るThree.js：npmダウンロード数（2026年9月）
| パッケージ | 週間ダウンロード数（2026年9月15〜21日） |
|---|---|
| three | 12,184,549 |
| @babylonjs/core | 314,621 |
| playcanvas | 56,681 |
この週のthreeのダウンロード数は、@babylonjs/coreの約39倍、playcanvasの約215倍でした。Babylon.jsの旧来のbabylonjsパッケージは、同じ週に16,921回です。ダウンロード数にはCIや再インストールも含まれるため、稼働中のサイト数ではなく、エコシステムの規模を示す指標として読んでください。（出典：npmダウンロードAPIのthree、@babylonjs/core、playcanvas）
ライブラリ選定の観点からは、npmダウンロード数の比較で、機能やツールとあわせて3つのライブラリを比べています。
なぜここまで圧倒的なのか？
- エコシステムの厚み: React Three Fiber、Drei、そして豊富なコミュニティツール
- ドキュメントとサンプル: threejs.orgの公式サンプルは600以上、うち230がWebGPU向け（2026年9月時点）
- フレームワーク統合: React（React Three Fiber）、Vue（TresJS）、Svelte（Threlte）、バニラJS
- AI向けドキュメント: three.jsはAIコーディングツール向けのllms.txtを公開しています（r183で追加）
エコシステム効果は自己強化的です。開発者が増えればツールが増え、チュートリアルが増え、Stack Overflowの回答が増える—それがさらに開発者を引き寄せます。
5. バイブコーディング：AIで作られたゲームにThree.jsが多い理由
2025年2月2日、Andrej Karpathy（OpenAI共同創設者の一人、元TeslaのAI責任者）が「バイブコーディング」という言葉を生みました。作りたいものを言葉で伝え、コードはAIに書かせる開発スタイルです。英国のコリンズ辞書は2025年11月6日、この言葉を2025年の「今年の言葉（Word of the Year）」に選びました。
Three.jsはこのスタイルと相性の良いライブラリです。JavaScriptだけで動き、バックエンドが不要で、結果を目で確かめられます。Pieter Levelsが主催した2025年のVibe Coding Game Jamは、コードや素材の80%以上をAIで作ることを条件とし、ルールでthree.jsを推奨していました。応募は1,000本以上。審査員にはthree.jsの作者であるmrdoobとKarpathyが加わり、1位は「The Great Taxi Assignment」でした（受賞作の発表）。
注意点もあります。古いコードで学習したAIアシスタントは、ClockやPostProcessingといった非推奨のAPIを提案することがあります。生成されたコードは上のリリース一覧と照らし合わせるか、three.jsのllms.txtをアシスタントに渡してください。
6. 海外テック企業の3D Web投資
海外の大手テック企業も、3D Webエクスペリエンスに積極的に投資しています。
その代表例がShopifyです。Shopifyは2025年、新機能発表ページ「Shopify Editions Winter '26」に没入型の3Dシーンを採用しました。ページのJavaScriptを確認すると、3Dシーンはthree.js（r181、WebGLRenderer）で描画されています（2026年9月時点）。単なる「おしゃれなサイト」ではなく、ビジネスメッセージを伝える手段として3Dが使われている例です。
このトレンドは、日本企業にとっても重要な示唆を与えます。グローバル市場で競争するためには、Webサイトも「見せる」から「体験させる」へと進化する必要があります。
7. Webサイトを超えて：Three.jsで本格アプリケーション
驚くべきことに、Three.js + WebGPUは数百万のデータポイントを処理するアプリケーションでも実用的になりました。
事例：Segments.ai
私たちはSegments.aiの3Dラベリングプラットフォームを、WebGLからWebGPUへ移行する支援を行いました。
Segments.aiの事業：LiDAR点群などのセンサーデータにラベルを付けるツールを提供しており、自動運転やロボティクスのAIの学習に使われています。ユーザーは数百万の3Dポイントを含むデータセットを表示・操作・選択する必要があります。
課題：WebGLでは処理が追いつかず、操作が重く、複雑なシーンではフレーム落ちが発生していました。
WebGPU移行後：大規模な点群でも操作がスムーズになり、選択・アノテーションツールも強化されました。
なぜこれが重要か
Three.js + WebGPUは、マーケティングサイトやプロダクトコンフィギュレーターだけのものではありません。パフォーマンスが妥協できないプロフェッショナルツールも動かせます。
8. ブラウザを超えて：インタラクティブインスタレーション
Three.jsはラップトップのブラウザタブを必要としません。JavaScriptが動くところならどこでも動きます—美術館、小売店、公共施設の大型ディスプレイを含めて。
事例：大阪万博2025での北斎
私たちは大阪万博2025で、来場者が自分の体で北斎の大波を操作できるインタラクティブインスタレーション「Waves of Connection」を制作しました。
技術的なセットアップ：
- WebGPU + Three.jsでレンダリング
- 約100万パーティクルをリアルタイムでシミュレーション
- Kinect深度カメラで複数人の身体追跡
- 98インチ4Kディスプレイで没入感のあるスケール
VRヘッドセットなし。コントローラーなし。来場者はただ動くだけ—そして波が反応しました。
7日間の展示で10,000以上のインタラクションがありました。子供たちは何度も列に並び直しました。最初は戸惑っていた大人も、最後には両腕を振って笑っていました。
これが示すもの
Three.jsのスキルはWeb以外にも応用できます。同じコードベースパターン、同じパーティクルシステム、同じシェーダーテクニック—それらは物理的なインスタレーション、キオスク、デジタルサイネージ、没入型体験にも機能します。
9. 次に来るもの：注目すべきトレンド
WebXRの拡大
WebXR（ブラウザでのVR/AR標準）が成熟しています。Three.jsはこれを直接サポートしており（r185以降はWebGPURendererでも対応）、ヘッドセットが普及するにつれ、ブラウザベースの没入型体験が成長するでしょう。
AI生成アセット
NVIDIA GauGANやAdobe Substance 3D Samplerなどのツールがテクスチャやマテリアルの生成を自動化しています。Three.jsプロジェクトはAI生成アセットをますます取り入れ、制作時間を削減するでしょう。
ML用コンピュートシェーダー
WebGPUのコンピュートシェーダーにより、ブラウザでMLモデルをGPU上で直接実行できます。Transformers.jsなどのライブラリがすでにこれを活用しています。Three.jsプロジェクトでもリアルタイムエフェクトのためのローカルAI推論が統合されることが予想されます。
10. Utsuboについて
Utsuboは、以下を専門とするインタラクティブクリエイティブスタジオです：
- Web3D体験: ブランドサイト、プロダクトコンフィギュレーター、没入型ストーリーテリング
- インタラクティブインスタレーション: 美術館、小売店、イベント、公共空間
- WebGPU開発: リアルタイム3Dを必要とする高性能アプリケーション
主要ブランドや文化機関と協働してきました。私たちのプロジェクトはAwwwards、FWA、The Webby Awardsで認められています。
11. ご相談ください
Webで野心的な3Dプロジェクトを構築中ですか？私たちはインタラクティブ体験、プロダクトコンフィギュレーター、没入型ブランドプロジェクトでチームと協業しています。
パートナーシップをご検討中なら、プロジェクトについてお話しましょう：
- 何を構築しているか、どのような制約があるか
- 目標に対してどの技術アプローチが適切か
- 私たちが実行をお手伝いするのに適したパートナーかどうか
まとめ：プロジェクトへの影響
2026年のThree.jsは、定期的なリリース、主要ブラウザエンジンのすべてでのWebGPU対応、そしてWebサイトからデータ量の多い業務ツールや物理インスタレーションまで広がった活用範囲によって特徴づけられます。
新規プロジェクトの場合：WebGPURendererで始めてください。WebGPU非対応のブラウザは、WebGL 2への自動フォールバックがカバーします。
既存プロジェクトの場合：10リリース以内の刻みで段階的にアップグレードし、上の表で各リリースの注意点を確認してください。WebGLからWebGPUへの移行はパフォーマンスの限界に達したときに行い、効果を必ず計測してください。効果はシーンによって異なります。
採用とチームについて：Three.jsのスキルは、Web、モバイル、物理インスタレーションの仕事で共通して活用できます。週約1,218万回のnpmダウンロード（2026年9月）は、大規模で充実したエコシステムの証です。制作会社を比較する場合は、Three.jsエージェンシーの比較ガイドもご覧ください。
参考文献
- three.jsリリースノート（GitHub）
- three.js Migration Guide
- npmのthreeパッケージ：バージョンと公開日
- npmダウンロード数（2026年9月15〜21日）
- WebGPUブラウザ対応状況（caniuse）
- WebGPU実装状況（gpuweb）
- Collins Word of the Year 2025
- 2025 Vibe Coding Game Jam 受賞作
よくある質問
Three.jsの最新バージョンは何ですか？
最新リリースはr186で、2026年9月8日にnpmでthree@0.186.0として公開されました。ひとつ前のr185は2026年6月25日に公開され、7月1日にパッチ版の0.185.1が出ています。プロジェクトで使っているバージョンは、npm ls threeを実行するか、ブラウザのコンソールでTHREE.REVISIONを表示すると確認できます。
Three.jsはどのくらいの頻度でリリースされますか？
r173からr180まで（2025年1月〜9月）は、ほぼ毎月リリースされていました。その後は間隔が広がり、2026年は8〜11週間ごとに新しいリリースが出ています。各リリースはGitHubでrNNNとしてタグ付けされ、npmには0.NNN.xとして公開されます。その後にパッチ版が出ることもあります。
r186では何が変わりましたか？
r186では、WebGLRendererとWebGPURendererの両方でカスケードシャドウマップが使えるアドオンのSunLight、コンピュートシェーダーを事前コンパイルするcompileComputeAsync()、PBRシェーディングのエネルギー保存の見直し、ガウシアンスプラッティングのアドオンが追加されました。一方で、PCFSoftShadowMapが削除され（レンダラーは警告を出してPCFShadowMapを使用）、TSLのrangeFogとviewportResolutionのエクスポートも削除、minifyビルドは廃止、CommonJSビルドは非推奨になりました。
2026年、WebGPUは本番環境で使えますか？
ほとんどのプロジェクトで使えます。WebGPUは、Chrome・Edge（Windows、macOS、ChromeOSではバージョン113以降）、Android 12以降のChrome、macOS・iOS・iPadOS・visionOSのSafari 26、WindowsとApple Silicon MacのFirefoxでデフォルト有効です。Linuxへの対応は一部にとどまり、AndroidのFirefoxはまだフラグが必要ですが、three.jsのWebGPURendererはWebGL 2に自動でフォールバックするため、ひとつのコードベースですべてのユーザーをカバーできます。公開前には、アプリ内ブラウザを含め、対象デバイスで必ずテストしてください。
r186にアップグレードすべきですか？
r183以降を使っているなら、短いチェックリストを確認したうえでのアップグレードをおすすめします。PCFSoftShadowMapをPCFShadowMapに置き換える、rangeFogとviewportResolutionのインポートを削除する（screenSizeを使用）、Object3Dのカスタムサブクラスでsuper.dispose()を呼び出す、require('three')やminifyビルドの読み込みをESモジュールに切り替える、の4点です。それより古いバージョンからは、three.jsのMigration Guideが推奨するとおり10リリース以内の刻みで段階的に上げ、各段階でライティングとシャドウの見た目を確認してください。
Three.jsプロジェクトの費用はどのくらいですか？
スコープによって異なります。Webでのカスタム3D制作は約300万円からで、3DやWebGLの見せ場をひとつ持つカスタムサイトが300万〜750万円、スクロール連動のストーリーテリングと3Dを組み込んだフルカスタムサイトが750万〜1,500万円、フル3Dの世界を構築する場合は1,500万〜3,000万円以上が目安です。インタラクティブインスタレーションは、マルチセンサーのカスタム作品で600万〜1,200万円、ルームスケールのリアルタイム3Dで1,500万〜3,000万円、1画面のインタラクティブ作品でも300万円からです。詳しい内訳はWebサイト費用ガイドとインスタレーション費用ガイドをご覧ください。
WebGL・Three.js開発
