[Three.js] ジオメトリ、マテリアル、メッシュ

この記事は Jetbrains's Coding Agent Junie によって翻訳されました。誤訳があれば教えてください！

Three.jsで3Dオブジェクトを構成する3つの核心要素であるジオメトリ、マテリアル、そしてメッシュについて学びましょう。

ジオメトリとは？

ジオメトリは3Dオブジェクトの形状を定義する頂点（vertices）、面（faces）、線（line）の集合です。簡単に言えば、3D物体の「骨格」と考えることができます。以下のサンプルコードを見てみましょう。

typescript

// カスタム三角形の作成
const geometry = new THREE.BufferGeometry();

// 三角形の頂点座標
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,  // v0
     1.0, -1.0, 0.0,  // v1
     0.0,  1.0, 0.0   // v2
]);

// バッファ属性としてジオメトリに割り当て
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

このようにマトリックス形式のデータを渡して画面に描画することができます。これに関連するより多くのオプションは公式ドキュメントリンクで見つけることができます。

基本ジオメトリの種類

Three.jsでは様々な基本図形を作成できるジオメトリクラスを提供しています。

typescript

// ボックス
const boxGeometry = new THREE.BoxGeometry(width, height, depth);

// 球
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);

// 平面
const planeGeometry = new THREE.PlaneGeometry(width, height);

// 円柱
const cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height);

// 円錐
const coneGeometry = new THREE.ConeGeometry(radius, height);

// ドーナツ形
const torusGeometry = new THREE.TorusGeometry(radius, tube, radialSegments);

マテリアルとは？

マテリアルは3Dオブジェクトの外観を定義します。色、透明度、テクスチャなど、オブジェクトがどのように見えるかを決定するすべての視覚的属性を含みます。以下のような主要な属性を使用します。

typescript

const material = new THREE.MeshStandardMaterial({
    // 基本属性
    transparent: true,     // 透明度の使用有無
    opacity: 0.5,         // 不透明度（0.0〜1.0）
    side: THREE.DoubleSide, // 両面レンダリング
    visible: true,        // 可視性
    wireframe: false,     // ワイヤーフレームモード

    // 色関連
    color: 0xff0000,      // 基本色
    emissive: 0x000000,   // 自己発光色

    // その他...
});

主要マテリアルの種類と特徴

1. MeshBasicMaterial

最も単純なマテリアルで、光の影響を受けません。パフォーマンスが良く、単純な用途に適しています。光の計算がないため、最も速くレンダリングできます。

2. MeshStandardMaterial

物理ベースレンダリング（PBR、Physically based rendering）を使用するマテリアルです。PBRは実際の物理法則に基づいて光の相互作用をシミュレーションし、非常にリアルな結果を生み出します。そのため、他のマテリアルよりもレンダリングの計算コストがより多くかかります。

3. MeshPhongMaterial

MeshPhongMaterialは光沢のある表面を表現するのに適したマテリアルです。Phongシェーディングモデルを使用してハイライトと反射光を計算し、プラスチックや陶器のようなマテリアルを表現する際によく使用されます。

typescript

new THREE.MeshBasicMaterial({
  color: color,
  side: THREE.DoubleSide,
});
new THREE.MeshStandardMaterial({
  color: color,
  roughness: 0.5,
  metalness: 0.5,
  side: THREE.DoubleSide,
}),
new THREE.MeshPhongMaterial({
  color: color,
  shininess: 60,
  specular: 0x444444,
  side: THREE.DoubleSide,
}),

MeshBasicMaterial

MeshStandardMaterial

MeshPhongMaterial

マップの基本概念と種類

マテリアルには様々なマップを使用してオブジェクトの外観をよりリアルで豊かに表現することができます。マップはテクスチャを3Dオブジェクトの表面にマッピングする方法を提供し、それぞれのマップは異なる視覚的特性を制御するために使用されます。

1. map

基本的な色のテクスチャを適用するマップです。

typescript

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    map: colorTexture
});

2. normalMap

表面の詳細を表現するマップです。

typescript

const normalTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    normalMap: normalTexture,
    normalScale: new THREE.Vector2(1, 1)  // ノーマルマップの強度調整
});

3. roughnessMap

表面の粗さを制御するマップです。MeshStandardMaterialで使用されます。

typescript

const roughnessTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    roughnessMap: roughnessTexture,
    roughness: 1.0  // 基本的な粗さの値
});

Meshmap

MeshnormalMap

MeshroughnessMap

メッシュ

骨格の役割をするジオメトリと、外観を定義する役割をするマテリアルを組み合わせるオブジェクトがメッシュです。メッシュはThree.jsでObject3Dを継承したクラスで、3D空間にレンダリングできるオブジェクトを生成します。

typescript

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

メッシュの属性とメソッド

位置（Position）

typescript

// 位置の設定
mesh.position.set(x, y, z);
// または
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

回転（Rotation）

typescript

// 位置の設定
mesh.position.set(x, y, z);
// または
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

サイズ（Scale）

typescript

// サイズの設定
mesh.scale.set(x, y, z);
// または
mesh.scale.x = 2;  // X軸方向に2倍
mesh.scale.y = 0.5; // Y軸方向に0.5倍
mesh.scale.z = 1;   // Z軸は変化なし

まとめ

Three.jsの核心構成要素について見てきました。ジオメトリで3Dオブジェクトの形状を定義し、マテリアルでオブジェクトの視覚的特性を表現し、この二つを組み合わせたメッシュを通じて実際に画面にレンダリングされる3Dオブジェクトを作ることができました。

この記事では基本的な例を通じて核心概念を見てきましたが、Three.jsはこれよりもはるかに多様で強力な機能を提供しているので、後でより詳しく調べると良いでしょう。

また、3Dグラフィックスの特性上、オブジェクトが複雑になるほどより多くのコンピューティングリソースが必要です。したがって、実際のプロジェクトでは以下のような項目に注意しながら作業する必要があります！（そうしないとモバイルでクラッシュすることが多い...）

適切なポリゴン数の維持
不要なオブジェクトのメモリ解放

参照

Three.js Docs