three-js

Three.js 完全リファレンス（Vanilla）

React Three Fiber のユーザーの方へ：このリファレンスは Vanilla Three.js 向けです。R3F／Drei のパターンについては、 r3f-best-practices スキルを使用してください。ただし、R3F は Three.js 用の React レンダラーであるため、 ここで Three.js の概念を理解しておくと、R3F を使用する際にも役立ちます。

クイックスタート

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

リファレンス一覧

タスクに応じて、適切なリファレンスファイルを読み込んでください。

コアとなる基礎

リファレンス	使用する場面
references/01-fundamentals.md	シーンのセットアップ、レンダラーの設定、Object3D の階層構造、座標系
references/02-geometry.md	形状の作成、BufferGeometry、インスタンシング、ポイント、ライン
references/06-cameras.md	カメラの種類、視錐台、ビューポート、投影
references/13-math.md	Vector3、Matrix4、Quaternion、Euler、Color、MathUtils

ビジュアルの外観

リファレンス	使用する場面
references/03-materials.md	PBR マテリアル、シェーダーマテリアル、各種マテリアル
references/04-textures.md	テクスチャの読み込み、UV マッピング、レンダーターゲット、環境マップ
references/05-lighting.md	ライトの種類、シャドウ、IBL、ライトプローブ
references/11-shaders.md	カスタム GLSL シェーダー、uniform、varying、シェーダーパターン

モーションとインタラクション

リファレンス	使用する場面
references/08-animation.md	キーフレームアニメーション、スケルタルアニメーション、モーフターゲット、プロシージャルモーション
references/09-interaction.md	レイキャスティング、選択、ドラッグ、座標変換
references/10-controls.md	OrbitControls、FlyControls、PointerLockControls など

アセット

リファレンス	使用する場面
references/07-loaders.md	GLTF、FBX、テクスチャ、HDR、Draco 圧縮、非同期パターン

エフェクト

リファレンス	使用する場面
references/12-postprocessing.md	ブルーム、被写界深度、SSAO、カスタムエフェクト、EffectComposer

上級編

リファレンス	使用する場面
references/14-performance.md	最適化、プロファイリング、LOD、カリング、バッチ処理
references/15-node-materials.md	TSL（Three Shading Language）、ノードベースのマテリアル
references/16-physics-vr.md	物理エンジン、WebXR、VR／AR 連携
references/17-webgpu.md	WebGPU レンダラー、コンピュートシェーダー、WGSL
references/18-patterns.md	アーキテクチャパターン、アセット管理、クリーンアップ、状態

よく使うパターンのクイックリファレンス

リサイズハンドラー

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

クリーンアップ／破棄

function dispose(obj) {
  obj.traverse(child => {
    if (child.geometry) child.geometry.dispose();
    if (child.material) {
      if (Array.isArray(child.material)) {
        child.material.forEach(m => m.dispose());
      } else {
        child.material.dispose();
      }
    }
  });
}

Clock を使ったアニメーションループ

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();

  // Use delta for frame-rate independent animation
  mixer?.update(delta);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

インポートパターン

// Core
import * as THREE from 'three';

// Addons (controls, loaders, effects)
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

// Compression support
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

バージョンに関する注意事項

このリファレンスは Three.js r150 以降を対象としており、以下について説明しています。

• WebGPU のサポート（r150 以降）
• ノードマテリアル／TSL
• 最新の ES モジュールインポート

バージョン固有の API については、Three.js の移行ガイドを確認してください。