Three.js 快速入门教程【十】常见的纹理类型

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
Three.js 快速入门教程【十】常见的纹理类型

---

---

一、前言

      在 Three.js 中，纹理是为 3D 模型添加细节和真实感的重要元素。通过纹理，我们可以为模型表面赋予各种材质和图案，如木纹、石纹、金属光泽等。本文将介绍 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面贴图

// 创建纹理
const textureLoader = new THREE.TextureLoader();
//加载纹理图片
const texture = textureLoader.load('texture.jpg');
// 创建材质并应用纹理
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建一个立方体
const geometry = new THREE.BoxGeometry(5,5,5);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(2) 示例2——地球

// 创建纹理
const textureLoader = new THREE.TextureLoader();
//加载纹理图片
const texture = textureLoader.load('earth.jpg');
// 创建材质并应用纹理
const materials =new THREE.MeshLambertMaterial({ map: texture })
// 创建一个球体
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');// 创建一个材质并应用法线纹理
const material = new THREE.MeshStandardMaterial({map: texture,//普通纹理normalMap: normalTexture,//法线纹理normalScale: new THREE.Vector2(1, 1) // 控制法线纹理的强度
});
//创建一个长方体
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');// 创建一个材质并应用凹凸纹理
const material = new THREE.MeshStandardMaterial({map: texture,//普通纹理bumpMap: normalTexture, //凹凸纹理bumpScale:1, // 调整凹凸效果的强度
});
//创建一个矩形平面
const geometry= new THREE.PlaneGeometry(100, 100);
const mesh = new THREE.Mesh(geometry, material );
scene.add(mesh );

• 物理、标准或高光材质构造函数有个bumpMap属性设置凹凸纹理
• bumpScale属性 用于控制凹凸效果的强度，值越大表面凹凸感越强

3.3 与法向纹理区别

1、 原理不同

凹凸纹理通过灰度值区别呈现凹凸效果，而法向纹理通过每个像素的 RGB 值偏移量设置实现

2、效果表现

      凹凸纹理效果相对较为柔和、简单。在表现小尺度的细节和高光反射时不够真实，通常用于表现一些相对平滑、低细节的表面凹凸，如轻微的波纹、粗糙的石头表面等。

     法向纹理能够呈现出非常精细、真实的表面细节和凹凸效果。高光和阴影的过渡更加自然，即使在近距离观察或物体表面角度变化较大时，也能保持良好的视觉效果，适用于表现具有丰富细节的表面，如砖块的缝隙、皮革的纹理、金属的划痕等。

---

4. 立方体纹理（CubeTexture）

立方体纹理是由六个单独的纹理面（通常是正方形图片）组成，这些面分别对应一个虚拟立方体的六个面：正面、背面、顶面、底面、左面和右面。在 Three.js 场景中，它常被用于模拟环境，比如天空盒，让场景中的物体仿佛处于一个真实的环境当中，也可以用于反射效果，使物体能够反射周围的环境。

4.1 使用的加载器

CubeTextureLoader

4.2 示例

示例1——实现一个天空盒

// 创建 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;// 创建一个用于天空盒的材质const skyboxMaterial = new THREE.MeshBasicMaterial({envMap: cubeTexture,//环境贴图side: THREE.BackSide //渲染背面});// 创建一个大的立方体作为天空盒const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);}
);

在上述代码中，我们首先创建了 CubeTextureLoader 实例，通过 setPath 方法设置图片的路径前缀，然后使用 load 方法加载六张分别对应立方体六个面的图片。当加载完成后，我们设置了纹理的映射方式为 THREE.CubeReflectionMapping（用于反射效果），并创建了一个 MeshBasicMaterial 材质，将立方体纹理应用到该材质上，最后创建一个大的立方体作为天空盒添加到场景中。

运行效果：

天空盒示例

CubeTexture 的映射方式

纹理mapping属性控制着纹理在模型表面的映射方式

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

• THREE.CubeReflectionMapping：这种映射方式常用于模拟物体的反射效果，让物体能够反射周围的环境。例如在创建一个金属质感的物体时，使用这种映射方式可以让物体看起来像是反射了周围的场景。
• THREE.CubeRefractionMapping：用于模拟折射效果，比如创建一个透明的玻璃物体时，通过这种映射方式可以让物体产生折射的视觉效果，仿佛光线穿过了物体。

ps:立方体纹理要求用于六个面的图片是正方形，也就是长宽一样

示例2——反射周围的环境

在示例1基础上我们新建一个光滑的球体使其表面反射周围环境

// 创建 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;// 创建一个用于天空盒的材质const skyboxMaterial = new THREE.MeshBasicMaterial({envMap: cubeTexture,side: THREE.BackSide //渲染背面});// 创建一个大的立方体作为天空盒const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);// 创建一个球体几何体const geometry = new THREE.SphereGeometry(1, 32, 32);// 创建一个标准材质const material = new THREE.MeshStandardMaterial({metalness: 1,//金属性roughness: 0.05, //粗糙度envMap:cubeTexture//环境贴图});// 创建球体网格const sphere = new THREE.Mesh(geometry, material);scene.add(sphere);}
);

---

5.视频纹理（VideoTexture ）

VideoTexture 本质上是 Three.js 对 HTML5 元素的一种封装，它能够实时地将视频内容映射到 3D 模型上，使得模型表面呈现出动态的画面。与普通的静态纹理（如图片纹理）不同，VideoTexture 会随着视频的播放而不断更新，创造出诸如动态广告屏幕、虚拟视频墙等有趣的效果

使用的加载器

VideoTexture

示例

html

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

html文件中创建一个 元素，并设置好视频的源文件、自动播放等属性

js

import * as THREE from 'three';// 获取 HTML 中的视频元素
const video = document.getElementById('myVideo');
// 创建 VideoTexture
const videoTexture = new THREE.VideoTexture(video);
// 创建一个长方体几何体
const geometry= new THREE.BoxGeometry(10, 5,1);
// 创建材质并应用视频纹理
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 为场景带来的环境映射效果，每一种纹理都有着独特的功能和应用场景。在实际开发中，可以根据具体需求灵活运用这些纹理和属性，打造出独特的 3D 效果。

更多three.js入门知识点请关注该系列教程后续的更新。