返回介绍

材质效果

发布于 2021-07-10 20:14:15 字数 3296 浏览 961 评论 0 收藏 0

前面案例中几何体对应网格模型材质只是设置了一个颜色,实际渲染的时候往往会设置其他的参数,比如实现玻璃效果要设置材质透明度,一些光亮的表面要添加高光效果。

半透明效果

更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数,添加opacitytransparent属性,opacity的值是0~1之间,transparent表示是否开启透明度效果, 默认是false表示透明度设置不起作用,值设置为true,网格模型就会呈现透明的效果,使用下面的代码替换原来的球体网格模型的材质, 刷新浏览器,通过鼠标旋转操作场景,可以看到半透明的球体和立方体颜色叠加融合的效果。

var sphereMaterial=new THREE.MeshLambertMaterial({
    color:0xff0000,
    opacity:0.7,
    transparent:true
});//材质对象

材质对象的一些属性可以在构造函数参数中设置,也可以访问材质对象的属性设置。

material.opacity = 0.5 ;
material.transparent = true ;

材质常见属性

材质属性简介
color材质颜色,比如蓝色0x0000ff
wireframe将几何图形渲染为线框。 默认值为false
opacity透明度设置,0表示完全透明,1表示完全不透明
transparent是否开启透明,默认false

添加高光效果

直接使用下面的代码替换上面的透明度材质即可,刷新浏览器可以看到球体表面的高光效果。

var sphereMaterial=new THREE.MeshPhongMaterial({
    color:0x0000ff,
    specular:0x4488ee,
    shininess:12
});//材质对象

处在光照条件下的物体表面会发生光的反射现象,不同的表面粗糙度不同,宏观上来看对光的综合反射效果,可以使用两个反射模型来概括,一个是漫反射,一个是镜面反射, 使用渲染软件或绘画的时候都会提到一个高光的概念,其实说的就是物理光学中镜面反射产生的局部高亮效果。实际生活中的物体都是镜面反射和漫反射同时存在,只是哪个占得比例大而已, 比如树皮的表面更多以漫反射为主基本没有体现出镜面反射,比如一辆轿车的外表面在阳光下你会看到局部高亮的效果,这很简单汽车表面经过抛光等表面处理粗糙度非常低, 镜面反射效果明显,对于three.js而言漫反射、镜面反射分别对应两个构造函数MeshLambertMaterial()、MeshPhongMaterial(),通过three.js引擎你可以很容易实现这些光照模型,不需要自己再使用原生WebGL实现,更多关于光照模型的知识可以参考文章《WebGL_course光照渲染立方体》或计算机图形学的相关书籍。

前面案例都是通过构造函数MeshLambertMaterial()实现漫反射进行渲染,高光效果要通过构造函数MeshPhongMaterial()模拟镜面反射实现,属性specular表示球体网格模型的高光颜色,改颜色的RGB值会与光照颜色的RGB分量相乘, shininess属性可以理解为光照强度的系数,初学的的时候这些细节如果不清楚,不用深究,每个人的基础不同,理解问题的深度和角度不同,比如高光,学习过计算机图形学的会联想到镜面反射模型和物理光学, 从事过与美术相关工作,都知道需要的时候会给一个物体添加高光,视觉效果更加高亮,因此对于构造函数MeshPhongMaterial()的参数设置不太清除也没关系,对于零基础的读者本节课的要求就是有个简单印象就可以, 站在黑箱外面理解黑箱;对于有WebGL基础的,可以思考three.js引擎构造函数实际封装了哪些WebGL API和图形学算法,站在黑箱里面理解黑箱,如果是你你会怎么封装开发一个三维引擎,这样你可以从底层理解上层的问题, 保证学习的连贯性;如果你使用过其它的三维建模渲染软件,那就使用three.js这个黑箱类比一个你熟悉的黑箱,通过类比降低学习难度,比如你可以打开3dmax软件设置一个材质的高光,体验下视觉效果。

材质类型

threejs提供了很多常用的材质效果,这些效果本质上都是对WebGL着色器的封装,对于开发者来说直接使用就可以,这里不再做过多介绍,大家现有一个印象即可。

材质类型功能
MeshBasicMaterial基础网格材质,不受光照影响的材质
MeshLambertMaterialLambert网格材质,与光照有反应,漫反射
MeshPhongMaterial高光Phong材质,与光照有反应
MeshStandardMaterialPBR物理材质,相比较高光Phong材质可以更好的模拟金属、玻璃等效果

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文