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

pixle0

已于 2025-05-29 08:46:42 修改

阅读量1.4k

点赞数 37

分类专栏： Three.js 文章标签： javascript 开发语言 3d

于 2025-02-27 15:43:18 首次发布

本文链接：https://blog.csdn.net/sd1sd2/article/details/145862786

版权

Three.js 专栏收录该内容

22 篇文章

订阅专栏

请添加图片描述

系列文章目录

一、前言

在 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文件中创建一个元素，并设置好视频的源文件、自动播放等属性

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入门知识点请关注该系列教程后续的更新。