three.jsとは？機能と導入方法

ページ内ナビ

概要

three.jsは、ブラウザーに3Dシーンを表示するためのJavaScriptライブラリです。シーン、カメラ、形状、材質、描画処理を共通のAPIで構成し、WebGLまたはWebGPUの描画へつなげられます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-04

主な特徴

シーン・カメラ・形状・材質をJavaScriptで構成する

READMEの最小例では、PerspectiveCameraとSceneを用意し、BoxGeometryとMeshNormalMaterialからメッシュを作り、WebGLRendererの描画ループで立方体を動かします。低水準の描画APIを直接組み上げずに、3Dシーンの要素と更新処理を記述できます。

出典：[1]

ローダー・操作部品・後処理をアドオンから選ぶ

本体は3Dエンジンの基礎を提供し、OrbitControls、GLTFLoader、後処理などはthree/addons以下から個別に読み込みます。現在のビルドはWebGLとWebGPUの描画を含み、SVGとCSS3Dの描画はアドオンとして利用できます。

出典：[2][1]

向いている用途

製品表示・データ可視化・ゲーム試作などの対話型3Dに向く

Webページ内でカメラ操作、アニメーション、3Dモデル表示を組み合わせる用途に適しています。npmとViteなどのビルドツールを使えば、ES Modulesとして本体と必要なアドオンをアプリケーションへ組み込めます。

出典：[2][1]

導入前の確認

ローカルサーバーと対象ブラウザーで互換性を確認する

モジュールや素材を正しく読み込むため、HTMLファイルを直接開くのではなくローカルサーバーを使います。本体とアドオンは同じthree.js版、同じ配布元にそろえてください。WebGL・WebGPUや端末性能の差は対象ブラウザーで検証し、版を上げる際はMigration Guideを確認します。ガイドで固定するVite 8.3.2にはNode.js ^20.19.0または22.12.0以上が必要です。

出典：[2][1][4]

参考にした公式資料

[1]three.js r186 README(2026-10-04)
[2]three.js r186 Installation manual(2026-10-04)
[3]three.js r186 package metadata(2026-10-04)
[4]Vite 8.3.2 package metadata(2026-10-04)
[5]three.js r186 release(2026-10-04)
[6]three.js r186 license(2026-10-04)

編集部からの補足

描画の土台を一から組む負担を減らしながら、シーン構成や描画ループをJavaScriptで直接制御できる点を選定しました。採用前に対象端末のGPU・ブラウザー対応と、更新時の移行手順を実機で確認してください。

3ステップで試す

1
npmプロジェクトを作る
Node.js ^20.19.0または22.12.0以上とnpmを用意し、空の作業ディレクトリを初期化します。
mkdir three-demo && cd three-demo && npm init -y
2
three.jsとViteを導入する
three 0.186.1とVite 8.3.2を固定して導入します。
npm install --save three@0.186.1 && npm install --save-dev vite@8.3.2
3
回転する立方体を表示する
表示されたローカルURLをブラウザーで開いて立方体を確認し、終了時はCtrl+Cを押します。
printf '%s\n' '<!doctype html><html lang="en"><head><meta charset="utf-8"><title>three.js demo</title><style>body{margin:0}</style></head><body><script type="module" src="/main.js"></script></body></html>' > index.html && printf '%s\n' 'import * as THREE from "three";' 'const scene=new THREE.Scene();' 'const camera=new THREE.PerspectiveCamera(70,innerWidth/innerHeight,0.01,10); camera.position.z=1;' 'const mesh=new THREE.Mesh(new THREE.BoxGeometry(0.2,0.2,0.2),new THREE.MeshNormalMaterial()); scene.add(mesh);' 'const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setSize(innerWidth,innerHeight); document.body.appendChild(renderer.domElement);' 'renderer.setAnimationLoop((time)=>{mesh.rotation.x=time/2000; mesh.rotation.y=time/1000; renderer.render(scene,camera);});' > main.js && npx vite --host 127.0.0.1

公式READMEで確認

成長

成長の推移 · 直近30日

116,205 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 209
Open PR: 128

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

javascript
3d
virtual-reality
augmented-reality
webgl
webgl2
webgpu
webxr
webaudio
canvas
svg
html5

Stars: 116,205
Forks: 36,608
Watchers: 2,522
Open Issues: 253
Contributors: 363
所有者種別: User
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/04