webGL之three.js入门3--材料篇

Posted 搭错车的小火柴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webGL之three.js入门3--材料篇相关的知识,希望对你有一定的参考价值。

这几天在看李鹏程翻译的[美]Jos Dirksen的《Three.js开发指南》,看到第八章了,现在来总结一下threejs中材料的相关知识。顺带也看完了上海交大的张雯莉出的《threejs入门指南》,我所学所写都是基于书和threejs官网的一些例子。

这两本书的电子版:链接: http://pan.baidu.com/s/1hrTqJGg 密码: e8ay


 Threejs r85版的材质解析:

相比之前的版本代码,新版本有所改动,各位同学看书的时候,最好对照着Github上面最新的代码。


LineBasicMaterial:可以用于THREE.Line几何体,从而创建着色的直线。 


LineDashedMaterial:类似line基础材质,但可以创建虚线效果。


MeshBasicMaterial(网格基础材质):为几何体赋予一种简单的颜色,或者显示几何体的线框 。忽略光线的作用,是什么颜色,就直接显示什么颜色,但也由于这种材质忽略了光照的作用,那么它也不会有任何阴影的效果。


MeshDepthMaterial(网格深度材质):根据网格到相机的距离,该材质决定如何给网格染色 ,根据物体上每一点到摄像机的远近来显示颜色,远的显示黑色,近的显示白色。

 

MeshNormalMaterial(网格法向材质):根据物体表面的法向量计算颜色 ,决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。在平面上添加表示法向量的箭头:使用THREE.ArrowHelper。

 

MeshLambertMaterial(网格朗伯材质):考虑光照的影响,可以创建颜色暗淡,不光亮的物体 。ambient:对环境光的反射能力 ,和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。 emissive:该材质发射的属性。材质的自发光颜色,可以用来表现光源的颜色 。不像是光源,只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。Lambert 材质(MeshLambertMaterial)是符合 Lambert 光照模型的材质。 Lambert 光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果,因而对于金属、镜子等需要镜面反射效果的物体就不适应,对于其他大部分物体的漫反射效果都是适用的。
Idiffuse = Kd * Id * cos(theta) ,Idiffuse 是漫反射光强, Kd 是物体表面的漫反射属性, Id 是光强, theta 是光的入射角弧度。

 

MeshPhongMaterial(网格phong式材质=镜面反射材质):考虑光照的影响,可以创建光亮的物体 。对于金属、镜面的表现尤为适合。 specular:指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色,将会得到一种更加类似金属的材质。如果设置为灰色,材质将变得更像塑料。 
Ispecular = Ks * Is * (cos(alpha)) ^ n ,Ispecular 是镜面反射的光强, Ks 是材质表面镜面反射系数, Is 是光源强度,alpha 是反射光与视线的夹角, n 是高光指数,越大则高光光斑越小。 shininess 属性控制光照模型中的 n 值。

 

MeshFaceMaterial(网格面材质):这是一种容器,可以在该容器中为物体的各个表面上设置不同的颜色 。

 

ShaderMaterial(着色器材质):使用自定义的着色器程序,直接控制顶点的放置方式,以及像素的着色方式。个人觉得这个比较复杂,但是应用应该比其他几种都要广泛一点,需要一些webGL的基础。

 

SpriteMaterial: 粒子材质,适用于粒子系统,用来模拟雪花小雨什么的。

 


 补充:R69以后,粒子系统中的ParticleBasicMaterial 重命名为PointCloudMaterial,ParticleSystem重命名为PointCloud,貌似删掉了Particle这个组件,粒子系统里面只用Sprite。

 







以上是关于webGL之three.js入门3--材料篇的主要内容,如果未能解决你的问题,请参考以下文章

Web3D|基于WebGL的Three.js框架|入门篇

Three.js入门篇创建一个场景

three.js入门系列之材质

第135篇:Three.js基础入门

three.js入门3

three.js入门——画一个3D正方体