Threejs - 材质 - 透明贴图

1,461 阅读2分钟

主要是通过Blender制作模型,PS制作透明贴图,然后在Threejs加载,展示透明贴图的效果,结合几个案例,来更好的体现透明贴图的应用场景。

简介

透明贴图,指的是带透明通道(alpha通道)材质贴图,可以在模型制作的过程中,通过一张贴图来展示细节,而透明贴图,可以在原本的基础上,附加更多的细节,是一种提升模型细节和加载效率的方法(因为只用图片就可以完成的效果,不需要更多的模型面数来体现细节部分

模型

新建一个立方体

  • 一个立方体
  • 添加材质节点

image.png

新建一个透明图片

  • 点击Image Texture中的new,就可以新建了(一个带alpha通道的贴图)

image.png

修改自发光颜色

  • 目的:给个基础色。。

image.png

UV展开

image.png

烘焙贴图

  • 进入cycles,点击烘焙
  • 这里没有勾选灯光,因为上面选择的自发光材质,所有就能看见颜色了!

image.png

保存贴图

  • 把这个带有透明贴图的贴图保存好
  • 保存为png格式,png支持透明通道!!!

image.png

PS处理

  • 用PS笔刷画点图案
  • 这里的图案,只是为了选区,在蓝色图片,做镂空效果

image.png

  • 保存一下!
  • 还是png格式!!

image.png

  • 两个图片的效果

image.png

Blender中修改

  • 需要两个操作
    1. 应用PS修改后的贴图,并连接alpha通道
    1. 修改Blender Mode 为 Alpha Clip!
  • 第二步必须的,在导出为gltf的时候,必须要显式声明该alpha通道,这样gltf才能有alpha的标识,Threejs才能识别它是透明贴图!

注:透明贴图,只支持白色和黑色,这里连接的alpha通道,其实是一张黑白图片,没有的地方就是黑色 - 为透明,有的地方就是白色 - 能显示!,这里直接连接,就没有直观的展示出来。。

image.png

ps模拟一下alpha通道图片。。

  • 这里没用到,但是,是可以这样制作alpha通道的!

image.png

导出为gltf

  • 最后一步了!导出为gltf格式!
  • 去gltf-view中加载一下看看!

image.png

  • 展示效果!
  • 这个就是在Threejs中的真实效果!
  • 带有透明通道的模型制作完成!
  • fps - 22

002.gif

案例

  • 最开始就是从这里学来的!
  • 从模型中学建模!!
  • 学习如何处理透明贴图!
  • 模型来源 - sketchfab.com

image.png

栏杆

  • 从栏杆上抠图。。。
  • 重点是UV展开部分

image.png

002.gif

总结

  • 透明贴图可以快速制作出效果,且效果还不错
  • 需要一个带透明通道的图片(png图片,png支持透明!)
  • 在Blender中有两步,连接alpha通道,修改Blend Mode为Alpha Clip(如果不修改,没有透明效果!)
  • 最后导出为gltf格式!

只要你心诚志坚,念念回首处,既是灵山。