【Three.js】知识梳理十一：Three.js高级纹理类型

news2024/11/26 13:43:50

在使用Three.js创建3D图形时，纹理扮演着重要的角色，它们可以增加模型的视觉效果，使模型看起来更加真实。本文将深入讨论几种高级纹理类型：法线贴图（Normal Maps），凹凸贴图（Displacement Maps），高光贴图（Specular Maps），环境贴图（Environment Maps）以及数据纹理（Data Textures）。

1. 法线贴图

法线贴图是一种存储了一个模型表面法向量信息的纹理，它可以提供更多的表面细节，使模型看起来更加真实。法线贴图中的每个像素都存储了一个对应表面位置的法向量，这些法向量在渲染时用于计算光照，从而模拟出更复杂的表面细节。

使用法线贴图，我们可以在不增加模型顶点数的情况下，模拟出高精度模型的表面细节。在Three.js中，可以使用MeshStandardMaterial或MeshPhongMaterial的normalMap属性来指定法线贴图：

var normalMap = new THREE.TextureLoader().load('textures/normalMap.png');
var material = new THREE.MeshStandardMaterial({ normalMap: normalMap });

对比两个地球的渲染效果，一个设置法线贴图，一个不设置法线贴图：

2. 凹凸贴图

凹凸贴图或位移贴图能够改变模型表面的几何形状，以模拟出更复杂的表面细节。凹凸贴图中的每个像素值代表了对应表面位置的位移量，渲染时，这个位移量会被添加到模型的顶点位置，从而改变模型的表面形状。

在Three.js中，可以使用MeshStandardMaterial或MeshPhongMaterial的displacementMap属性来指定凹凸贴图：

var displacementMap = new THREE.TextureLoader().load('textures/displacementMap.png');
var material = new THREE.MeshStandardMaterial({ displacementMap: displacementMap });

对比两面墙的渲染效果，一个使用凹凸贴图，一个不使用凹凸贴图：

3. 高光贴图

高光贴图用于控制模型表面的高光效果，它可以模拟出模型表面的不同材质，如金属、塑料等。高光贴图中的每个像素值代表了对应表面位置的高光强度，渲染时，这个值会影响光线的反射效果。

在Three.js中，可以使用MeshPhongMaterial的specularMap属性来指定高光贴图：

var specularMap = new THREE.TextureLoader().load('textures/specularMap.png');
var material = new THREE.MeshPhongMaterial({ specularMap: specularMap });

4. 环境贴图

环境贴图（Environment Maps），也常被称为反射贴图或天球贴图，是一种可以模拟环境反射效果的纹理。环境贴图通常是一个包含了全景环境图像的立方体纹理，渲染时，会根据模型的反射方向和环境贴图进行采样，从而模拟出环境反射的效果。

在Three.js中，可以使用MeshStandardMaterial或MeshPhongMaterial的envMap属性来指定环境贴图：

var envMap = new THREE.CubeTextureLoader().load([
    'textures/envMap_px.png',
    'textures/envMap_nx.png',
    'textures/envMap_py.png',
    'textures/envMap_ny.png',
    'textures/envMap_pz.png',
    'textures/envMap_nz.png'
]);
var material = new THREE.MeshStandardMaterial({ envMap: envMap });

5. 数据纹理

数据纹理（Data Textures）是一种特殊的纹理，它不是用于直接渲染的，而是用于存储一些数据，这些数据可以在着色器中使用，以实现一些复杂的图形处理效果。

数据纹理中的每个像素都可以存储一个RGBA值，这四个值可以分别代表不同的数据。在Three.js中，可以使用THREE.DataTexture类来创建数据纹理：

//程序生成一张图片的RGB值
var geometry = new THREE.PlaneGeometry(128, 128); //矩形平面
/**
 * 创建纹理对象的像素数据
 */
var width = 32; //纹理宽度
var height = 32; //纹理高度
var size = width * height; //像素大小
var data = new Uint8Array(size * 3); //size*3：像素在缓冲区占用空间
for (let i = 0; i < size * 3; i += 3) {
  // 随机设置RGB分量的值
  data[i] = 255 * Math.random()
  data[i + 1] = 255 * Math.random()
  data[i + 2] = 255 * Math.random()
}
// 创建数据文理对象   RGB格式：THREE.RGBFormat
var texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
texture.needsUpdate = true; //纹理更新
//打印纹理对象的image属性
// console.log(texture.image);

var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material);