Three.jsでスフィアマッピングを使って光表現をベイクする（THREE.MeshMatcapMaterial） 🔦

MeshMatcapMaterial をつかって、光表現のベイクを検証しました。

ソースコード（抜粋）

const matcap = new THREE.TextureLoader().load('/img/matcap/matcap-porcelain-white.jpg'); // ベイク用の画像を設定

matcap.encoding = THREE.sRGBEncoding;

const mesh = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshMatcapMaterial({
    matcap,
    map: new THREE.TextureLoader().load('/img/matcap/texture.png') // テクスチャー用の画像を設定
  })
);

scene.add(mesh);