1. 什么是材質(zhì)Material？

在 Three.js 中，材質(zhì)（Material）定義了物體表面的外觀。它們決定了物體的顏色、紋理、光滑度、透明度等特性。你可以將材質(zhì)理解為場景中物體的皮膚。Three.js 提供了多種材質(zhì)類型，以滿足不同場景的需求。

2. 常見材質(zhì)類型

為了方便開發(fā)，Threejs提供了一系列的材質(zhì)，所有材質(zhì)就是對WebGL著色器代碼的封裝。

2.1 基礎(chǔ)材質(zhì)（MeshBasicMaterial）

基礎(chǔ)材質(zhì)是最簡單的材質(zhì)類型，它不受光照影響。適用于創(chuàng)建不需要光照效果的物體，例如背景、2D 圖形等。它的參數(shù)包括顏色、透明度、貼圖等。

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

2.2 標準材質(zhì)（MeshStandardMaterial）

標準材質(zhì)是一種具有真實感的材質(zhì)類型。它考慮了光照、漫反射、鏡面反射等效果。適用于創(chuàng)建具有現(xiàn)實感的物體。常用參數(shù)包括顏色、金屬度、粗糙度等。

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.5, roughness: 0.5 });

2.3 Lambert 材質(zhì)（MeshLambertMaterial）

Lambert 材質(zhì)是一種簡化的光照模型，它僅考慮漫反射效果。相比于標準材質(zhì)，性能開銷較小，但效果較差。適用于對性能要求較高，但對效果要求較低的場景。常用參數(shù)包括顏色、透明度等。

const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });

2.4 Phong 材質(zhì)（MeshPhongMaterial）

Phong 材質(zhì)是一種更復雜的光照模型，它同時考慮了漫反射和鏡面反射效果。相比于 Lambert 材質(zhì)，效果較好，但性能開銷較大。適用于對效果要求較高的場景。常用參數(shù)包括顏色、鏡面反射顏色、光滑度等。

const material = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff, shininess: 30 });

2.5 可編程著色器材質(zhì)（ShaderMaterial）

可編程著色器材質(zhì)允許開發(fā)者自定義著色器（GLSL 代碼），實現(xiàn)獨特的渲染效果。這種材質(zhì)類型適用于具有特殊需求的場景。它需要開發(fā)者編寫頂點著色器和片元著色器。

const vertexShader = `
  varying vec3 vWorldPosition;
  void main() {
    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
    vWorldPosition = worldPosition.xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  varying vec3 vWorldPosition;
  void main() {
    vec3 color = vec3(vWorldPosition.x, vWorldPosition.y, vWorldPosition.z);
    gl_FragColor = vec4(color, 1.0);
  }
`;

const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
});

3. 紋理映射

Three.js 支持為材質(zhì)添加紋理，以實現(xiàn)更豐富的表面細節(jié)。紋理映射（Texture Mapping）是將一張 2D 圖像貼到物體表面的技術(shù)。常見的紋理類型有：

• 貼圖（Texture）：為物體添加顏色和細節(jié)。
• 法線貼圖（Normal Map）：在不增加幾何體細節(jié)的情況下，增強物體表面的凹凸感。
• 環(huán)境光遮蔽貼圖（Ambient Occlusion Map）：增加物體表面的陰影效果，增強真實感。
• 位移貼圖（Displacement Map）：根據(jù)紋理信息改變物體表面的幾何細節(jié)。

4.材質(zhì)的主要屬性

在 Three.js 中，材質(zhì)（Material）負責定義物體表面的外觀，如顏色、紋理和光照效果。以下是一些主要的材質(zhì)屬性：

• color： 基本顏色，通常是一個 THREE.Color 對象，表示材質(zhì)的漫反射顏色。
• map： 紋理貼圖，是一個 THREE.Texture 對象，用于為材質(zhì)添加紋理。
• opacity： 透明度，表示材質(zhì)的不透明程度，取值范圍為 0（完全透明）到 1（完全不透明）。
• transparent： 布爾值，指示材質(zhì)是否透明。如果設(shè)置為 true，則材質(zhì)將考慮透明度（opacity）的影響。
• alphaMap： 透明度貼圖，是一個 THREE.Texture 對象，用于根據(jù)紋理圖像的灰度值控制材質(zhì)的透明度。
• side： 渲染面的方向，可以是 THREE.FrontSide、THREE.BackSide 或 THREE.DoubleSide。默認值是 THREE.FrontSide，只渲染正面。
• emissive： 自發(fā)光顏色，通常是一個 THREE.Color 對象，表示材質(zhì)的自發(fā)光顏色。
• emissiveMap： 自發(fā)光貼圖，是一個 THREE.Texture 對象，用于為材質(zhì)添加自發(fā)光效果。
• specular： 鏡面反射顏色，通常是一個 THREE.Color 對象，表示材質(zhì)的鏡面反射顏色。這個屬性主要應用于具有鏡面反射效果的材質(zhì)，如 THREE.MeshPhongMaterial。
• shininess： 光澤度，表示材質(zhì)的光澤程度。這個屬性主要應用于具有鏡面反射效果的材質(zhì)，如 THREE.MeshPhongMaterial。
• wireframe： 布爾值，指示是否以線框模式渲染物體。如果設(shè)置為 true，則物體將以線框模式顯示。
• bumpMap： 凹凸貼圖，是一個 THREE.Texture 對象，用于為材質(zhì)添加凹凸效果，以模擬表面的細微凹凸。
• normalMap： 法線貼圖，是一個 THREE.Texture 對象，用于為材質(zhì)添加法線貼圖效果，以模擬表面的細節(jié)。
• displacementMap： 位移貼圖，是一個 THREE.Texture 對象，用于根據(jù)紋理圖像的灰度值改變物體表面的高度。
• roughness： 粗糙度，表示材質(zhì)表面的粗糙程度。這個屬性主要應用于基于物理的渲染（PBR）材質(zhì)，如 THREE.MeshStandardMaterial 和 THREE.MeshPhysicalMaterial。
• metalness： 金屬度，表示材質(zhì)表面的金屬質(zhì)感。這個屬性主要應用于基于物理的渲染（PBR）材質(zhì)，如 THREE.MeshStandardMaterial 和 THREE.MeshPhysicalMaterial。
• roughnessMap： 粗糙度貼圖，是一個 THREE.Texture 對象，用于根據(jù)紋理圖像的灰度值控制材質(zhì)的粗糙度。這個屬性主要應用于基于物理的渲染（PBR）材質(zhì)。
• metalnessMap： 金屬度貼圖，是一個 THREE.Texture 對象，用于根據(jù)紋理圖像的灰度值控制材質(zhì)的金屬度。這個屬性主要應用于基于物理的渲染（PBR）材質(zhì)。
• envMap： 環(huán)境貼圖，是一個 THREE.Texture 對象，用于為材質(zhì)添加反射和折射效果。
• refractionRatio： 折射率，表示材質(zhì)的折射程度。這個屬性主要應用于具有折射效果的材質(zhì)，如 THREE.MeshPhysicalMaterial。

5. 總結(jié)

Three.js 提供了豐富的材質(zhì)類型和紋理映射功能，幫助開發(fā)者創(chuàng)建出具有真實感和豐富細節(jié)的 3D 場景。從簡單的基礎(chǔ)材質(zhì)到復雜的可編程著色器材質(zhì)，你可以根據(jù)項目需求選擇合適的材質(zhì)類型。

以上就是Three.js材質(zhì)Material的詳細內(nèi)容，更多關(guān)于Three.js材質(zhì)Material的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論