ThreeJS-纹理贴图大集合

原创

已于 2023-07-21 00:01:49 修改 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#贴图

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

纹理用于表现物体细节，通过各种贴图如图片、透明、凹凸、法线等增强视觉效果。Three.js中的纹理属性包括偏移、旋转和重复模式等。文章列举了9种常见的纹理类型，如透明贴图控制不透明度，法线贴图改变光照效果，以及位移贴图影响几何形状等。

什么是纹理？

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

纹理的常用属性

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通道（如果存在）。