系列文章目錄

Three.js 快速入門教程【一】開啟你的 3D Web 開發(fā)之旅
Three.js 快速入門教程【二】透視投影相機
Three.js 快速入門教程【三】渲染器
Three.js 快速入門教程【四】三維坐標系
Three.js 快速入門教程【五】動畫渲染循環(huán)
Three.js 快速入門教程【六】相機控件 OrbitControls
Three.js 快速入門教程【七】常見幾何體類型
Three.js 快速入門教程【八】常見材質類型
Three.js 快速入門教程【九】光源類型
Three.js 快速入門教程【十】常見的紋理類型

---

---

一、前言

??????在 Three.js 中，紋理是為 3D 模型添加細節(jié)和真實感的重要元素。通過紋理，我們可以為模型表面賦予各種材質和圖案，如木紋、石紋、金屬光澤等。本文將介紹 Three.js 中一些常見的紋理類型和使用講解。

---

二、紋理基礎概念

??????在 Three.js 里，Texture（紋理） 可以理解為是一種數據（大部分是圖片），它被映射到 3D 模型的表面上，用來模擬各種材質的外觀，比如木材的紋理、金屬的光澤、石頭的表面等等。通過合理地應用紋理，我們能夠讓 3D 模型看起來更加逼真和生動

在 Three.js 中，紋理是通過 Texture 類及其子類來表示的。Texture 類是所有紋理的基類，它定義了紋理的一些通用屬性和方法。常見的紋理子類包括 TextureLoader、CubeTextureLoader 等，用于加載不同類型的紋理。

---

二、常見紋理類型

1. 普通紋理（Texture）

普通紋理是最基本的紋理類型,也是所有紋理的基類，它直接使用一張圖片作為紋理。在 Three.js 中，通常使用 TextureLoader 來加載紋理圖片。

1.1 使用的加載器

TextureLoader

1.2 示例

(1) 示例1——立方體6面貼圖

// 創(chuàng)建紋理
const textureLoader = new THREE.TextureLoader();
//加載紋理圖片
const texture = textureLoader.load('texture.jpg');
// 創(chuàng)建材質并應用紋理
const material = new THREE.MeshBasicMaterial({ map: texture });
// 創(chuàng)建一個立方體
const geometry = new THREE.BoxGeometry(5,5,5);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(2) 示例2——地球

// 創(chuàng)建紋理
const textureLoader = new THREE.TextureLoader();
//加載紋理圖片
const texture = textureLoader.load('earth.jpg');
// 創(chuàng)建材質并應用紋理
const materials =new THREE.MeshLambertMaterial({ map: texture })
// 創(chuàng)建一個球體
const geometry = new THREE.SphereGeometry(1, 32, 32);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

ps:材質構造函數有個map屬性可設置普通紋理

---

2. 法線紋理（NormalTexture）

法線紋理用于模擬表面的凹凸效果，通過改變表面的法線方向來產生光影變化，所以虛擬場景中至少有一個光源，如點光源（PointLight）、平行光（DirectionalLight）或聚光燈（SpotLight）等。法線紋理通常是一張 RGB 格式的彩色圖片，每個像素的顏色值表示法線的方向。

2.1 使用的加載器

TextureLoader

2.2 核心代碼

//加載普通紋理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("texture.png");// 加載法線紋理
const normalTextureLoader = new THREE.TextureLoader();
const normalTexture = normalTextureLoader.load('normal_texture.jpg');// 創(chuàng)建一個材質并應用法線紋理
const material = new THREE.MeshStandardMaterial({map: texture,//普通紋理normalMap: normalTexture,//法線紋理normalScale: new THREE.Vector2(1, 1) // 控制法線紋理的強度
});
//創(chuàng)建一個長方體
const geometry= new THREE.BoxGeometry(100, 50,10);
const mesh= new THREE.Mesh(geometry, material );
scene.add(mesh);

• 物理、標準或高光材質構造函數有個normalMap屬性設置法線紋理
• normalScale屬性 是一個 Vector2 對象，用于控制法線貼圖的強度，值越大表面凹凸感越強

---

3. 凹凸紋理（BumpTexture）

凹凸紋理是一張灰度圖像，圖像中的每個像素值代表該位置表面的相對高度。較亮的像素代表凸起，較暗的像素代表凹陷。在光照計算時，Three.js 會根據凹凸紋理的像素值來調整表面法線的方向，從而模擬出凹凸的視覺效果，實際上幾何形狀并未被改變，所以虛擬場景中和法線紋理一樣要求至少有一個光源。

3.1 使用的加載器

TextureLoader

3.2 核心代碼

//加載普通紋理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("texture.png");// 加載凹凸紋理
const bumpTextureLoader= new THREE.TextureLoader();
const bumpTexture= bumpTextureLoader.load('bump_texture.png');// 創(chuàng)建一個材質并應用凹凸紋理
const material = new THREE.MeshStandardMaterial({map: texture,//普通紋理bumpMap: normalTexture, //凹凸紋理bumpScale:1, // 調整凹凸效果的強度
});
//創(chuàng)建一個矩形平面
const geometry= new THREE.PlaneGeometry(100, 100);
const mesh = new THREE.Mesh(geometry, material );
scene.add(mesh );

• 物理、標準或高光材質構造函數有個bumpMap屬性設置凹凸紋理
• bumpScale屬性 用于控制凹凸效果的強度，值越大表面凹凸感越強

3.3 與法向紋理區(qū)別

1、 原理不同

凹凸紋理通過灰度值區(qū)別呈現凹凸效果，而法向紋理通過每個像素的 RGB 值偏移量設置實現

2、效果表現

? ??? 凹凸紋理效果相對較為柔和、簡單。在表現小尺度的細節(jié)和高光反射時不夠真實，通常用于表現一些相對平滑、低細節(jié)的表面凹凸，如輕微的波紋、粗糙的石頭表面等。

?????法向紋理能夠呈現出非常精細、真實的表面細節(jié)和凹凸效果。高光和陰影的過渡更加自然，即使在近距離觀察或物體表面角度變化較大時，也能保持良好的視覺效果，適用于表現具有豐富細節(jié)的表面，如磚塊的縫隙、皮革的紋理、金屬的劃痕等。

---

4. 立方體紋理（CubeTexture）

立方體紋理是由六個單獨的紋理面（通常是正方形圖片）組成，這些面分別對應一個虛擬立方體的六個面：正面、背面、頂面、底面、左面和右面。在 Three.js 場景中，它常被用于模擬環(huán)境，比如天空盒，讓場景中的物體仿佛處于一個真實的環(huán)境當中，也可以用于反射效果，使物體能夠反射周圍的環(huán)境。

4.1 使用的加載器

CubeTextureLoader

4.2 示例

示例1——實現一個天空盒

// 創(chuàng)建 CubeTextureLoader
const cubeTextureLoader = new THREE.CubeTextureLoader();
// 加載立方體紋理的六張圖片
// 這里的路徑示例請根據實際情況修改
cubeTextureLoader.setPath('textures/');
cubeTextureLoader.load(['px.jpg', // 右面'nx.jpg', // 左 面'py.jpg', // 上 面'ny.jpg', // 下 面'pz.jpg', // 前 面'nz.jpg'  // 后 面],(cubeTexture)=> {// 設置紋理的映射方式cubeTexture.mapping = THREE.CubeReflectionMapping;// 創(chuàng)建一個用于天空盒的材質const skyboxMaterial = new THREE.MeshBasicMaterial({envMap: cubeTexture,//環(huán)境貼圖side: THREE.BackSide //渲染背面});// 創(chuàng)建一個大的立方體作為天空盒const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);}
);

在上述代碼中，我們首先創(chuàng)建了 CubeTextureLoader 實例，通過 setPath 方法設置圖片的路徑前綴，然后使用 load 方法加載六張分別對應立方體六個面的圖片。當加載完成后，我們設置了紋理的映射方式為 THREE.CubeReflectionMapping（用于反射效果），并創(chuàng)建了一個 MeshBasicMaterial 材質，將立方體紋理應用到該材質上，最后創(chuàng)建一個大的立方體作為天空盒添加到場景中。

運行效果：

CubeTexture 的映射方式

紋理mapping屬性控制著紋理在模型表面的映射方式

CubeTexture 有不同的映射方式，常見的有：

• THREE.CubeReflectionMapping：這種映射方式常用于模擬物體的反射效果，讓物體能夠反射周圍的環(huán)境。例如在創(chuàng)建一個金屬質感的物體時，使用這種映射方式可以讓物體看起來像是反射了周圍的場景。
• THREE.CubeRefractionMapping：用于模擬折射效果，比如創(chuàng)建一個透明的玻璃物體時，通過這種映射方式可以讓物體產生折射的視覺效果，仿佛光線穿過了物體。

ps:立方體紋理要求用于六個面的圖片是正方形，也就是長寬一樣

示例2——反射周圍的環(huán)境

在示例1基礎上我們新建一個光滑的球體使其表面反射周圍環(huán)境

// 創(chuàng)建 CubeTextureLoader
const cubeTextureLoader = new THREE.CubeTextureLoader();
// 加載立方體紋理的六張圖片
// 這里的路徑示例請根據實際情況修改
cubeTextureLoader.setPath('textures/');
cubeTextureLoader.load(['px.jpg', // 正 X 面'nx.jpg', // 負 X 面'py.jpg', // 正 Y 面'ny.jpg', // 負 Y 面'pz.jpg', // 正 Z 面'nz.jpg'  // 負 Z 面],(cubeTexture)=> {// 設置紋理的映射方式cubeTexture.mapping = THREE.CubeReflectionMapping;// 創(chuàng)建一個用于天空盒的材質const skyboxMaterial = new THREE.MeshBasicMaterial({envMap: cubeTexture,side: THREE.BackSide //渲染背面});// 創(chuàng)建一個大的立方體作為天空盒const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);// 創(chuàng)建一個球體幾何體const geometry = new THREE.SphereGeometry(1, 32, 32);// 創(chuàng)建一個標準材質const material = new THREE.MeshStandardMaterial({metalness: 1,//金屬性roughness: 0.05, //粗糙度envMap:cubeTexture//環(huán)境貼圖});// 創(chuàng)建球體網格const sphere = new THREE.Mesh(geometry, material);scene.add(sphere);}
);

---

5.視頻紋理（VideoTexture ）

VideoTexture 本質上是 Three.js 對 HTML5 元素的一種封裝，它能夠實時地將視頻內容映射到 3D 模型上，使得模型表面呈現出動態(tài)的畫面。與普通的靜態(tài)紋理（如圖片紋理）不同，VideoTexture 會隨著視頻的播放而不斷更新，創(chuàng)造出諸如動態(tài)廣告屏幕、虛擬視頻墻等有趣的效果

使用的加載器

VideoTexture

示例

html

<video id="myVideo" autoplay loop muted><source src="your_video_file.mp4" type="video/mp4">
</video>

html文件中創(chuàng)建一個 元素，并設置好視頻的源文件、自動播放等屬性

js

import * as THREE from 'three';// 獲取 HTML 中的視頻元素
const video = document.getElementById('myVideo');
// 創(chuàng)建 VideoTexture
const videoTexture = new THREE.VideoTexture(video);
// 創(chuàng)建一個長方體幾何體
const geometry= new THREE.BoxGeometry(10, 5,1);
// 創(chuàng)建材質并應用視頻紋理
const material = new THREE.MeshBasicMaterial({ map: videoTexture });
const mesh = new THREE.Mesh(geometry, material);const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);scene.add(mesh);
camera.position.z = 10;function animate() {requestAnimationFrame(animate);// 更新視頻紋理videoTexture.needsUpdate = true;renderer.render(scene, camera);
}
animate();

---

五、免費紋理資源

免費的紋理資源可以訪問Poly Haven網站，該網站不僅有免費紋理資源還有3d模型和全景圖片提供下載調試

---

六、總結

???????通過本文的介紹，我們了解了 Three.js 中一些常見的紋理類型及其使用方法，對紋理在 3D 場景構建中的作用有了較為全面的認識。從基礎的 Texture 加載和應用，到 CubeTexture 為場景帶來的環(huán)境映射效果，每一種紋理都有著獨特的功能和應用場景。在實際開發(fā)中，可以根據具體需求靈活運用這些紋理和屬性，打造出獨特的 3D 效果。

更多three.js入門知識點請關注該系列教程后續(xù)的更新。