webGL之three.js入门3

时间:2022-04-10 04:14:41

这几天在看*程翻译的[美]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: 粒子材质,适用于粒子系统,用来模拟雪花小雨什么的。


 

3Dmax的几种material
blinn有局部高光,lambert没有。因此,blinn适合做一些有反光的物体,例如玻璃,反光金属等等,lambert做一些不能反光的物体,例如木头、纸,桌子这类不存在高光的物体。 multi-layer(双非圆型高光):组合了两个 Anisotropic(非圆型高光),每一个反光都可以拥有不同的颜色和角度,适用于表现抛光的表面特殊效果,例如缎纹、丝绸和光芒四射的油漆等(其中roughness为粗糙度,值为0时,与使用Blinn效果一样)。 oren-nayer-Blinn它是Blinn的变种,看起来更柔和,更适合做一些较为粗糙的效果。例如织物和陶器等通常也可以用于模拟布、土坯和人的皮肤等效果。 phong (平滑):这种类型常用于表现玻璃制品、塑料等非常光滑的表面,它所呈现的反光是柔和的,这一点区别于 blinn(圆形高光)。 strauss (金属):也用于金属材质,它是metal的简化版,参数较少。但比金属材质做出的金属质感要好,制作的材质比较逼真。但不能调整自发光。 translicent shader(半透明):专用于表现半透明的物体表面,例如蜡烛、玉饰品、彩绘玻璃等。这是3D MAX5.0新增的类型。参数中:Translucent Color:指定透明色,即穿透物体的散射光颜色。FilterColor设置穿透一个半透明物体的光的颜色。Opacity可以设置浓度的百分比。

 


 

 

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

 再补充一点最近看到的有用的资料和网站,供学习之用。

threejs api doc中文翻译:http://techbrood.com/threejs/docs/,个人觉得可以当做参考手册查阅,总比去看英文api方便一些。

webGL中文网的翻译教程:http://www.hewebgl.com/article/articledir/1,看完了初级教程,我就来看书了。

webGL基础教程:http://www.hiwebgl.com/?p=42,看一点threejs,再看这个教程,就觉得世界都清晰了。或者:http://webgl-lesson.wysaid.org/

如果自己想编辑shader,就得学习GLSL语言:http://blog.csdn.net/racehorse/article/details/6593719。这个大牛的教程很全很厉害。

看完粒子系统可以试着写个太阳系:https://zhuanlan.zhihu.com/p/20796329

 

几个ThreeJS应用的网站,看看例子:

http://voxeljs.com/

https://3dwarehouse.sketchup.com/index.html

http://techbrood.com/?q=WebGL

 

ThreeJS的SVG库:d3-ThreeD库还有几个开源的svg库:D3.js(https://d3js.org/http://d3.decembercafe.org/index.html)和Raphael.js

 

如果想了解webVR,可以点一下以下教程:

cardBoard:http://blog.csdn.net/tencent_bugly/article/details/52414003

下面是几个相关的网页:

官方API:https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API

https://sketchfab.com/

https://vizor.io/

http://vr.chromeexperiments.com/

https://www.beloola.com/sfgiants

 https://www.gomo.se/

http://alteredqualia.com/

https://github.com/D1plo1d

http://www.floorplanner.com/pro

http://exocortex.com/

 

再就是数据可视化的库:我调研了好几个3D部分做的好的就是echarts和amcharts(free部分),highcharts二维数据可视化做的很炫酷。