Three.js環境貼圖(.envMap)

Three.js環境貼圖(.envMap)

本文是Three.js電子書的8.9節

Three.js環境貼圖.envMap字面意思就是三維模型周邊環境，比如你渲染一個立方體，立方體放在一個屋子裏面，屋子裏面的周邊環境肯定影響立方體的渲染效果，目的是爲了渲染該立方體而不是立方體周圍環境，爲了更方便所以沒必要創建立方體周邊環境所有物體的網格模型，可以通過圖片來表達立方體周邊的環境。

創建一個立方體盒子作爲天空盒使用，然後把一個環境中上下左右前後六張視圖圖片作爲立方體盒子的紋理貼圖使用。

加環境貼圖的6張紋理貼圖，可以通過CubeTextureLoader類趨勢線。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方體

var loader = new THREE.CubeTextureLoader();
// 所有貼圖在同一目錄下，可以使用該方法設置共用路徑
loader.setPath('環境貼圖/');
// 立方體紋理加載器返回立方體紋理對象CubeTexture
var CubeTexture = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
//材質對象Material
var material = new THREE.MeshPhongMaterial({
  //網格模型設置顏色，網格模型顏色和環境貼圖會進行融合計算
  // color:0xff0000,
  envMap: CubeTexture, //設置環境貼圖
  // 環境貼圖反射率   控制環境貼圖對被渲染三維模型影響程度
  // reflectivity: 0.1,
});
console.log(CubeTexture.image);
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中

高光網格材質MeshPhongMaterial和物理PBR材質MeshStandardMaterial通常會使用環境貼圖.envMap來實現更好的渲染效果。一個材質對應的是普通次時代模型，一個材質對應的是PBR模型。

一個用到環境貼圖的案例(14.6節)。

loader.load('./heart/model.obj', function(obj) {
  // 控制檯查看返回結構：包含一個網格模型Mesh的組Group
  console.log(obj);
  scene.add(obj);
  mesh = obj.children[0]; //獲得心臟網格模型
  mesh.scale.set(10, 10, 10); //網格模型縮放
  // 創建一個紋理加載器
  var textureLoader = new THREE.TextureLoader();

  // // 加載顏色紋理
  var texture = textureLoader.load('./heart/color.png');
  mesh.material.map = texture;

  // // 加載法線貼圖，表面細節更豐富
  var textureNormal = textureLoader.load('./heart/normal.png');
  mesh.material.normalMap = textureNormal
  // 設置深淺程度
  mesh.material.normalScale.set(1.5, 1.5)

  // 設置高光貼圖，一個網格模型不同的區域反射光線的能力不同
  var textureSpecular = textureLoader.load('./heart/Specular.png');
  mesh.material.specularMap = textureSpecular;
  mesh.material.specular.set(0xffffff);// 高光反射顏色
  mesh.material.shininess = 100;// 高光高亮程度，默認30

  // 設置環境貼圖，反射周圍環境，渲染更逼真
  var textureCube = new THREE.CubeTextureLoader()
    .setPath('環境貼圖/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
  mesh.material.envMap = textureCube;
})