はじめに

現在、Three.jsの勉強中です。その際に、詳細を調べていると、色々な描画スタイルが見つかります。この記事では、各スタイルを実際に比較して違いを理解していきたいと思います。

マテリアルの比較

今回の記事ではマテリアルの比較をしていきます。この記事にて、単純な立方体のアニメーションを描画しました。この立方体のマテリアル(材質)を比較していきます。

ソースコードのひな形

次のソースコードを使用します。

index.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>Three.jsの図解1</title>
    <style>
      body {
        margin: 0;
      }
    </style>

    <!-- CDNからThree.jsのインポート -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@v0.159.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@v0.159.0/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <!-- three.jsを使ったシーンのインポート -->
    <script type="module" src="./main.js"></script>
  </body>

</html>

main.js

描画オブジェクトの実装 に注目してください。実際のコードでは、new THREE.マテリアル({ color: 0x00ff00 }); の マテリアル という箇所を変更します。ライトの実装 については後日に改めてしっかりとまとめたいと思います。

main.js (ひな形)

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();               // インスタンスの生成
renderer.setSize(window.innerWidth, window.innerHeight);  // サイズの設定
document.body.appendChild(renderer.domElement);           // HTMLへの追加

/* ライトの実装 */
const color = 0xFFFFFF;                                     // 光の色
const intensity = 3;                                        // 光の強度
const light = new THREE.DirectionalLight(color, intensity); // ライトの生成
light.position.set(0, 0, 5);                                // ライトの配置
scene.add(light);                                           // シーンへの追加

/* 描画オブジェクトの実装 */
const geometry = new THREE.BoxGeometry(1, 1, 1);                    // ジオメトリの生成
const material = new THREE.マテリアル({ color: 0x00ff00 });         // マテリアルの生成
const cube = new THREE.Mesh(geometry, material);                    // メッシュの生成
scene.add(cube);                                                    // シーンへの追加

/* カメラの移動 */
camera.position.z = 5;

/* アニメーション関数の定義 */
function animate() {
  requestAnimationFrame(animate); // 定期的な関数呼び出し

  /* 回転するアニメーション処理 */
  cube.rotation.x += 0.01;  // x軸方向
  cube.rotation.y += 0.01;  // y軸方向

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

animate(); // アニメーション関数の実行

`MeshBasicMaterial`

単純なシェーディングの方法でジオメトリを描画するためのマテリアルです。光の影響を受けないことが特徴です。

`MeshToonMaterial`

トゥーンシェーディングを実現するマテリアルです。光に反射している箇所と影がついている箇所に二分された表現が特徴です。

`MeshLambertMaterial`

表面が鏡面ハイライトや光沢ではないもの専用のマテリアルです。従って、木材にニスを塗ったような光沢は表現できません。MeshPhongmaterialやMeshStandardmaterial、MeshPhysicalmaterialと比べると精度が低いですが、それらより処理が軽いことが特徴です。

`MeshPhongMaterial`

鏡面ハイライトや光沢を表現できるマテリアルです。MeshStandardmaterial、MeshPhysicalmaterialと比べると精度が低いですが、それらより処理が軽いことが特徴です。

`MeshPhysicalMaterial`

MeshStandardmaterial の拡張機能であり、より高度な物理ベースのレンダリングプロパティを提供します。グラフィックの表現が富んでいるため、処理が重くなりやすいことが特徴です。

`MeshStandardMaterial`

粗めの金属を表現できることがマテリアルです。MeshLambertmaterial や MeshPhongmaterial よりも正確で現実的な外観の結果が得られることが特徴です。

参考

シーンの作成

MeshBasicMaterial

MeshToonMaterial

MeshLambertMaterial

MeshPhongMaterial

MeshPhysicalMaterial

MeshStandardMaterial

Three.js図解1: マテリアルの比較

はじめに

マテリアルの比較

ソースコードのひな形

index.html

main.js

MeshBasicMaterial

MeshToonMaterial

MeshLambertMaterial

MeshPhongMaterial

MeshPhysicalMaterial

MeshStandardMaterial

参考