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。

时间: 2024-11-08 16:24:49

webGL之three.js入门3--材料篇的相关文章

webGL之three.js入门4--ThreeJS Editor入门篇

因为工作需要,要看threejs editor的源码,顺便记录过程. github下载的源码目录是这样的 但是editor和其他文件夹内的内容的关联的,我需要将其独立出来并且编辑editor. 进入editor,three.js-master\editor,打开index.html,从源码可以看出来,里面引用了上级目录的一些.js文件. 所以,要独立出来,就把../examples/js文件夹下的所有内容拷贝到three.js-master\editor\js目录下.然后把index.html中

Node.js入门教程 第一篇 (环境配置及概念原理)

Node.js 概念 Node.js本质上是使用Google的V8引擎制作出来的服务框架.V8本身是Google为了解决Chrome浏览器的性能问题而制作的前端引擎(开源).本身依托于浏览器引擎,这也是为什么Node.js使用的是前端的JavaScript语言编程. V8的诞生是Google为了解决JavaScript的性能问题,用了内联缓存和隐藏类技术实现的前端引擎.V8使用C++编写,也因此V8可以在C++项目中完美兼容使用. V8被Google使用在大多数产品中,如Chrome浏览器,安卓

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

上一面讲述了向场景中添加物体对象.这一篇准备把每个功能点细细的讲述一遍,一方面是为了加深自己的理解.另一方面希望能够 帮助到有需要的人. 一.在学习WEBGL的时候,你应该先了解要创建一个WebGL程序需要哪些步骤.就跟弄梅菜扣肉一样,需要哪些步骤. 初始化WebGL绘图上下文 初始化着色器程序 建立模型和数据缓存 完成绘制和动画 这是一个面向过程编程.然而three.js不一样,是一个面向对象编程.主要构建三个对象 scene(场景) camera(相机) renderer(渲染器).. 这三

Web3D编程入门总结——WebGL与Three.js基础介绍

1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ 2 /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ 3 //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 4 //简单例程: 5 //根据To

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基

Ember.js 入门指南——控制器(controller)

ember new chapter5_controllers cd chapter5_controllers ember server 从本篇开始进入第五章控制器,controller在Ember2.0开始越来越精简了,职责也更加单一--处理逻辑. 下面是准备工作. 从新创建一个Ember项目,仍旧使用的是Ember CLI命令创建. 在浏览器执行项目,看到如下信息说明项目搭建成功. Welcome to Ember 1,控制器简介 控制器与组件非常相似,由此,在未来的新版本中很有可能组件将会完

Ember.js 入门指南——异步路由

本文将为你介绍路由的高级特性,这些高级特性可以用于处理项目复杂的异步逻辑. 关于单词promises,直译是承诺,但是个人觉得还是使用原文吧.读起来顺畅点. 1,promises(承诺) Ember的路由处理异步逻辑的方式是使用promises.简而言之,promises就是一个表示最终结果的对象.这个对象可能是fulfill(成功获取最终结果)也可能是reject(获取结果失败).为了获取这个最终值,或者是处理promises失败的情况都可以使用then方法,这个方法接受两个可选的回调方法,一

Ember.js 入门指南——model简介2

本文接上一篇<Ember.js 入门指南--model简介1>. 2,核心概念 声明:下面简介内摘抄至http://www.emberjs.cn/guides/models/#toc_. 1,store store是应用存放记录的中心仓库.你可以认为store是应用的所有数据的缓存.应用的控制器和路由都可以访问这个共享的store:当它们需要显示或者修改一个记录时,首先就需要访问store. DS.Store的实例会被自动创建,并且该实例被应用中所有的对象所共享. store可以看做是一个缓存

Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的<Ember.js 入门指南--{{link-to}} 助手>这篇文章应该初步了解了route.不过在这篇文章中只是简单介绍了路由是定义.路由层次,更深入的route将从本文开始逐一介绍. 当用户使用你的应用时,应用要在不同的状态之间切换.Ember提供了很多工具用于管理那些因应用规模改变而改变的状态. 讲route前先了解URL,在应用中大概会会有如下方式设置URL: 用户第一次加载应用的时: 用户手动改变URL,比如点击按钮之后跳