学习Three.js——材质(Material)
材质
材质的种类
MeshBasicMaterial
:基础材质,给几何体赋予一种简单的颜色,不受光源的影响
MeshDepthMaterial
:深度材质,这种材质根据摄像机到网格的距离给网格上色,常用于得到物体逐渐原理视线消失的效果
MeshNormalMaterial
:法向材质,这种材质根据每个面的法向量而附上不同的颜色
MeshFaceMaterial
:面材质,可以为几何体的不同面赋予不同的材质
MeshLambertMaterial
:Lambert材质,一种表面粗糙,比较暗淡的材质
MeshPhongMaterial
:一种比较光亮的材质
ShaderMaterial
:着色器材质,允许使用自定义的着色器
LineBasicMaterial
:直线基础材质,用于创建着色的直线
LineDashMaterial
:和直线基础材质一样,不过可以创建一种虚线的效果
材质的共有属性
id
:标识符,用于识别材质,第一个材质为0,第二个为1,以此类推
name
:名称,也是用于识别材质
opacity
:不透明度,1表示不透明,0表示完全透明,和transparent配合使用
transparent
:是否使用透明,当设置为true时opacity才有效
visible
:是否可见,设置为false则看不见物体
side
:用于设置几何体那一面应用材质,THREE.FrontSide表示外侧,THREE.BackSize表示内侧,THREE.DoubleSide表示两侧,但是比较耗资源
needsUpdate
:是否需要更新,若设置为true,下一次渲染则使用新的材质,并重新设置为false
MeshBasicMaterial
基础材质的颜色只与初始化定义的颜色有关,不受光照的影响。
基础材质有自己的特有属性。
color
:颜色
wireframe
:是否显示线框
wireframeLinewidth
:线框线的宽度
shading
:定义着色的方式,可选的值有
-THREE.SmoothShading
:平滑过渡,看不到面和面之间的连接
-THREE.NoShading
:不使用着色
-THREE.FlatShading
:
vertexColors
:顶点颜色,可选的值有
-THREE.NoColors
:没有颜色
-THREE.VertexColors
:使用geometry几何体的颜色
fog
:是否受全局雾化的影响
MeshDepthMeterial
这种材质的外观不受光照的影响,而是由物体到摄像机的距离决定,通过这种材质和其他材质组合,可以创造出逐渐消失的效果。
它只有两种属性
wireframe
:是否显示线框
wireframeLineWidth
:控制线框的宽度
效果
MeshNormalMaterial
这种材质根据每个面的法向量不同而对该面使用不同的材质
它有三种属性:
wireframe
:是否显示线框
wireframeLineWidth
:控制线框的宽度
shading
:选择不同的着色方式,可以选择THREE.FlatingShading(平面着色)和THREE.SmoothShading(平滑着色)
THREE.FlatingShading:
THREE.SmoothFlating
THREE.MeshFaceMaterial
这不是一种材质,而是为每个面分配不同的材质
用法
var group = new THREE.Mesh();
// add all the rubik cube elements
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 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.position.set(x * 3 - 3, y * 3, z * 3 - 3);
group.add(cube);
}
}
}
scene.add(group);
注意这里使用了群(group),将小立方体加入群组成一个大立方体。
另外系统会为每个面分配对应的材质(materialIndex),也可以自己手动为每个面定义材质。
效果图:
MeshLambertMaterial
一种表面比较暗淡的材质
ambient
:环境的环境色,好像没什么用
emissive
:材质发射的颜色,用于创造一种不受光源影响的颜色
wrapAround
:此属性能够使得阴影变得柔和和分布均匀
wrapRGB
:用于控制光下降的速度
效果:
MeshPhongMaterial
一种比较光亮的材质,属性有
ambient
:环境光,好像没什么用
emissive
:材质发出来的光,不受外部光照的影响
specular
:用于设置材质光亮程度和高光部分的颜色
shininess
:设置材质高光部分的亮度
metal
:使得物体看起来更像金属
wrapAround
、wrapRGB
:和上面的一样
效果:
MeshShaderMaterial
略
LineBasicMaterial
用于渲染线段的材质,一些基本属性:
color
:线段的颜色,如果定义了vertexColors,那么该属性将被忽略
vertexColor
:线段端点的颜色,将其设置为THREE.VertexColors则可以根据colors数组为每个端点分配颜色,同时决定了线段的颜色
lineWidth
:线段的宽度
fog
:是否受全局雾化的影响
用法:
var points = gosper(4, 60);//得到一条gosper曲线的各个顶点,暂时没搞懂这个函数
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);//为每个端点都分配一个颜色,这里使用HSL色彩空间
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);
效果
LineDashMaterial
和前者差不多,但是可以绘制曲线,除了有以上的属性外,还有
scale
:缩放dashSize和gapSize
dashSize
:实线部分的长度
gapSize
:虚线部分的长度
效果: