前言

在ThreeJS學(xué)習(xí)：場景、模型、相機、渲染中，我們簡單介紹了ThreeJS中的物體包含兩個要素，一個是形狀，一個是材質(zhì)，本章節(jié)進行材質(zhì)的學(xué)習(xí)。

一、材質(zhì)介紹

什么材質(zhì)？簡單來說，材質(zhì)是材料與質(zhì)感的結(jié)合體，指物體表面的質(zhì)地特征，由色彩、紋理、光滑度等可視屬性構(gòu)成。
所以不同的材質(zhì)，物體表面的展示是效果不同。
比如，地板的種類又很多，不同的材質(zhì)，地板的展示效果是不同的。
在ThreeJS中，用Material來定義物體的材質(zhì)。
本章節(jié)中，介紹開發(fā)中常用的物體材質(zhì)子類。

一、網(wǎng)絡(luò)基礎(chǔ)材質(zhì) MeshBasicMaterial

此種材質(zhì)是ThreeJS中的一種基礎(chǔ)材質(zhì)，它不受光照的影響，始終以純色或紋理顯示。

不論光照強度和顏色咋樣變化，物體表面完全按照材質(zhì)本身的配置進行顯示。

  // 創(chuàng)建幾何體，模型的形狀
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 創(chuàng)建網(wǎng)絡(luò)基礎(chǔ)材質(zhì)
  const material = new THREE.MeshBasicMaterial({
    color: 0xff_00_00, // 0xff0000設(shè)置材質(zhì)顏色為紅色
    transparent: false, // 開啟透明
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

效果圖

二、網(wǎng)絡(luò)漫反射材質(zhì) MeshLambertMaterial

什么是漫反射？
漫反射是指光線被粗糙表面無規(guī)則地向各個方向反射的現(xiàn)象。很多物體，如植物、墻壁、衣服等，其表面粗看起來似乎是平滑，但用放大鏡仔細觀察，就會看到其表面是凹凸不平的，所以本來是平行的太陽光被這些表面反射后，就彌漫地射向不同方向。

MeshLambertMaterial就是用來表示生活中這些粗糙的物體的材質(zhì)。其是受光照影響的，光的強度越強，材質(zhì)表面越亮，反之越暗。

  // 創(chuàng)建幾何體，模型的形狀
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 創(chuàng)建漫反射材質(zhì)
  const material = new THREE.MeshLambertMaterial({
    color: 0xFF_00_00, // 0xff0000設(shè)置材質(zhì)顏色為紅色
    transparent: true, // 開啟透明
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

  // 創(chuàng)建燈光
  const pointLight = new THREE.PointLight(0xFF_FF_FF, 100);
  pointLight.position.set(100, 100, 0);
  pointLight.decay = 0.9;
  scene.add(pointLight);

效果圖

三、網(wǎng)絡(luò)高光材質(zhì)

高光材質(zhì)，主要是用來模擬表面光澤的材質(zhì)，例如鏡子、玻璃、金屬等表面光滑的物體材質(zhì)。其受光照的影響，光照越強顯示越亮。

  // 創(chuàng)建幾何體，模型的形狀
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 創(chuàng)建漫反射材質(zhì)
  const material = new THREE.MeshPhongMaterial({
    color: 0xff_00_00, // 0xff0000設(shè)置材質(zhì)顏色為紅色
    shininess: 30, // 控制高光的集中程度，值越高表面越閃亮
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

四、物理材質(zhì) PBR

所謂PBR就是，基于物理的渲染?；谖锢淼墓庹漳Ｐ涂梢蕴峁└普娴摹⒏咏钪械牟馁|(zhì)效果，當(dāng)然也會占用更多的電腦硬件資源。
ThreeJS中，提供了MeshStandardMaterial和MeshPhysicalMaterial兩個api來實現(xiàn)PBR材質(zhì)。

1、MeshStandardMaterial

  // 創(chuàng)建幾何體，模型的形狀
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 創(chuàng)建物理材質(zhì)
  const material = new THREE.MeshStandardMaterial({
    metalness: 1, // 金屬度屬性 表示材質(zhì)像金屬的程度, 非金屬材料,如木材或石材,使用0.0,金屬使用1.0。
    roughness: 0.5, // 表面粗糙度表示模型表面的光滑或者說粗糙程度，越光滑鏡面反射能力越強，越粗糙，表面鏡面反射能力越弱，更多地表現(xiàn)為漫反射。
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

效果圖

2、MeshPhysicalMaterial

MeshPhysicalMaterial是MeshStandardMaterial的子類，在MeshStandardMaterial的基礎(chǔ)上清漆、透光率等屬性，用來實現(xiàn)更接近物體的材質(zhì)效果，當(dāng)然性能要求也越高。

  // 創(chuàng)建幾何體，模型的形狀
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 創(chuàng)建物理材質(zhì)
  const material = new THREE.MeshPhysicalMaterial({
    metalness: 1,
    roughness: 0.5,
    clearcoat: 1, // 清漆層: 用來模擬物體表面一層透明圖層，就好比你在物體表面刷了一層透明清漆，噴了點水
    clearcoatRoughness: 0.1, // 清漆層粗糙度: 表示物體表面清漆層的粗糙程度
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

效果圖

五、點材質(zhì) PointsMaterial

通常用于設(shè)置點對象的時候，才使用的材質(zhì)。其他屬性設(shè)置與MeshBasicMaterial基本一致。

// 創(chuàng)建一個空的幾何體對象
  const geometry = new THREE.BufferGeometry();

  // 類型化數(shù)組創(chuàng)建頂點數(shù)據(jù)
  const vertices = new Float32Array([
    0,
    0,
    0, // 頂點1坐標(biāo)
    50,
    0,
    0, // 頂點2坐標(biāo)
    0,
    50,
    0, // 頂點3坐標(biāo)
    0,
    0,
    50, // 頂點4坐標(biāo)
  ]);

  const attribue = new THREE.BufferAttribute(vertices, 3);

  // 設(shè)置幾何體attributes屬性的位置屬性
  geometry.attributes.position = attribue;

  // 點材質(zhì)對象
  const material = new THREE.PointsMaterial({
    color: 0xFF_00_00, // 點顏色
    size: 10, // 點對象像素尺寸
  });
  // 創(chuàng)建點模型對象
  const mesh = new THREE.Points(geometry, material);
  mesh.position.set(0, 0, 0);

效果圖

六、線基礎(chǔ)材質(zhì) LineBasicMaterial

線基礎(chǔ)材質(zhì)通常在繪制線段（直線、曲線等）的時候使用的模型材質(zhì)，其他用法與MeshBasicMaterial基本一直。

  const startPoint = new THREE.Vector2(0, 0);
  const endPoint = new THREE.Vector2(50, 50);
  /**
   * 創(chuàng)建直線
   * 第一個參數(shù)：直線開始坐標(biāo)
   * 第二個參數(shù)：直線結(jié)束坐標(biāo)
   */
  const line = new THREE.LineCurve(startPoint, endPoint);
  const pointArray = line.getPoints(3);

  // 創(chuàng)建一個空的幾何體對象
  const geometry = new THREE.BufferGeometry();
  geometry.setFromPoints(pointArray);

  const material = new THREE.LineBasicMaterial({
    color: 0xff_00_ff, // 線條顏色
  });
  // 創(chuàng)建模型對象
  const mesh = new THREE.Line(geometry, material);
  mesh.position.set(0, 0, 0);

效果圖

七、精靈材質(zhì) SpriteMaterial

精靈材質(zhì)是在繪制精靈模型的時候才會使用的材質(zhì)。具體學(xué)習(xí)可參考精靈模型

八、源代碼

demo