&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
使用Three.js的材质Script
摘要：1.three.js提供哪些材质?MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框MeshDepthMaterial(网格深度材质)/根据网格到相机的举例,这种材质决定如何给网格染色MeshNormalMaterial(网格法向材质)/这是一种简单的材质,根据物体表面的方向向量计算颜色MeshFaceMaterial(网格面材质)/这是一个容器,可以在这个容器里为物体的各个表面指定不同的颜色MeshLamb
1.three.js提供哪些材质?
MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框
MeshDepthMaterial(网格深度材质)/根据网格到相机的举例,这种材质决定如何给网格染色
MeshNormalMaterial(网格法向材质)/这是一种简单的材质,根据物体表面的方向向量计算颜色
MeshFaceMaterial(网格面材质)/这是一个容器,可以在这个容器里为物体的各个表面指定不同的颜色
MeshLambertMaterial(网格朗伯材质)/这种材质会考虑光照的影响,可以用来创建颜色暗淡的、不光亮的物体
MeshPhongMaterial(网格Phong式材质)/这种材质会考虑光照的影响,而且可以用来创建光亮的物体
ShaderMaterial(着色器材质)/这种材质允许使用自定义的着色器程序,直接控制顶点的仿制方式,以及像素的着色方式
LineBasicMaterial(直线基础材质)/这种材质可以用于THREE.Line几何体,从而创建着色的直线
LineDashedMaterial(虚线材质)/这种材质跟直线基础材质一样,不过可以用来创建出一种虚线效果
2.MeshBasicMaterial常用属性
color/设置材质的颜色
wireframe/设置这个属性可以将材质渲染成线框。对调试非常有利
wireframeLinewidth/如果已经打开了wireframe,这个属性可以定义线框中线的宽度
wireframeLinecap(线框线端点)/这个属性定义线框模式下顶点间线段的端点如何显示。可包括butt(平)、round(圆)、squre(方)。默认值是round。WebGlRenderer不支持该属性
shading(着色)/该属性定义如何着色。可选的值是THREE.SmoothShading和THREE.FlatShading。
vertexColors(顶点颜色)/可以通过这个属性为每个顶点定义不同的颜色。该属性在使用CanvasRenderer时不起作用,但可以在使用WebGLRenderer时起作用。
fog(雾化)/该属性指定当前材质是否会受到全局雾化效果设置的影响。
初始化方式: var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff}); mashMaterial.visible =
3.基于深度着色的MeshDepthMaterial
使用这种材质的物体,其外观不是有光照或某个材质属性决定的;而是由物体到相机的距离决定的。可以将这种材质与其他材质想结合,从而很容易地创建出逐渐消失的效果。&&&
4.融合材质
我们知道MeshDepthMaterial不能设置颜色,一切都是有材质的默认属性决定的。但是,three.js可通过联合材质创建出新效果。使用方式如下: ... var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); var cubeMaterial = new THREE.MeshDepthMaterial(); var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending}); var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]); cube.children[1].scale.set(0.99, 0.99, 0.99);...
展示效果如下:
这些方块可以从MeshDepthMaterial对象获得渐变效果,从MeshBasicMaterial获取颜色。为了使颜色能够有渐变效果,必须设置MeshBasicMaterial的transparent为true,设置融合blending的方式。在查看最后一行代码,如何不这样设置,在渲染的时候就会出现闪烁。
5.计算法向颜色的MeshNormalMaterial
MeshNormalMaterial会根据每个面的法向量来决定颜色,如果是一个球面,由于每个面的法向量不一样,所有每个面的颜色也不一样。该材质最主要的一个属性是shading,设置着色的方式:THREE.FlatShading表示平面着色、THREE.SmoothShading表示平滑作色。两个着色差别如下图所示:
5.为每个面指定材质的MeshFaceMaterial
通过MeshFaceMaterial可以为几何体的每一个面指定不同的材质。加入你有一个方块,上面有六个面,你可以用这种材质来为每个面指定一个材质。例如: var group = new THREE.Mesh();var mats = [];mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));var faceMeterial = new THREE.MeshFaceMaterial(mats);var cubeGeom = new THREE.CubeGeometry(3, 3, 3);var cube = new THREE.Mesh(cubeGeom, faceMeterial);scene.add(cube);
6.暗淡、不光亮表面材质MeshLambertMaterial
两个比较重要的属性ambient和emissive。ambient(环境色)跟AmbientLight光源一起使用。这个颜色会与AmbientLight光源的颜色相乘。默认值为白色;emissvie(发射的)是该材质发射的颜色。它其实并不像一个光源,只是一种纯粹的、不收其他光照影响的颜色。默认值为黑色。实例化方式: var meshMateial = new THREE.MeshLambertMaterial({color: 0x7777ff});
7.用于光亮表面的MeshPhongMaterial
除了基础属性以及和MeshLambertMaterial一样的ambient和emissive属性。还包括:specular(镜面的)/该属性指定该材质的光亮程度及其高亮部分的颜色。如果设置成和color一样的颜色,将会得到一种更加类似金属的材质。如果设置为grey,材质变的更加塑料。&& shininess/指定高亮部分的亮度,默认为30
8.使用ShaderMaterial创建自己的着色器
ShaderMaterial是Three.js库中功能最丰富、最复杂的一种材质。通过它,可以使用自己定制的着色器,直接在WebGL环境中运行。ShaderMaterial包含的几个常用属性wireframe、wireframeLinewidth、shading、vertexColors、fog其他材质已经介绍过。ShaderMaterial还包含几个特别属性:&&& fragementShader(片元着色器)/这个着色器定义的是每个传入的像素颜色&&& vertexShader(顶点着色器)/这个着色器允许你修改每一个传入的顶点的位置&&& uniforms/通过这个属性可以向你的着色器发信息。同样的信息会发送到每一个顶点和片元&&& defines/这个属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量&&& attributes/改属性可以修改每个顶点和片元。通常用来传递位置数据和法向量相关的数据。如果要用这个属性,anemia你要为几何体中的所有顶点提供信息&&& lights/定义光照数据是否传递给着色器。默认为false
在创建ShaderMaterial,必须要传递两个重要的属性vertexShader和fragmentShader。两个都是对应的一段WebGL顶点和片元着色器源码字符串。例如我们在js中先定义一段vertexShader代码: &script id=&vertex-shader& type=&x-shader/x-vertex&& varying vec2 vUv; void main() { vec3 posChanged = posChanged.x = posChanged.x*(abs(sin(time*1.0))); posChanged.y = posChanged.y*(abs(cos(time*1.0))); posChanged.z = posChanged.z*(abs(sin(time*1.0))); //gl_Position = projectionMatrix * modelViewMatrix * vec4(position*(abs(sin(time)/2.0)+0.5),1.0); gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0); }&/script&
由于几个几何体有多个面,所有一般都会写多个fragmentShader,每一个面包含对应一个fragmentShader。fragmentShader我们可以从网站(https://www.shadertoy.com)上拷贝各种各样的片元着色器。下面是创建一个ShaderMaterial的例子: function createMaterial(vertexShader, fragmentShader){var verShader = document.getElementById(vertexShader).innerHTML;var fragShader = document.getElementById(fragmentShader).innerHTML;var attributes = {};var uniforms = { time: {type: 'f', value: 0.2}, scale: {type: 'f', value: 0.2}, alpha: {type: 'f', value: 0.6}, resolution: {type: 'v2', value: new THREE.Vector2()}}uniforms.resolution.value.x = window.innerWuniforms.resolution.value.y = window.innerHvar meshMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, attributes: attributes, vertexShader: verShader, fragmentShader: fragShader, transparent: true});return meshM}
我们设置了attributes、uniforms参数。在初始化ShaderMaterial的时候传递进去。最后创建一个几何体。例如: var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);var meshMaterial1 = createMaterial(&vertex-shader&, &fragment-shader-1&);var meshMaterial2 = createMaterial(&vertex-shader&, &fragment-shader-2&);...var material = new THREE.MeshFaceMaterial([meshMaterial1, meshMaterial2, meshMaterial3, meshMaterial4, meshMaterial5, meshMaterial6]);var cube = new THREE.Mesh(cubeGeometry, material);scene.add(cube);
9.线段几何体材质LineBasicMaterial
LineBasiceMaterial包含的属性如下所示:
color/指定线的颜色。如果指定了vertexColors,这个属性就会被忽略。
linewidth/该属性定义线的宽度
LineCap/该属性定义顶点建的线段端点如何显示。可选值包括butt(平)、round(圆)、square(方),默认值是round。WebGLRenderer不支持该属性。
LineJoin/该属性定义的是线段连接点如何显示。WebGLRenderer不支持该属性
vertexColors/将这个属性设置成THREE.VecterColors值,就可以为每个顶点指定一个颜色
fog/指定当期物体是否受全局雾化效果影响
下面的代码是使用LineBasicMaterial根据Gosper曲线创建的连线显示代码: var points = gosper(4, 60);var lines = new THREE.Geometry();var colors = [];var i = 0;points.forEach(function(e){ lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y)); colors[i] = new THREE.Color(0xffffff); colors[i].setHSL(e.x/100 + 0.5, (e.y * 20)/300, 0.8); // 设置HSL颜色,提供色调(hue)、饱和度(saturation)、亮度(lightness) i++;});lines.colors =var material = new THREE.LineBasicMaterial({ opacity: 1.0, linewidth: 1, vertexColors: THREE.VertexColors});var line = new THREE.Line(lines, material);line.position.set(25, -30, -60);
代码创建一个THREE.Geometry实例,为每个坐标创建一个顶点,把它放进该实例的线段属性中。对于每个坐标我们还会计算一个颜色值,用来设置colors属性。
线段还有另外一个LineDashedMaterial材质,和LineBasicMaterial材质功能相似。区别在于显示线段时包含了短划线和空格。包含属性有scale、dashSize(断线长度)、gapSize(间隔长度)。另外还需注意的是必须要调用THREE.Geometry的computeLineDistance()方法,如果不调用,间隔就不会显示出来。
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
使用Three.js的材质Script相关信息，包括
的信息，所有使用Three.js的材质Script相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International商域无疆 - 本博客专注于敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS...
three.js 源码注释（四十八）Material /MeshBasicMaterial.js
商域无疆 ()
本文遵循“”创作公用协议
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中Material/MeshBasicMaterial.js文件的注释.
更多更新在 :
* @author mrdoob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
* parameters = {
color: &hex&,
opacity: &float&,
map: new THREE.Texture( &Image& ),
lightMap: new THREE.Texture( &Image& ),
specularMap: new THREE.Texture( &Image& ),
alphaMap: new THREE.Texture( &Image& ),
envMap: new THREE.TextureCube( [posx, negx, posy, negy, posz, negz] ),
combine: THREE.Multiply,
reflectivity: &float&,
refractionRatio: &float&,
shading: THREE.SmoothShading,
blending: THREE.NormalBlending,
depthTest: &bool&,
depthWrite: &bool&,
wireframe: &boolean&,
wireframeLinewidth: &float&,
vertexColors: THREE.NoColors / THREE.VertexColors / THREE.FaceColors,
skinning: &bool&,
morphTargets: &bool&,
fog: &bool&
///MeshBasicMaterial方法根据参数parameters创建mesh(网格)的基本材质类型,parameters参数的格式看上面.MeshBasicMaterial对象的功能函数采用
/// 定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material.
///&summary&MeshBasicMaterial&/summary&
///&param name ="parameters" type="String"&string类型的JSON格式材质属性参数&/param&
///&returns type="MeshBasicMaterial"&返回MeshBasicMaterial,线段材质.&/returns&
THREE.MeshBasicMaterial = function ( parameters ) {
THREE.Material.call( this ); //调用Material对象的call方法,将原本属于Material的方法交给当前对象MeshBasicMaterial来使用.
this.color = new THREE.Color( 0xffffff ); // emissive //颜色属性,自发光颜色,颜色值用十六进制数值,默认是0xffffff
this.map = //普通贴图贴图,默认为null
/*********************************为什么要用Lightmapping**************************************************************************
参考:http://blog.sina.com.cn/s/blog_5b6cb9500101cplo.html
1.为什么要用Lightmapping?
简单来说就是实时灯光计算十分耗时，随着光源越多会倍增计算耗时。使用Lightmap模拟灯光带来的效果，便不用去计算灯光，会带来性能上
的大大提升。当然你不用灯光效果也是没问题的，具体还是看项目需求。最简单的直接在3dmas或maya里面烘培完贴图顶点色也行。
***************************************************************************************************************************/
this.lightMap = //光照贴图,默认为null
this.specularMap = //高光贴图,默认为null
this.alphaMap = //透明通道提额度,默认为null
this.envMap = //环境贴图,默认为null
// TEXTURE CONSTANTS
//纹理常量,用来设置材质混合模式,有
//THREE.MultiplyOperation,
相乘,photoshop中的图层混合翻译成正片叠底
//THREE.MixOperation,
//混合模式
//THREE.AddOperation,
//增加模式
//参考: http://avnpc.com/pages/photoshop-layer-blending-algorithm
//TODO: 是不是还可以实现更多的模式?
// Normal正常模式
// Dissolve溶解模式
// Dancing Dissolve动态溶解模式
// Darken变暗模式
// Multiply正片叠底模式
// Linear Burn线性加深模式
// Color Burn颜色加深模式
// Classic Color Burn为兼容早版本的Color Burn模式
// Add增加模式
// Lighten变亮模式
// Screen屏幕模式
// Linear Dodge线性减淡模式
// Overlay叠加模式
// Soft Light柔光模式
// Hard Light强光模式
// Liner Light线性加光模式
// Vivid Light清晰加光模式
// Din Light阻光模式
// Hard Mix强光混合模式
// Difference差别模式
// Classic Difference兼容老版本的差别模式
// Exclusion排除模式
// Hue色相模式
// Saturation饱和度模式
// Color颜色模式
// Luminosity高度模式。
// 上面所列的层模式，是通上下层的颜色通道混合产生影响变化，而下层的层模式则是通过层的Alpha通道影响混合变化。
// Stencil Alpha：Alpha通道模式
// Stencil Luma：亮度模式
// Slihouette Alpha：Alpha通道轮廓
// Slihouette Luma：亮度轮廓
// Alpha Add：Alpha添加
// Luminescent Premul：冷光模式。
/****************混合模式公式***************************************************************************************************************
Photoshop图层混合模式计算公式大全
关于photoshop的图层混合模式，大家一定都非常熟悉了，我在这里把各种混合模式的计算公式都详细的描述一便，希望能够对大家理解图层的混合模式
有所帮助，编写仓促，不足之处请多批评指正。
混合模式可以将两个图层的色彩值紧密结合在一起，从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面我将介绍photoshop cs2
中所有混合模式的数学计算公式。另外还介绍了不透明度。下面所介绍的公式仅适用于RGB图像。对于Lab颜色图像而言，这些公式将不再适用。
Opacity 不透明度
C=d*A+(1-d)*B
相对于不透明度而言，其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系：100%的不透明度就是0%的透明度。该混合模式相对来说比较简单，在该混合模式下，
如果两个图层的叠放顺序不一样，其结果也是不一样的（当然50%透明除外）。
该公式中，A代表了上面图层像素的色彩值（A=像素值/255），d表示该层的透明度，B代表下面图层像素的色彩值（B=像素值/255），C代表了混合像素的色彩
值（真实的结果像素值应该为255*C）。该公式也应用于层蒙板，在这种情况下，d代表了蒙板图层中给定位置像素的亮度，下同，不再叙述。
Darken 变暗
该模式通过比较上下层像素后取相对较暗的像素作为输出，注意，每个不同的颜色通道的像素都是独立的进行比较，色彩值相对较小的作为输出结果，
下层表示叠放次序位于下面的那个图层，上层表示叠放次序位于上面的那个图层，下同，不再叙述。
Lighten 变亮
该模式和前面的模式是相似，不同的是取色彩值较大的（也就是较亮的）作为输出结果。
Multiply 正片叠底
该效果将两层像素的标准色彩值（基于0..1之间）相乘后输出，其效果可以形容成：两个幻灯片叠加在一起然后放映，透射光需要分别通过这两个幻灯片，
从而被削弱了两次。
Screen 滤色
C=1-(1-A)*(1-B)也可以写成 1-C=(1-A)*(1-B)
该模式和上一个模式刚好相反，上下层像素的标准色彩值反相后相乘后输出，输出结果比两者的像素值都将要亮（就好像两台投影机分别对其中一个图层进行
投影后，然后投射到同一个屏幕上）。从第二个公式中我们可以看出，如果两个图层反相后，采用Multiply模式混合，则将和对这两个图层采用Screen模式混合后反相的结果完全一样。
Color Dodge 颜色减淡
该模式下，上层的亮度决定了下层的暴露程度。如果上层越亮，下层获取的光越多，也就是越亮。如果上层是纯黑色，也就是没有亮度，则根本不会影响下层。
如果上层是纯白色，则下层除了像素为255的地方暴露外，其他地方全部为白色（也就是255，不暴露）。结果最黑的地方不会低于下层的像素值。
Color Burn 颜色加深
C=1-(1-B)/A
该模式和上一个模式刚好相反。如果上层越暗，则下层获取的光越少，如果上层为全黑色，则下层越黑，如果上层为全白色，则根本不会影响下层。
结果最亮的地方不会高于下层的像素值。
Linear Dodge 线形减淡
将上下层的色彩值相加。结果将更亮。
Linear Burn 线形加深
如果上下层的像素值之和小于255，输出结果将会是纯黑色。如果将上层反相，结果将是纯粹的数学减。
Overlay 叠加
B&=0.5: C=2*A*B
B&0.5: C=1-2*(1-A)*(1-B)
依据下层色彩值的不同，该模式可能是Multiply，也可能是Screen模式。
上层决定了下层中间色调偏移的强度。如果上层为50%灰，则结果将完全为下层像素的值。如果上层比50%灰暗，则下层的中间色调的将向暗地方偏移，
如果上层比50%灰亮，则下层的中间色调的将向亮地方偏移。对于上层比50%灰暗，下层中间色调以下的色带变窄（原来为0~2*0.4*0.5，现在为0~2*0.3*0.5），
中间色调以上的色带变宽（原来为2*0.4*0.5~1，现在为2*0.3*0.5~1）。反之亦然。
Hard Light 强光
A&=0.5: C=2*A*B
A&0.5: C=1-2*(1-A)*(1-B)
该模式完全相对应于Overlay模式下，两个图层进行次序交换的情况。如过上层的颜色高于50%灰，则下层越亮，反之越暗。
Soft Light 柔光
A&=0.5: C=(2*A-1)*(B-B*B)+B
A&0.5: C=(2*A-1)*(sqrt(B)-B)+B
该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。结果将是一个非常柔和的组合。
Vivid Light 亮光
A&=0.5: C=1-(1-B)/2*A
A&0.5: C=B/(2*(1-A))
该模式非常强烈的增加了对比度，特别是在高亮和阴暗处。可以认为是阴暗处应用Color Burn和高亮处应用Color Dodge。
Linear Light 线形光
相对于前一种模式而言，该模式增加的对比度要弱些。其类似于Linear Burn,只不过是加深了上层的影响力。
Pin Light 点光
B&2*A-1: C=2*A-1
2*A-1&B&2*A: C=B
B&2*A: C=2*A
该模式结果就是导致中间调几乎是不变的下层，但是两边是Darken和Lighte年模式的组合。
Hard Mix 实色混合
A&1-B: C=0
A&1-B: C=1
该模式导致了最终结果仅包含6种基本颜色，每个通道要么就是0，要么就是255。
Difference 差值
上下层色调的绝对值。该模式主要用于比较两个不同版本的图片。如果两者完全一样，则结果为全黑。
Exclusion 排除
C=A+B-2*A*B
亮的图片区域将导致另一层的反相，很暗的区域则将导致另一层完全没有改变。
HcScYc =HASBYB
输出图像的色调为上层，饱和度和亮度保持为下层。对于灰色上层，结果为去色的下层。
Saturation 饱和度
HcScYc =HBSAYB
输出图像的饱和度为上层，色调和亮度保持为下层。
Color 颜色
HcScYc =HASAYB
输出图像的亮度为下层，色调和饱和度保持为上层。
Luminosity 亮度
HcScYc =HBSBYA
输出图像的亮度为上层，色调和饱和度保持为下层。
Dissolve 溶解
该模式根本不是真正的溶解，因此并不是适合Dissolve这个称谓，其表现仅仅和Normal类似。其从上层中随机抽取一些像素作为透明，
使其可以看到下层，随着上层透明度越低，可看到的下层区域越多。如果上层完全不透明，则效果和Normal不会有任何不同。
******************************混合模式公式**************************************************************************************************/
this.combine = THREE.MultiplyO //混合模式
this.reflectivity = 1; //反射率,默认为1
this.refractionRatio = 0.98; //折射率,默认为0.98
this.fog = //雾效,默认开启
// shading
// 着色处理
/*********************着色方式**************************************************************************
绝大多数的3D物体是由多边形（polygon）所构成的，它们都必须经过某些着色处理的手续，才不会以线结构（wireframe）的方式显示。
这些着色处理方式有差到好，依次主要分为FlatShading、GouraudShading、PhoneShading、ScanlineRenderer、Ray-Traced。
FlatShading（平面着色）
也叫做“恒量着色”，平面着色是最简单也是最快速的着色方法，每个多边形都会被指定一个单一且没有变化的颜色。这种方法虽然会产生出不真实
的效果，不过它非常适用于快速成像及其它要求速度重于细致度的场合，如：生成预览动画。
GouraudShading（高洛德着色/高氏着色）
这种着色的效果要好得多，也是在游戏中使用最广泛的一种着色方式。它可对3D模型各顶点的颜色进行平滑、融合处理，将每个多边形上的每个点
赋以一组色调值，同时将多边形着上较为顺滑的渐变色，使其外观具有更强烈的实时感和立体动感，不过其着色速度比平面着色慢得多。
PhoneShading（补色着色）
首先，找出每个多边形顶点，然后根据内插值的方法，算出顶点间算连线上像素的光影值，接着再次运用线性的插值处理，算出其他所有像素高氏着
色在取样计算时，只顾及每个多边形顶点的光影效果，而补色着色却会把所有的点都计算进去。
ScanlineRenderer（扫描线着色）
这是3ds Max的默认渲染方式，它是一种基于一组连续水平线的着色方式，由于它渲染速度较快，一般被使用在预览场景中。
Ray-Traced（光线跟踪着色）
光线跟踪是真实按照物理照射光线的入射路径投射在物体上，最终反射回摄象机所得到每一个像素的真实值的着色算法，由于它计算精确，所得到的
图象效果优质，因此制作CG一定要使用该选项。
Radiosity（辐射着色）
这是一种类似光线跟踪的特效。它通过制定在场景中光线的来源并且根据物体的位置和反射情况来计算从观察者到光源的整个路径上的光影效果。在
这条线路上，光线受到不同物体的相互影响，如：反射、吸收、折射等情况都被计算在内。
glShadeModel( GLenum mode )可以设置的着色模型有：GL_SMOOTH和GL_FLAT
GL_FLAT恒定着色：对点，直线或多边形采用一种颜色进行绘制，整个图元的颜色就是它的任何一点的颜色。
GL_SMOOTH平滑着色：用多种颜色进行绘制，每个顶点都是单独进行处理的，各顶点和各图元之间采用均匀插值。
*********************着色方式**************************************************************************/
this.shading = THREE.SmoothS //着色方式,THREE.SmoothShading平滑着色：用多种颜色进行绘制，每个顶点都是单独进行处理的，各顶点和各图元之间采用均匀插值。
//还有以下几种THREE.NoShading = 0;
//不着色????
//THREE.FlatShading = 1;
//GL_FLAT恒定着色：对点，直线或多边形采用一种颜色进行绘制，整个图元的颜色就是它的任何一点的颜色。
this.wireframe =
//以线框方式渲染几何体.默认为false
this.wireframeLinewidth = 1;
//线框的宽度.
this.wireframeLinecap = 'round'; //线框的线段端点的样式,默认为round,和html的canvas里的属性一样也有"butt", "round", "square"
this.wireframeLinejoin = 'round'; //线框的线段边角的类型，当两条线交汇时,默认为round,和html的canvas里的属性一样也有"round", "bevel", "miter"
//TODO: 要给线框设置线型怎么办?
this.vertexColors = THREE.NoC//顶点颜色,默认初始化为THREE.NoColors.当然还可以有THREE.NoColors / THREE.VertexColors / THREE.FaceColors等选项,这里显示出了javascript的灵活性了.
this.skinning =
//定义材质是否使用蒙皮,默认初始化为false
this.morphTargets = //定义材质是否设定目标变形动画,默认为false
this.setValues( parameters ); //调用Material类的setValues方法,将参数parameters赋值给当前LineBasicMaterial材质的属性.
/*************************************************************
****下面是MeshBasicMaterial对象的方法属性定义,继承自Material
*************************************************************/
THREE.MeshBasicMaterial.prototype = Object.create( THREE.Material.prototype );
/*clone方法
///clone方法克隆MeshBasicMaterial对象,
///&summary&clone&/summary&
///&param name ="material" type="MeshBasicMaterial"&MeshBasicMaterial对象,可有可无.&/param&
///&returns type="MeshBasicMaterial"&返回克隆的MeshBasicMaterial对象&/returns&
THREE.MeshBasicMaterial.prototype.clone = function () {
//以下是将材质的属性一一进行复制
var material = new THREE.MeshBasicMaterial();
THREE.Material.prototype.clone.call( this, material );
material.color.copy( this.color );
material.map = this.
material.lightMap = this.lightM
material.specularMap = this.specularM
material.alphaMap = this.alphaM
material.envMap = this.envM
material.combine = this.
material.reflectivity = this.
material.refractionRatio = this.refractionR
material.fog = this.
material.shading = this.
material.wireframe = this.
material.wireframeLinewidth = this.wireframeL
material.wireframeLinecap = this.wireframeL
material.wireframeLinejoin = this.wireframeL
material.vertexColors = this.vertexC
material.skinning = this.
material.morphTargets = this.morphT
//返回克隆的MeshBasicMaterial对象
商域无疆 ()
本文遵循“”创作公用协议
以下代码是THREE.JS 源码文件中Material/MeshBasicMaterial.js文件的注释.
更多更新在 :
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！