Skip to content

纹理贴图 Texture

纹理图片(或canvas/video等)映射到物体表面, 或者作为反射/折射贴图。也就是物体的皮肤

1. 纹理贴图分类

贴图属性分类 贴图分类


  • [颜色贴图 map] 存储颜色信息

  • [凹凸贴图 height] 高度贴图, 也称为视差贴图, 性能开销更大, 会移动表面纹理的可见区域,从而实现表面遮挡效果。8位数灰度图,图片像素的灰度值表示几何表面(Z轴)的高低深度. 通常情况下,用于高度贴图的灰度图像也适合用于遮挡贴图(AO贴图)(需要第二组UV)

  • [法线贴图 normal] 通过RGB三个分量分别表示法向量的xyz三个方向, 并且通过图片保留几何体表面的几何细节

  • [环境遮挡贴图 ambientOcclusion] 简称AO贴图, 模拟物体之间所产生的阴影, 在不打光的时候增加体积感

  • [光滑度贴图 roughness]

  • [透明度贴图 alphaMap] 灰度纹理,用于控制整个表面的不透明度。(黑色:完全透明;白色:完全不透明)

  • canvas画布、视频纹理 (CanvasTexture, VideoTexture)

每种 Mesh 都有不同的贴图属性, 比如:

MeshLambertMaterial、MeshBasicMaterial 没有凹凸、法线贴图属性

MeshPhongMaterial 有颜色贴图, 凹凸贴图, 法线贴图

...

贴图合成效果

2. 创建纹理对象

纹理映射原理

纹理映射

纹理映射原理

报名课程后可查看完整文档

使用image加载贴图

Demo4-0

报名课程后可查看完整文档

纹理属性解析

纹理图片的尺寸应当是2的次方

使用threejs内置方法加载纹理

Demo4-1

报名课程后可查看完整文档

纹理应用

Demo4-3 如何应用到物体表面上

报名课程后可查看完整文档

color 属性会影响纹理贴图效果

Demo4-4 给物体每个面加载不同的纹理

报名课程后可查看完整文档

Demo4-5 同时加载多个纹理

报名课程后可查看完整文档

Demo4-7 透明度纹理

报名课程后可查看完整文档

纹理显示算法与mipmap

Demo4-2

报名课程后可查看完整文档

Mipmap 图像化解释

Mipmap的优点与缺点

优点: 报名课程后可查看完整文档

缺点:报名课程后可查看完整文档

3. 不同的纹理贴图

Demo4-8 环境遮挡贴图

报名课程后可查看完整文档

在纹理较暗的地方添加阴影, 因此必须设置第二组UV才会生效

原理: 报名课程后可查看完整文档

Demo4-9 凹凸贴图

报名课程后可查看完整文档

需要加载颜色贴图

只影响光照, 不影响对象的几何形状

Demo4-10 位移贴图

报名课程后可查看完整文档

Demo4-11 法线贴图

报名课程后可查看完整文档

法线示意

Demo4-12 光滑度贴图

报名课程后可查看完整文档

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

Demo4-13 金属贴图

报名课程后可查看完整文档

需要使用支持金属贴图的材质

搭配 roughnessMap 和其他贴图会更真实

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

Demo4-14 环境贴图

报名课程后可查看完整文档

  • 使用 CubeTextureLoader 用来加载立方纹理资源

  • CubeTextureLoader.load 数组长度为6的图像数组,数组内容为URL, 加载顺序是固定的: 左右(px, nx), 上下(py, ny), 前后(pz, nz)

  • 使用 cubeTextureLoader.setPath('/public/textures/Material_17412') 加载资源时需注意打包工具是否支持

  • 需要选择支持envMap属性的材质

  • 表面光滑程度 roughness, envMapIntensity, metalness 等属性都会影响物体上环境贴图的效果

Demo4-15 高光贴图

报名课程后可查看完整文档

4. 贴图对象属性

Demo4-16 纹理属性

报名课程后可查看完整文档

5. 免费的纹理网站

报名课程后可查看完整文档

Released under the CC BY-SA License.