【Three.js】Material(マテリアル)の種類と変更方法-3Dモデルのデモ付きで紹介

2023年11月14日2023年11月16日WebGL & Three.js

Three.jsのMaterial(マテリアル)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three.jsの基本的な操作の一連の流れがとても短くまとめた記事なので参考にしてみてください。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。

Three.jsのMaterial(マテリアル)のデモ

3Dモデルを表示

Three.jsのMaterial(マテリアル)の基本的な種類

Basic: THREE.MeshBasicMaterial

基本的なカラーマテリアルで、光源の影響を受けません。テクスチャや色を指定できます。

Lambert: THREE.MeshLambertMaterial

光沢のないマテリアルで、拡散反射をシミュレートします。光源の影響を受け、よりリアルなレンダリングが可能です。

Phong: THREE.MeshPhongMaterial

光沢のあるマテリアルで、拡散反射と鏡面反射をシミュレートします。より光沢のある表面に適しています。

Standard: THREE.MeshStandardMaterial

物理ベースのレンダリングマテリアルで、リアルな照明と陰影を実現します。

Toon: THREE.MeshToonMaterial

カートゥーンスタイルのレンダリングに適したマテリアル。セルシェーディングのような効果を作成できます。

Depth: THREE.MeshDepthMaterial

オブジェクトの深度に基づいて色を変えるマテリアル。深度マップやシャドウマップの作成に使用されます。

Normal: THREE.MeshNormalMaterial

オブジェクトの法線に基づいて色を変えるマテリアル。表面の方向を視覚化するのに使われます。

Matcap: THREE.MeshMatcapMaterial

マットキャップ（反射マップ）を使ったマテリアル。テクスチャに基づいたシンプルな陰影表現が可能です。

LineBasic: THREE.LineBasicMaterial

基本的なラインマテリアルで、色や透明度を設定できます。

LineDashed: THREE.LineDashedMaterial

ダッシュスタイルのラインマテリアル。破線のスタイルを作成できます。

Points: THREE.PointsMaterial

点のマテリアル。点のサイズや色を設定できます。

MeshDepth: オブジェクトの深度に基づいたマテリアル。主に深度テクスチャの作成に使用されます。

MeshDistance: カメラからの距離に基づいたマテリアル。距離に応じてレンダリングを変化させるのに使用されます。

MeshLambert: THREE.MeshLambertMaterial

光沢のないランバート反射モデルを使用するメッシュマテリアル。

MeshPhong: THREE.MeshPhongMaterial

フォン反射モデルを使用するメッシュマテリアル。光沢のある表面に適しています。

MeshPhysical: THREE.MeshPhysicalMaterial

物理ベースのレンダリングに適したメッシュマテリアル。より詳細な光の反射特性を持ちます。

MeshStandard: THREE.MeshStandardMaterial

標準的なレンダリングモデルを使用するメッシュマテリアル。

MeshToon: THREE.MeshToonMaterial

カートゥーンスタイルのメッシュマテリアル。

ShadowMaterial: THREE.ShadowMaterial

シャドウを受け取るが他は透明なマテリアル。影を投げるオブジェクト用です。

SpriteMaterial: THREE.SpriteMaterial

スプライト（2Dオブジェクト）用のマテリアル。テクスチャや色を設定できます。

Three.jsのMaterial(マテリアル)の基本的な操作

 const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.TorusGeometry(5, 1, 20, 20);
  // マテリアルの生成


  // 0xはjavascriptの16進数を表す数値です。
  // その後がカラーコードです。
  // visible: false,で物体が見えない
  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    visible: true,
    transparent: true,
    opacity: 0.5,
    wireframe: true,
  });
  // 以下のように変更することも可能
  setTimeout(() => {
    material.wireframe = false;
  }, 5000);

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

    // 光源をシーンに追加
    const light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(10, 10, 10);
    scene.add(light);

    // 環境光を追加することもできます
    const ambientLight = new THREE.AmbientLight(0x404040); // ソフトなライト
    scene.add(ambientLight);

  camera.position.z = 50;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x = cube.rotation.x + 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  }

  animate();

上のコードでデモのように動きます。

Material部分についての解説を深掘りします。

  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    visible: true,
    transparent: true,
    opacity: 0.5,
    wireframe: true,
  });

上のようにして、インスタンス化するときに、色や透明度、ワイヤーフレームの線を出すかなどを選択することができます。

  setTimeout(() => {
    material.wireframe = false;
  }, 5000);

また上のように、後でその設定を付け加えたり、変更することもできます。

Materialコンストラクタに設定できるプロパティ

これはMaterialによって異なりますが、たとえばMeshBasicMaterialの場合は以下のようなプロパティがあります。

• color –
  マテリアルの色（THREE.Color、16進数、CSSスタイルの色文字列を使用できます）。
• wireframe – ワイヤーフレームモードでレンダリングするかどうか（true /
  false）。
• wireframeLinewidth – ワイヤーフレームの線の太さ。
• wireframeLinecap – ワイヤーフレームの線の端のスタイル（’butt’, 'round’,
  'square’）。
• wireframeLinejoin – ワイヤーフレームの線の接合部のスタイル（’round’,
  'bevel’, 'miter’）。
• transparent – マテリアルが透明かどうか（true / false）。
• opacity – マテリアルの不透明度（0.0から1.0の間の値）。
• depthTest – デプステスト（奥行きテスト）を行うかどうか（true / false）。
• depthWrite – デプスバッファへの書き込みを行うかどうか（true / false）。
• alphaTest –
  アルファテストでカットオフされるアルファ値（0.0から1.0の間の値）。
• side – レンダリングされる面（THREE.FrontSide, THREE.BackSide,
  THREE.DoubleSide）。
• fog – シーンのフォグ効果をこのマテリアルに適用するかどうか（true / false）。
• visible – マテリアルが可視かどうか（true / false）。
• vertexColors – 頂点の色を使用するかどうか（THREE.NoColors,
  THREE.VertexColors, THREE.FaceColors）。

他にもあり、デフォルト値などはThree.js公式サイトでの確認が一番有効です。