Cheng

Appearance

贴图 ​

常用的贴图 ​

1.基础颜色贴图（map） ​

定义物体表面的基本颜色或图案

js
material.map = new THREE.TextureLoader().load('texture.jpg');

2.法线贴图（normalMap） ​

模拟凹凸细节

js
material.normalMap = new THREE.TextureLoader().load('normal.png');
material.normalScale.set(1, 1); // 控制凹凸强度

3.Alpha 贴图（alphaMap） ​

控制透明度（黑色=透明，白色=不透明）

js
material.transparent = true;
material.alphaMap = new THREE.TextureLoader().load('alpha.png');

4.环境光遮蔽贴图（aoMap） ​

模拟物体表面因环境光遮蔽产生的阴影（如缝隙、角落变暗）

js
geometry.attributes.uv2 = geometry.attributes.uv; // 复制UV
material.aoMap = new THREE.TextureLoader().load('ao.jpg');
material.aoMapIntensity = 1.0; // 强度

5.金属高光贴图/粗糙度贴图（roughnessMap / metalnessMap） ​

  • roughnessMap：定义表面粗糙程度（黑色=光滑，白色=粗糙）。

  • metalnessMap：定义金属感（黑色=非金属，白色=金属）

js
material.roughnessMap = new THREE.TextureLoader().load('roughness.jpg');
material.metalnessMap = new THREE.TextureLoader().load('metalness.jpg');

6.置换贴图（displacementMap） ​

真正改变顶点位置，渲染时生成凹凸、起伏或复杂表面细节，表现强烈的立体效果

js
material.displacementMap = new THREE.TextureLoader().load('height.png');
material.displacementScale = 0.1; // 位移强度

贴图转换 ​

1.阵列 ​

js
const colorTexture = textureLoader.load('/textures/door/color.jpg')
// 设置阵列模式
colorTexture.wrapS = THREE.RepeatWrapping
colorTexture.wrapT = THREE.RepeatWrapping
colorTexture.repeat.set(12,12);//选择合适的阵列数量

2.偏移 ​

js
colorTexture.offset.x = 0.5
colorTexture.offset.y = 0.5

3.旋转 ​

js
colorTexture.rotation = Math.PI * 0.25

缩小滤镜 ​

缩小滤镜用于控制当纹理被渲染到比其原始尺寸更小的区域时（纹理被缩小时），如何对纹理像素（texels）进行采样和插值。不同的滤镜类型会影响纹理的清晰度、锯齿和性能

应用:

js
const texture = new THREE.TextureLoader().load('texture.jpg');
// 设置缩小滤镜（例如使用高质量的三线性过滤）
texture.minFilter = THREE.LinearMipmapLinearFilter;

不同滤镜 ​

滤镜使用场景性能开销
NearestFilter需要锐利像素风格（复古游戏、像素艺术）最低
LinearFilter通用场景，中等质量需求低
NearestMipmapNearestFilter性能优先，但需要mipmap支持中
NearestMipmapLinearFilter平衡性能和质量（默认值）中
NearestMipmapLinearFilter需要锐利但平滑的纹理（如UI）中高
NearestMipmapLinearFilter最高质量，适合高分辨率纹理（如地形、PBR材质）最高