Zenn
💻

WebGLマスタリングガイド: Three.jsによる実践的3D開発

2025/02/25に公開
WebGL
Three.js
3ddevelopment
3dgraphics
interactivevisuali
tech

WebGLマスタリングガイド: Three.jsによる実践的3D開発

はじめに

現代のWeb開発では、3Dグラフィックスは不可欠です。WebGLは、Web上でインタラクティブな3Dコンテンツを作成するための標準化されたAPIを提供します。Three.jsは、WebGLを使用するための洗練されたライブラリであり、開発者に豊富な機能とツールキットを提供します。

このガイドでは、エキスパートレベルのWebGL開発をマスターするための包括的なガイドを提供します。Three.jsを使用して、現実的な3Dシーンを作成、操作、アニメーション化するための実践的な例を段階的に示します。

Three.jsの概要

Three.jsは、JavaScriptベースのライブラリであり、WebGLを使用して3Dシーンを作成し、操作するための使いやすいAPIを提供します。階層構造、カメラコントロール、マテリアル、照明、アニメーションなどの重要な概念をカプセル化します。

Three.jsは、以下の機能を備えています：

  • 3Dオブジェクトのレンダリング
  • シーンのナビゲーション
  • インタラクティブコントロール
  • 物理ベースレンダリング
  • アニメーション

セットアップと基本

Three.jsのインストール

Three.jsをプロジェクトにインストールするには、次の手順に従います：

  1. CDNから直接リンクする:
<script src="https://unpkg.com/three@0.146.0/build/three.min.js"></script>
  1. npmを使用する:
npm install three

基本的なシーンを作成する

基本的なThree.jsシーンを作成するには、次のコードを使用します：

import * as THREE from 'three';

// シーンを作成する
const scene = new THREE.Scene();

// カメラを作成する
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

// レンダラーを作成する
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// キューブを作成する
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// シーンに追加する
scene.add(cube);

// アニメーションループを作成する
function animate() {
  requestAnimationFrame(animate);

  // キューブを回転させる
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // レンダリングする
  renderer.render(scene, camera);
}

// アニメーションを開始する
animate();

オブジェクトの作成と操作

3Dオブジェクトのロード

Three.jsを使用して、さまざまな3Dオブジェクト形式を読み込むことができます。OBJ、GLTF、FBXなどの一般的な形式がサポートされています。

// GLTFローダーを使用してモデルを読み込む
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  // シーンに追加する
  scene.add(gltf.scene);
});

オブジェクトの操作

Three.jsでは、行列変換を使用してオブジェクトを操作できます。次のメソッドを使用できます：

  • translate()
  • rotate()
  • scale()

また、オブジェクトの可視性やアクティブ化/非アクティブ化も制御できます。

マテリアルとテクスチャ

マテリアルを作成する

Three.jsには、さまざまな種類のマテリアルが用意されています。最も一般的なものには、次のものがあります：

  • MeshBasicMaterial
  • MeshLambertMaterial
  • MeshPhongMaterial

マテリアルは、色、反射率、透過性などのプロパティを設定できます。

テクスチャを適用する

テクスチャは、マテリアルにリアリズムと詳細を追加できます。Three.jsでは、TextureLoaderを使用してテクスチャをロードできます。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.png');
const material = new THREE.MeshBasicMaterial({ map: texture });

ライティング

ライティングの追加

ライティングは、3Dシーンに奥行きとリアリズムを追加するために不可欠です。Three.jsでは、次のタイプのライトを使用できます：

  • AmbientLight
  • DirectionalLight
  • PointLight

ライトは、位置、色、強度を設定できます。

ライティングテクニック

適切なライティングは、シーンの全体的な外観に大きな影響を与えます。次のテクニックの使用を検討してください：

  • 環境光: シーン全体を均一に照らすために使用します。
  • ディレクショナルライト: 太陽光など、特定の方向から照らすために使用します。
  • ポイントライト: 局所的な領域を照らすために使用します。

アニメーション

基本的なアニメーション

Three.jsでは、Tween.jsなどのライブラリを使用して、オブジェクトをアニメーション化できます。次のコードは、キューブを回転させる単純なアニメーションを作成します：

import * as TWEEN from '@tweenjs/tween.js';

const tween = new TWEEN.Tween(cube.rotation)
  .to({ x: Math.PI * 2, y: Math.PI * 2, z: Math.PI * 2 }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

高度なアニメーション

Three.jsは、複雑なアニメーションを作成するためのツールも提供しています。次のような属性を使用して、アニメーションを制御できます：

  • position
  • rotation
  • scale
  • opacity

また、カスタムアニメーションを作成するためのイベントリスナーを使用することもできます。

インタラクティビティ

イベントハンドラーの使用

Three.jsでは、さまざまなイベントハンドラーを使用してオブジェクトとインタラクティブできます。次の最も一般的なものがあります：

  • onClick
  • onMouseMove
  • onKeyDown

これらのハンドラーを使用して、オブジェクトを選択したり、シーンをナビゲートしたり、アクションを実行したりできます。

レイトレーシング

レイトレーシングは、現実的な画像を生成するための高度な技術です。Three.jsでは、Raycasterを使用してレイトレーシングを実現できます。次のコードは、キューブがクリックされたかどうかをチェックします：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('click', (event) => {
  // マウス座標を取得する
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // レイを作成する
  raycaster.setFromCamera(mouse, camera);

  // インターセクションをチェックする
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // キューブがクリックされた
  }
});

最適化

パフォーマンスの監視

Three.jsシーンのパフォーマンスを監視するには、次のツールを使用できます：

  • Chromeブラウザの開発者ツール
  • Three.js Stats.js

これらのツールを使用すると、フレームレート、メモリ使用量、描画呼び出しなどのメトリクスを追跡できます。

最適化テクニック

シーンのパフォーマンスを向上させるために、次の最適化テクニックを検討してください：

  • ジオメトリの削減: 不必要なジオメトリを削除します。
  • マテリアルの最適化: 複雑なマテリアルを単純化します。
  • テクスチャサイズの削減: 大きなテクスチャはレンダリングに時間がかかります。
  • オクルージョンカリング: 視野の外にあるオブジェクトを描画しません。
  • インスタンス化: 同じジオメトリを再利用します。

結論

このガイドでは、Three.jsを使用したWebGL開発の包括的な概要を提供しました。Three.jsの主な概念とツールを学び、実践的な例を使用してそれらの使い方を示しました。3Dオブジェクトの作成、操作、アニメーション化の方法を理解し、シーンにインタラクティビティを追加する方法を学びました。これらの概念を応用することで、現実的で没入感のある3Dエクスペリエンスを作成できます。

次のステップ

WebGLとThree.jsの習熟をさらに深めるために、次のリソースを参照してください：

Three.jsを使用すると、Webで印象的な3Dグラフィックスを作成できます。このガイドで得た知識を活用して、独自の革新的なアプリケーションやエクスペリエンスを作成してください。

GitHubで編集を提案

Discussion