この記事は DeepL によって翻訳されました。誤訳があれば教えてください！

Three.jsで3D Objectを構成する3つのコア要素であるGeometryとMaterials、そしてMeshについて説明します。

Geometryとは？

Geometryは3Dオブジェクトの形を定義する頂点(vertices)と面(faces)、線(line)の集合です。簡単に言えば、3Dオブジェクトの「骨格」と考えてください。下記のコード例を見てみましょう。

// ユーザー定義の三角形を作る
const geometry = new THREE.BufferGeometry()；

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

// バッファ属性でジオメトリに割り当てます。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))；

基本的なGeometryの種類

Three.jsでは色んな基本的な図形を作ることができるGeometryクラスを提供します。

// ボックス
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)；

Materialとは？

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

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, // 自発光する色

    // などなど...
})；

主なMaterialの種類と特徴

1. MeshBasicMaterial

最もシンプルなマテリアルで、照明の影響を受けません。性能が良く、シンプルな用途に適しています。照明計算がないため、最も速くレンダリングすることができます。

2. MeshStandardMaterial

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

3. MeshPhongMaterial

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

new THREE.MeshBasicMaterial({色:色、反射率:色、反射率)を指定します。
  color: color、
  side: THREE.DoubleSide、
})；
new THREE.MeshStandardMaterial({ color.
  color: color、
  粗さ: 0.5、
  metallness: 0.5、
  side: THREE.DoubleSide、
}) を作成します、
new THREE.MeshPhongMaterial({
  color: color、
  shininess: 60、
  specular: 0x444444、
  side: THREE.DoubleSide、
})、

MeshBasicMaterial

MeshStandardMaterial

MeshPhongMaterial

Mapの基本概念と種類

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

1. マップ

基本的なカラーテクスチャを適用するマップです。

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

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

2. normalMap

表面のディテールを表現するマップです。

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

const material = new THREE.MeshStandardMaterial({ { normalMap: normalTexture, normalTexture.avif); const
    normalMap: normalTexture、
    normalScale: new THREE.Vector2(1, 1) // ノーマルマップの強度を調整します。
})；

3. roughnessMap

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

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

const material = new THREE.MeshStandardMaterial({ {
    roughnessMap: roughnessTexture、
    roughness: 1.0 // デフォルトの粗さ値
})；

Meshmap

MeshnormalMap

MeshroughnessMap

Mesh

次に、骨格となるGeometryと、外観を定義するMaterialを結合するオブジェクトがMeshです。MeshはThree.jsのObject3Dを継承したクラスで、3D空間にレンダリングできるオブジェクトを生成します。

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

Meshのプロパティとメソッド

位置(Position)

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

回転(Rotation)

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

サイズ(Scale)

// サイズ設定
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のコアコンポーネントについて見てみました。Geometryで3Dオブジェクトの形を定義し、Materialでオブジェクトの視覚的な特性を表現し、この二つを結合したMeshで実際の画面にレンダリングされる3Dオブジェクトを作ることができました。

今回の記事では基本的な例題を通して核心的な概念を見ましたが、Three.jsはこれよりもっと多様で強力な機能を提供しているので、後でもっと詳しく見てみるといいと思います。

また、3Dグラフィックスの特性上、オブジェクトが複雑になればなるほど、より多くのコンピューティングリソースが必要になります。したがって、実際のプロジェクトでは下記のような項目に気をつけて作業する必要があります！(そうしないと、モバイルでは爆発する場合が多いです...)

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

参考 🔎 参照

Three.js Docs

[Three.js] Gemometry, マテリアル, Mesh