纹理贴图 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. 免费的纹理网站
报名课程后可查看完整文档
