ThreeJS-纹理贴图大集合

小白菜_12138

已于 2023-07-21 00:01:49 修改

阅读量845

点赞数 1

分类专栏： ThreeJS 文章标签：贴图

于 2023-07-20 23:58:34 首次发布

本文链接：https://blog.csdn.net/Define_best/article/details/131841290

版权

ThreeJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是纹理？

纹理用来表现物体的细节。理论上可以将物体的每个细节通过建模展示出来，但是这样时间成本和性能成本都太高，因此，将物体的一些细节用纹理来表示。

纹理的常用属性

const doorColorTexture = textureLoader.load('./texture/OIP.jpeg');
// 设置纹理偏移
doorColorTexture.offset.x = 0.5; //偏移量  x，y 二维方向上的偏移
// 设置纹理旋转
doorColorTexture.rotation = Math.PI / 4; //逆时针旋转
// 设置纹理旋转中心点
doorColorTexture.center.set(0.5 , 0.5)
// 设置纹理是否重复
doorColorTexture.repeat.set(2, 3); //水平重复两次 竖直重复三次
// 设置纹理重复的模式
doorColorTexture.wrapS = THREE.RepeatWrapping; //水平方向会一直重复到无穷。
doorColorTexture.wrapT = THREE.RepeatWrapping; //竖直方向

1.图片纹理贴图

图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。

//加载texture的一个类。 内部使用ImageLoader来加载文件。
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); //导入图片

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture, //应用图片纹理
});

2.透明纹理贴图

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); 
const doorAplhaTexture = textureLoader.load('./textures/door/alpha.jpg') //黑色为完全透明，白色区域为完全不透明

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    // opacity: 0.5, //透明度
    transparent: true, //设置为允许透明
    alphaMap: doorAplhaTexture,
});

当 opacity 属性和 alphaMap 透明纹理同时使用的时候，仅使用纹理的颜色，忽略alpha通道（如果存在）。

3.凹凸贴图

用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); 
const doorBumpTexture = textureLoader.load('./textures/door/bump.jpg');

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    bumpMap: bumpTexture,
    bumpScale: 0.2
});

bumpScale : 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

4.法线贴图

用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorNormalTexture = textureLoader.load('./textures/door/normal.jpg') //法线贴图


const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    normalMap: doorNormalTexture, //法线贴图
    normalScale: 1,
});

normalScale: 法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

5.环境贴图

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorAoTexture = textureLoader.load('./textures/door/ambientOcclusion.jpg') //环境遮挡贴图


const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    aoMap: doorAoTexture, //环境遮挡贴图    但是需要添加第二组UV
    aoMapIntensity : 1,
});

const boxGeomatery = new THREE.BoxGeometry(1,1,1);
// 设置第二组uv
boxGeomatery.setAttribute('uv2', new THREE.BufferAttribute(boxGeomatery.attributes.uv.array, 2))

6.置换贴图（位移贴图）

位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorHeightTexture = textureLoader.load('./textures/door/height.jpg') //导入置换贴图   置换需要点

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    displacementMap: doorHeightTexture, //设置置换属性 
    displacementScale: 0.1, //控制最大突出程度
});

displacementScale：位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

7.金属贴图

该纹理的蓝色通道用于改变材质的金属度。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorMetalnessTexture = textureLoader.load('./textures/door/metalness.jpg') //金属贴图

const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    metalness: 1, //金属度 0-1 1就是金属    如果设置为1的话，变为金属会完全的发生反光/反射  
    metalnessMap: doorMetalnessTexture, //金属贴图
});

metalness：材质与金属的相似度。非金属材质，如木材或石材，使用0.0，金属使用1.0，通常没有中间值。默认值为0.0。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap，则两个值相乘。

使用metalness：

使用metalnessMap：

只有金属材质的才会看着有金属光泽～

8.粗糙度纹理贴图

该纹理的绿色通道用于改变材质的粗糙度。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorRoughnessTexture = textureLoader.load('./textures/door/roughness.jpg') //粗糙贴图 灰度贴图  从 0-1 黑-白
const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    roughness: 1, //粗糙度为0   就是超级光滑 1就是非常的粗糙    整体
    roughnessMap: doorRoughnessTexture,
});

roughness：材质的粗糙程度。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。如果还提供roughnessMap，则两个值相乘。

使用roughness :

使用 roughnessMap：

9.光照贴图

光照贴图。默认值为null。lightMap需要第二组UV。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');
const doorLightTexture = textureLoader.load('./textures/door/light.jpg') //光照贴图 
const material = new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    lightMap: doorLightTexture,
    lightMapIntensity: 1,
});

lightMapIntensity：烘焙光的强度。默认值为1。