系列文章目錄

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

---

---

一、前言

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

---

二、紋理基礎(chǔ)概念

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

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

---

二、常見(jiàn)紋理類(lèi)型

1. 普通紋理（Texture）

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

1.1 使用的加載器

TextureLoader

1.2 示例

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

// 創(chuàng)建紋理
const textureLoader = new THREE.TextureLoader();
//加載紋理圖片
const texture = textureLoader.load('texture.jpg');
// 創(chuàng)建材質(zhì)并應(yīng)用紋理
const material = new THREE.MeshBasicMaterial({ map: texture });
// 創(chuàng)建一個(gè)立方體
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)建材質(zhì)并應(yīng)用紋理
const materials =new THREE.MeshLambertMaterial({ map: texture })
// 創(chuàng)建一個(gè)球體
const geometry = new THREE.SphereGeometry(1, 32, 32);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

ps:材質(zhì)構(gòu)造函數(shù)有個(gè)map屬性可設(shè)置普通紋理

---

2. 法線紋理（NormalTexture）

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

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)建一個(gè)材質(zhì)并應(yīng)用法線紋理
const material = new THREE.MeshStandardMaterial({map: texture,//普通紋理normalMap: normalTexture,//法線紋理normalScale: new THREE.Vector2(1, 1) // 控制法線紋理的強(qiáng)度
});
//創(chuàng)建一個(gè)長(zhǎng)方體
const geometry= new THREE.BoxGeometry(100, 50,10);
const mesh= new THREE.Mesh(geometry, material );
scene.add(mesh);

• 物理、標(biāo)準(zhǔn)或高光材質(zhì)構(gòu)造函數(shù)有個(gè)normalMap屬性設(shè)置法線紋理
• normalScale屬性 是一個(gè) Vector2 對(duì)象，用于控制法線貼圖的強(qiáng)度，值越大表面凹凸感越強(qiáng)

---

3. 凹凸紋理（BumpTexture）

凹凸紋理是一張灰度圖像，圖像中的每個(gè)像素值代表該位置表面的相對(duì)高度。較亮的像素代表凸起，較暗的像素代表凹陷。在光照計(jì)算時(shí)，Three.js 會(huì)根據(jù)凹凸紋理的像素值來(lái)調(diào)整表面法線的方向，從而模擬出凹凸的視覺(jué)效果，實(shí)際上幾何形狀并未被改變，所以虛擬場(chǎng)景中和法線紋理一樣要求至少有一個(gè)光源。

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)建一個(gè)材質(zhì)并應(yīng)用凹凸紋理
const material = new THREE.MeshStandardMaterial({map: texture,//普通紋理bumpMap: normalTexture, //凹凸紋理bumpScale:1, // 調(diào)整凹凸效果的強(qiáng)度
});
//創(chuàng)建一個(gè)矩形平面
const geometry= new THREE.PlaneGeometry(100, 100);
const mesh = new THREE.Mesh(geometry, material );
scene.add(mesh );

• 物理、標(biāo)準(zhǔn)或高光材質(zhì)構(gòu)造函數(shù)有個(gè)bumpMap屬性設(shè)置凹凸紋理
• bumpScale屬性 用于控制凹凸效果的強(qiáng)度，值越大表面凹凸感越強(qiáng)

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

1、 原理不同

凹凸紋理通過(guò)灰度值區(qū)別呈現(xiàn)凹凸效果，而法向紋理通過(guò)每個(gè)像素的 RGB 值偏移量設(shè)置實(shí)現(xiàn)

2、效果表現(xiàn)

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

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

---

4. 立方體紋理（CubeTexture）

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

4.1 使用的加載器

CubeTextureLoader

4.2 示例

示例1——實(shí)現(xiàn)一個(gè)天空盒

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

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

運(yùn)行效果：

CubeTexture 的映射方式

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

CubeTexture 有不同的映射方式，常見(jiàn)的有：

• THREE.CubeReflectionMapping：這種映射方式常用于模擬物體的反射效果，讓物體能夠反射周?chē)沫h(huán)境。例如在創(chuàng)建一個(gè)金屬質(zhì)感的物體時(shí)，使用這種映射方式可以讓物體看起來(lái)像是反射了周?chē)膱?chǎng)景。
• THREE.CubeRefractionMapping：用于模擬折射效果，比如創(chuàng)建一個(gè)透明的玻璃物體時(shí)，通過(guò)這種映射方式可以讓物體產(chǎn)生折射的視覺(jué)效果，仿佛光線穿過(guò)了物體。

ps:立方體紋理要求用于六個(gè)面的圖片是正方形，也就是長(zhǎng)寬一樣

示例2——反射周?chē)沫h(huán)境

在示例1基礎(chǔ)上我們新建一個(gè)光滑的球體使其表面反射周?chē)h(huán)境

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

---

5.視頻紋理（VideoTexture ）

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

使用的加載器

VideoTexture

示例

html

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

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

js

import * as THREE from 'three';// 獲取 HTML 中的視頻元素
const video = document.getElementById('myVideo');
// 創(chuàng)建 VideoTexture
const videoTexture = new THREE.VideoTexture(video);
// 創(chuàng)建一個(gè)長(zhǎng)方體幾何體
const geometry= new THREE.BoxGeometry(10, 5,1);
// 創(chuàng)建材質(zhì)并應(yī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();

---

五、免費(fèi)紋理資源

免費(fèi)的紋理資源可以訪問(wèn)Poly Haven網(wǎng)站，該網(wǎng)站不僅有免費(fèi)紋理資源還有3d模型和全景圖片提供下載調(diào)試

---

六、總結(jié)

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

更多three.js入門(mén)知識(shí)點(diǎn)請(qǐng)關(guān)注該系列教程后續(xù)的更新。