主要是通过Blender制作模型,PS制作透明贴图,然后在Threejs加载,展示透明贴图的效果,结合几个案例,来更好的体现透明贴图的应用场景。
简介
透明贴图,指的是带透明通道(alpha通道)材质贴图,可以在模型制作的过程中,通过一张贴图来展示细节,而透明贴图,可以在原本的基础上,附加更多的细节,是一种提升模型细节和加载效率的方法(因为只用图片就可以完成的效果,不需要更多的模型面数来体现细节部分)
模型
新建一个立方体
- 一个立方体
- 添加材质节点
新建一个透明图片
- 点击Image Texture中的new,就可以新建了(一个带alpha通道的贴图)
修改自发光颜色
- 目的:给个基础色。。
UV展开
烘焙贴图
- 进入cycles,点击烘焙
- 这里没有勾选灯光,因为上面选择的自发光材质,所有就能看见颜色了!
保存贴图
- 把这个带有透明贴图的贴图保存好
- 保存为png格式,png支持透明通道!!!
PS处理
- 用PS笔刷画点图案
- 这里的图案,只是为了选区,在蓝色图片,做镂空效果
- 保存一下!
- 还是png格式!!
- 两个图片的效果
Blender中修改
- 需要两个操作
-
- 应用PS修改后的贴图,并连接alpha通道
-
- 修改Blender Mode 为 Alpha Clip!
- 第二步必须的,在导出为gltf的时候,必须要显式声明该alpha通道,这样gltf才能有alpha的标识,Threejs才能识别它是透明贴图!
注:透明贴图,只支持白色和黑色,这里连接的alpha通道,其实是一张黑白图片,没有的地方就是黑色 - 为透明,有的地方就是白色 - 能显示!,这里直接连接,就没有直观的展示出来。。
ps模拟一下alpha通道图片。。
- 这里没用到,但是,是可以这样制作alpha通道的!
导出为gltf
- 最后一步了!导出为gltf格式!
- 去gltf-view中加载一下看看!
- 展示效果!
- 这个就是在Threejs中的真实效果!
- 带有透明通道的模型制作完成!
- fps - 22
案例
树
- 最开始就是从这里学来的!
- 从模型中学建模!!
- 学习如何处理透明贴图!
- 模型来源 - sketchfab.com
栏杆
- 从栏杆上抠图。。。
- 重点是UV展开部分
总结
- 透明贴图可以快速制作出效果,且效果还不错
- 需要一个带透明通道的图片(png图片,png支持透明!)
- 在Blender中有两步,连接alpha通道,修改Blend Mode为Alpha Clip(如果不修改,没有透明效果!)
- 最后导出为gltf格式!
只要你心诚志坚,念念回首处,既是灵山。