WebGL入門ガイド｜Three.jsで始める3Dウェブ表現【2026年版】

この記事の対象: Web上の3D表現に挑戦したいフロントエンドエンジニア
読了時間: 約8分

ブラウザ上で3Dオブジェクトが回転し、パーティクルが舞い、ユーザーの操作に反応する——Three.jsは、WebGL（Web Graphics Library）を使った3Dグラフィックスを簡単に実装できるJavaScriptライブラリです。

この記事では、Three.jsの導入から基本の3Dシーン作成まで、コード付きで解説します。

WebGLとは

WebGLは、ブラウザ上でGPUを使った2D/3Dグラフィックス描画を行うためのAPIです。プラグイン不要で、Canvas要素に直接描画します。

しかしWebGLを直接使うのは非常に難易度が高いため、ラッパーライブラリであるThree.jsを使うのが一般的です。

Three.jsの導入方法

npm install three

または CDN で直接読み込み:

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.170/build/three.module.js"
  }
}
</script>

基本の3Dシーン作成

Three.jsの3D表示は4つの要素で構成されます。

Scene / Camera / Renderer

import * as THREE from 'three';

// シーン: 3Dオブジェクトを配置する空間
const scene = new THREE.Scene();

// カメラ: 視点（透視投影カメラ）
const camera = new THREE.PerspectiveCamera(
  75,                                    // 視野角
  window.innerWidth / window.innerHeight, // アスペクト比
  0.1,                                   // near
  1000                                   // far
);
camera.position.z = 5;

// レンダラー: シーンを画面に描画
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

Geometry + Material = Mesh

3Dオブジェクトは「形状（Geometry）」と「材質（Material）」の組み合わせで作ります。

// 形状: 立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 材質: 標準マテリアル（光に反応する）
const material = new THREE.MeshStandardMaterial({
  color: 0x3b82f6,
  metalness: 0.3,
  roughness: 0.7,
});

// メッシュ: 形状 + 材質
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Light（ライティング）

MeshStandardMaterialは光源がないと真っ黒に表示されるため、ライトを追加します。

// 環境光（全体を均一に照らす）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// ディレクショナルライト（太陽光のような平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

アニメーションループ

requestAnimationFrameでフレームごとに描画を更新します。

function animate() {
  requestAnimationFrame(animate);

  // 毎フレーム少しずつ回転
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

リサイズ対応

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

よくある表現パターン

3Dオブジェクトの回転

上記のコードがそのまま基本パターンです。プロダクトサイトの製品表示や、ブランドサイトのロゴ演出に使われます。

パーティクル

多数の小さな点をランダムに配置し、ゆっくり動かす表現。背景演出に最適です。

const particlesGeometry = new THREE.BufferGeometry();
const count = 5000;
const positions = new Float32Array(count * 3);

for (let i = 0; i < count * 3; i++) {
  positions[i] = (Math.random() - 0.5) * 10;
}

particlesGeometry.setAttribute('position',
  new THREE.BufferAttribute(positions, 3)
);

const particlesMaterial = new THREE.PointsMaterial({
  size: 0.02,
  color: 0x3b82f6,
});

const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);

背景3D

ページの背景全体に3Dシーンを配置するパターン。Canvasをposition: fixedで背面に固定し、HTMLコンテンツを前面に重ねます。

Splineとの使い分け

	Three.js	Spline
自由度	最大	中程度
学習コスト	高い	低い
コーディング	必須	不要
パフォーマンス	最適化しやすい	制約あり

簡単な3Dオブジェクトの表示にはSpline、高度な表現にはThree.jsが基本的な使い分けです。Splineの詳細は「Spline 3Dの使い方ガイド」をご覧ください。

パフォーマンス注意点（モバイル対応）

モバイルではポリゴン数を削減する（LOD機能の活用）
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))でピクセル比を制限
テクスチャのサイズは1024×1024px以下に抑える
不要な場合はアニメーションループを停止する（Intersection Observer活用）

まとめ

Three.js入門のポイントをまとめます。

Three.jsはScene、Camera、Renderer、Mesh、Lightの5要素で構成
requestAnimationFrameでアニメーションループを実装
パーティクルと背景3Dが実務で多い表現パターン
シンプルな3DはSpline、高度な表現はThree.js
モバイルのパフォーマンスに常に注意