Three.js とは|ブラウザで3Dを描く無料の JavaScript ライブラリ
Three.js は、ブラウザ上で3Dコンテンツを描画するJavaScriptライブラリです。無料・オープンソースで公開されていて、費用はかかりません。
- 分類
- ゲームエンジン・フレームワーク
- 日本語対応
- 日本語非対応
- 費用
- 完全無料(MITライセンス)
- 公式サイト
- https://threejs.org/確認日 2026-09-08
Three.js の概要
Three.js は、ブラウザ上で3Dコンテンツを描画するためのJavaScriptライブラリです。現行のビルドに含まれるレンダラーはWebGL(ブラウザで3Dグラフィックを描画する標準の仕組み)とWebGPUだけで、SVGレンダラーとCSS3Dレンダラーもアドオンとして提供されています。バージョンはr186です。
Three.js の特徴
Three.js では、シーン・カメラ・ジオメトリ(形状)・マテリアル(材質)を組み合わせて、ブラウザ上で動く3Dの表現を作れます。npmパッケージ「three」として配布されており、JavaScriptのコードから直接呼び出して使います。公式サイトのトップには、サンプル(examples)のページへのリンクがあります。
Three.js が扱う 3D
Three.js は、JavaScript の3Dライブラリです。現行のビルドに入っているレンダラーはWebGLとWebGPUだけで、SVGとCSS3Dのレンダラーもアドオンとして提供されています。
Three.js の使用言語
JavaScript です。import * as THREE from 'three' の形で読み込み、シーン・カメラ・メッシュを組み立ててレンダラーに渡します。
Three.js の対応プラットフォーム
ブラウザです。関わる技術には、WebGL・WebGL2・WebGPU・canvas・SVG・WebAudio・WebXR・AR(拡張現実)・VR(仮想現実)などがあります。
Three.js に標準で入っている機能
標準の機能には、次のような区分があります。
| 区分 | 中身 |
|---|---|
| Animation | キーフレームのトラック、アニメーションのクリップ、混ぜ合わせの仕組みなど |
| Audio | 音の再生、解析、位置に応じて聞こえ方が変わる音など |
| Cameras | 透視投影・平行投影・立体視・キューブの各カメラなど |
| Geometries | 箱・球・円柱・トーラス・押し出し・多面体などの形状 |
| Lights | 環境光・平行光・点光源・スポット・矩形の面光源などと、平行光・点光源・スポットの影 |
| Materials | 標準・物理ベース・トゥーン・法線・影・スプライトなどの材質 |
| Loaders | テクスチャ・素材・アニメーション・音などの読み込み |
| Math | ベクトル・行列・四元数・オイラー角・球面調和関数などの計算 |
| Nodes | MathNode・TextureNode・LightsNode など、ノードの各種クラス |
| Renderers | WebGL と WebGPU のレンダラーなど |
Three.js が読み込める形式
読み込みはアドオンのローダーが担います。対応する形式の一部を、素材の種類ごとに挙げます。
| 素材 | 対応する形式 |
|---|---|
| 3Dモデル | glTF(GLTFLoader)・FBX・OBJ・COLLADA・PLY・STL・3DS・LWO・MD2・USD・VRML・3MF・Rhino 3dm |
| 圧縮した3Dデータ | Draco・KTX2 |
| ボクセル | VOX |
| テクスチャ | EXR・HDR・KTX・DDS・PVR・TGA・TIFF・UltraHDR |
| フォント | TTF |
| ベクター | SVG |
| 骨組みのアニメーション | BVH |
書き出しのアドオンもあり、glTF・OBJ・PLY・STL・USDZ・EXR・KTX2・Draco の形で出せます。
Three.js の拡張
本体とは別に、アドオンの一群があります。カメラの操作(OrbitControls ほか)、線の描画、後処理の効果、影の分割(CSM)、物理の補助などが含まれます。
Three.js の費用とライセンス
Three.js は無料で、MIT License のもとで公開されています。ソフトウェアの複製を入手した人は、使用・複製・改変・結合・公開・配布・サブライセンス・販売などの権利を含め、制限なく扱えます。条件は、著作権表示と許諾表示を、すべての複製またはその主要な部分に含めることです。
| 項目 | 費用 |
|---|---|
| 利用 | 無料 |
| ライセンス | MIT License |
Three.js は、npmパッケージ「three」として、またはGitHubのリポジトリから無料で入手できます。
- Three.js を手に入れるhttps://threejs.org/
情報源
- GitHub — mrdoob/three.js(README・LICENSE:概要・使い方・対応する話題・MIT License)https://github.com/mrdoob/three.js確認日 2026-10-16
- Three.js — 公式サイト(バージョン表記 r186)https://threejs.org/確認日 2026-10-16
- Three.js — 公式ドキュメント(標準の機能の区分・ローダーとエクスポーターの一覧・アドオン)https://threejs.org/docs/index.html確認日 2026-10-16