04.ThreeJs开发指南-第四章-材质
第四章材质材质种类:MeshBasicMaterial:为几何体赋予一种简单的颜色,或者显示几何体的线框MeshDepthMaterial:根据网格到相机的距离,该材质决定如何给网格染色MeshNormalMaterial:根据物体表面的法向量计算颜色MeshFaceMaterial:这是一种容器,可以在该容器中为物体的各个表面上设置不同的颜色MeshLambertMater
第四章 材质
材质种类:
MeshBasicMaterial:为几何体赋予一种简单的颜色,或者显示几何体的线框
MeshDepthMaterial:根据网格到相机的距离,该材质决定如何给网格染色
MeshNormalMaterial:根据物体表面的法向量计算颜色
MeshFaceMaterial:这是一种容器,可以在该容器中为物体的各个表面上设置不同的颜色
MeshLambertMaterial:考虑光照的影响,可以创建颜色暗淡,不光亮的物体
MeshPhongMaterial:考虑光照的影响,可以创建光亮的物体
ShaderMaterial:使用自定义的着色器程序,直接控制顶点的放置方式,以及像素的着色方式。
LineBasicMaterial:可以用于THREE.Line几何体,从而创建着色的直线
LineDashedMaterial:类似与基础材质,但可以创建虚线效果
共有属性:
材质基类:THREE.Material该类列出了所有材质的共有属性
基础属性:
控制物体的透明度、是否可见、如何引用物体(通过ID或者自定义物体名称)
融合属性:
决定物体如何与背景融合
高级属性:
可以控制底层WebGL上下文渲染物体的方法。
ID:标识材质,在创建时赋值。
name
opacity:与transparent属性一起使用,取值范围0-1
transparent:是否透明,为true,则根据opacity渲染物体。
overdraw:如果使用THREE.CanvasRenderer渲染物体的时候,多边形会被渲染的大一点。当用这个渲染器画出的物体有间隙时,这时候将该属性设置为true。
visible
side:决定在物体的哪一个面应用材质。默认THREE.FrontSide。可选值有:THREE.BackSide、THREE.DoubleSide。
needsUpdate:材质一般存储在缓存中,对于材质的某些修改,只有设置该属性为true,Three.js库才会使用新的材质去刷新材质的缓存。
融合属性:
blending:决定物体如何与背景进行融合。默认是:NormalBlending,这种模式只显示材质的上层。
blendsrc:渲染源(物体),默认值是SrcAlphaFactor,即用源的alpha通道进行融合。
blenddst:渲染目标(背景),默认值是OneMinusSrcAlphaFactor,即用1-SrcAlphaFactor作为背景的alpha通道值进行融合
blendingequation:指定如何使用blendsrc和blenddst的值。默认方法是:AddEquation,即将两个颜色值相加。
高级属性:
大多数在内部使用,用来控制WebGL渲染场景的细节。
depthTest:深度测试
depthWrite:
polygonOffset、polygonOffsetFactor、polygonOffsetUnits
alphaTest:alpha测试,设置值的范围0-1,如果某个像素的alpha值小于该属性设置的值,那么该像素就不会被显示出来。
一、MeshBasicMaterial
不考虑光照的影响。
color
wireframe
wireframeLinewidth
wireframeLinecap:线段端点如何显示。可选值有:butt(平)、round、square。默认是round。WebGLRenderer对象不支持该属性。
wireframeLinejoin:线段连接点如何显示。可选值有:round、bevel(斜角)、miter(尖角)。默认是round。WebGLRenderer对象不支持属性。
shading:着色模式。可选值:THREE.SmoothShading、THREE.FlatShading。
vertexColors:为每个顶点定义不同的颜色。在CanvasRenderer对象中不起作用。
fog:指示当前是否会受全局雾化效果设置的影响。
两种设置属性的方式:
1.构造函数
var meshMaterial = new THREE.MeshBasicMaterial({color:0xffccff});
2.属性
meshMaterial.visible = false;
二、MeshDeptMaterial
使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合,从而很容易创建逐渐消失的效果。
只有两个控制线框的属性:
wireframe
wireframeLinewidth
尽管该材质没有多少属性可以控制物体的渲染效果,但是我们可以控制物体消失的速度。
我们可以通过设置相机的near和far的值,来控制创建中使用这种材质的物体的消失速度。如果near和fat之间的差值越大,那么物体远离相机时,只会稍微消失一点;反之,物体消失的效果非常明显。
三、联合材质
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);//避免渲染遮挡而造成的闪烁
这些cube可以从MeshDepthMaterial材质中或得渐变效果,可以从MeshBasicMaterial材质中获得颜色。
注意:MeshBasicMaterial材质,如果transparent属性不设置为true,则只会得到一个纯绿色的物体。如果设置为true,则Three.js库就会检查blending属性,来看看这个绿色如何和背景(用MeshDepthMaterial材质渲染的方块)相互作用。
四、MeshNormalMaterial
法向量的作用:
决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。
法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。
在平面上添加表示法向量的箭头:使用THREE.ArrowHelper
for(var f = 0 , f1 = sphere.geometry.faces.length; f < f1 ; f++){
var face = spere.geometry.faces[f];
var arrow = new THREE.ArrowHelper(face.normal,face.centroid,2,0x3333ff);
spere.add(arrow);
}
这段代码在球体的每个面上添加了一个长度为2,颜色为0x3333ff的箭头。
属性:
wireframe
wireframeLinewidth
shading
五、MeshFaceMaterial
材质容器。可以为几何体的每一个面指定不同的材质。
假设有一个正方体,可以为每个面指定不同的颜色。
var matArray = [];
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
var faceMaterial = new THREE.MeshFaceMaterial(matArray);
var cubeGeometry = new THREE.CubeGeometry(3,3,3);
var cube = new THREE.Mesh(cubeGeometry,faceMaterial);
Mesh组的概念:
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: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
var faceMaterial = new THREE.MeshFaceMaterial(mats);
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
for (var z = 0; z < 3; z++) {
var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);
//将cube定位到(0,0,0)的四周,这样旋转时,整个组围绕(0,0,0)进行旋转。
cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);
group.add(cube);
}
}
}
// call the render function
scene.add(group);
高级材质:
一、暗淡、不光亮表面的 MeshLambertMaterial
对光源有反应。
基本属性:
color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。
独特属性:
ambient:和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。
emissive:该材质发射的属性。不像是光源,只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。
var meshMaterial = new THREE.MeshLambertMaterial({color:0xff00ff});
二、光亮表面的 MeshPhongMaterial
基本属性:
color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。
独特属性:
ambient
emissive
specular:指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色,将会得到一种更加类似金属的材质。如果设置为灰色,材质将变得更像塑料。
shininess:指定高光部分的亮度。默认是30.
var meshMaterial = new THREE.MeshPhongMaterial({color:0xff00ff}});
三、ShaderMaterial 创建自己的着色器
创建自己的着色器,直接在WebGL环境中运行。
着色器可以将js对象转换为屏幕上的像素。
属性:
wireframe
wireframeLinewidth
shading
vertexColor
fog:指示当前是否会受全局雾化效果设置的影响。
独特属性:
fragmentShader:定义每个传入的像素的颜色。
vertexShader:允许你修改每一个传入的顶点的位置
uniforms:该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。
defines:该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。
attributes:该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性,辣么你要为几何体中的所有顶点提供信息。
lights:定义光照数据是否传递给着色器。默认是false。
要使用ShaderMaterial,必须传入两个着色器:
vertexShader:会在几何体的每一个顶点执行。可以通过这个着色器通过改变顶点的位置来对几何体进行变换。
fragmentShader:会在几何体的每一个像素上执行。在vertexShader里,我们会返回这个特定像素应该显示的颜色。
<script id="vertex-shader" type="x-shader/x-vertex">
uniform float time;
void main()
{
vec3 posChanged = position;
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(posChanged,1.0);
}
</script>
为了能够在js中着色器通信,我们使用uniform变量。
这里,我们使用uniform float time传入外部数据。根据这个数据,我们会改变传入顶点的x,y,z坐标(通过position变量传入)
gl_Position 是glsl内置的变量,用来表示最终要渲染的顶点的位置。
接下来要创建一个shaderMaterial,并传入这个vertexShader。我们定义一个函数:
function createMaterial(vertexShader,fragmentShader){
var verthader = 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:'f',value: new THREE.Vector2()}
};
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
var meshMaterial = new THREE.ShaderMaterial({
uniforms:uniforms,
attributes:attributes,
vertexShader:vertShader,
fragmentShader:fragShader,
transparent:true
});
return meshMaterial;
}
该例子的完整循环如下:
function render(){
stats.update();
cube.rotation.y = step += 0.01;
cube.rotation.x = step;
cube.rotation.z = step;
cube.material.materials.forEach(function(e){
e.uniforms.time.value += 0.01;
});
requestAnimationFrame(render);
renderer.render(scene,camera);
}
该例子中cube的每个面都在发生变化,这就是fragmentShader的作用。
var cubeGeometry = new THREE.CubeGeometry(20,20,20);
var meshMaterial1 = createMaterial("vertex-shader","fragment-shader-1");
var meshMaterial2 = createMaterial("vertex-shader","fragment-shader-2");
var meshMaterial3 = createMaterial("vertex-shader","fragment-shader-3");
var meshMaterial4 = createMaterial("vertex-shader","fragment-shader-4");
var meshMaterial5 = createMaterial("vertex-shader","fragment-shader-5");
var meshMaterial6 = createMaterial("vertex-shader","fragment-shader-6");
var material = new THREE.MeshFaceMaterial([
meshMaterial1,meshMaterial2,meshMaterial3,meshMaterial4,meshMaterial5,meshMaterial6
]);
var cube = new THREE.Mesh(cubeGeometry,material);
fragmentShader都是从 http://glsl.heroku.com 中复制过来的。
<script id="fragment-shader-6" type="x-shader/x-fragment">
uniform float time;
uniform vec2 resolution;
void main( void )
{
vec2 uPos = ( gl_FragCoord.xy / resolution.xy );//normalize wrt y axis
//suPos -= vec2((resolution.x/resolution.y)/2.0, 0.0);//shift origin to center
uPos.x -= 1.0;
uPos.y -= 0.5;
vec3 color = vec3(0.0);
float vertColor = 2.0;
for( float i = 0.0; i < 15.0; ++i )
{
float t = time * (0.9);
uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1;
float fTemp = abs(1.0 / uPos.y / 100.0);
vertColor += fTemp;
color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 );
}
vec4 color_final = vec4(color, 1.0);
gl_FragColor = color_final;
}
</script>
线段几何体的材质:
LineBasicMaterial
基本属性:
color
lineWidth
LineCap:butt、round、square。默认是round。WebGLRenderer不支持该属性。
LineJoin:round、bevel(斜切)、miter(尖角)。默认是round。WebGLRenderer不支持该属性。
vertexColors:该属性值设置为 THREE.VertexColors值时,就可以为每个顶点指定一种颜色。
fog:指定当前物体是否受全局雾化效果的影响。
//获取一组x,y坐标,返回一个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);
i++;
});
lines.colors = colors;
var material = new THREE.LineBasicMaterial({
opacity:1.0,
lineWidth:1,
vertexColors:THREE.VertexColors
});
//线网格
var line = new THREE.Line(lines,material);
LineDashedMaterial
和LineBasicMaterial有着一样的属性,但是有几个额外的属性,可以用来定义短划线长度和短划线中间空格长度的属性。
独特属性:
scale:缩放dashSize和gapSize。如果scale<1,则dashSize和gapSize就会增大。
dashSize:短线划的长度
gapSize:间隔的长度
//要想显示间隔,必须调用此方法
lines.computeLineDistances();
var material = new THREE.LineDashedMaterial({
vertexColor:true,
color:0xffffff,
dashSize:10,
gapSize:1,
scale:0.1
});
更多推荐
所有评论(0)