THREE.jsでの環境マッピング - のぐそんブログ

環境マッピングとは

環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。サングラスに周りの風景が映り込むイメージです。

環境マッピングの準備

よりリアルに環境マッピングを表現するためには、映り込ませる環境（風景）を準備する必要があります。

今回はキューブ環境マッピングを行うので、四角形用のテクスチャを用意します。四角形なので、画像は上下左右前後の計6枚用意する必要があります。

テクスチャを内側に貼り付けた四角形の中にカメラを配置するイメージです。

テクスチャをロードして貼り付ける

キューブマップの作り方はこんな感じになります。

Three.jsにはキューブマップを作成する為の、特別なシェーダーであるTHREE.ShaderLib('cube')があります。

const PATH = 'images/';
const FORMAT = '.jpg';
let urls = [
  PATH + 'posx' + FORMAT,
  PATH + 'negx' + FORMAT,
  PATH + 'posy' + FORMAT,
  PATH + 'negy' + FORMAT,
  PATH + 'posz' + FORMAT,
  PATH + 'negz' + FORMAT,
];


//キューブマップ用のローダー
let cubeTextureLoader = new THREE.CubeTextureLoader();

//ローダーに画像を渡す
cubeTextureLoader.load(urls, function (cubeTexture) {
    
  //シェーダーを作成
  let shader = THREE.ShaderLib['cube'];
  
  
  shader.uniforms['tCube'].value = cubeTexture;

  let material = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    //裏面を描画
    side: THREE.BackSide
  });

  let skybox = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);
  scene.add(skybox);
});

こんな感じになります。

オブジェクトの追加

追加したマテリアルのenvMapに読み込んだテクスチャを設定します。

var geometry = new THREE.SphereGeometry(10, 60, 60);
var torusMaterial = new THREE.MeshPhongMaterial({
  color: 0xCCCCCC,
  envMap: cubeTexture,
  //映り込み量を設定
  reflectivity: 0.9
});
mesh = new THREE.Mesh(geometry, torusMaterial);
scene.add(mesh);

こんな感じでオブジェクトにテクスチャが映り込みます。

屈折マッピング

ガラス玉のように、テクスチャを屈折させて表現するためにはTHREE.CubeRefractionMapping を使用します。

cubeTexture.mapping = THREE.CubeRefractionMapping;

var geometry = new THREE.SphereGeometry(10, 60, 60);
var torusMaterial = new THREE.MeshPhongMaterial({
  color: 0xFFFFFF,
  envMap: cubeTexture,
  refractionRatio: 0.9,
  reflectivity: 0.9
});
mesh = new THREE.Mesh(geometry, torusMaterial);
scene.add(mesh);

こんな感じになります。