1.。js提供哪些材质?
,,,MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框
,,,MeshDepthMaterial(网格深度材质)/根据网格到相机的举例,这种材质决定如何给网格染色
,,,MeshNormalMaterial(网格法向材质)/这是一种简单的材质,根据物体表面的方向向量计算颜色
,,,MeshFaceMaterial(网格面材质)/这是一个容器,可以在这个容器里为物体的各个表面指定不同的颜色
,,,MeshLambertMaterial(网格朗伯材质)/这种材质会考虑光照的影响,可以用来创建颜色暗淡的,不光亮的物体
,,,MeshPhongMaterial(网格冯氏式材质)/这种材质会考虑光照的影响,而且可以用来创建光亮的物体
,,,ShaderMaterial(着色器材质)/这种材质允许使用自定义的着色器程序,直接控制顶点的仿制方式,以及像素的着色方式
,,,LineBasicMaterial(直线基础材质)/这种材质可以用于3。行几何体,从而创建着色的直线
,,,LineDashedMaterial(虚线材质)/这种材质跟直线基础材质一样,不过可以用来创建出一种虚线效果
2。MeshBasicMaterial常用属性
,,,颜色/设置材质的颜色
,,,线框/设置这个属性可以将材质渲染成线框。对调试非常有利
,,,wireframeLinewidth/如果已经打开了线框,这个属性可以定义线框中线的宽度
,,,wireframeLinecap(线框线端点)/这个属性定义线框模式下顶点间线段的端点如何显示。可包括对接(平),圆(圆),广场(方)。默认值是round.WebGlRenderer不支持该属性
,,,材质(着色)/该属性定义如何着色。可选的值是THREE.SmoothShading和3。FlatShading .
,,,vertexColors(顶点颜色)/可以通过这个属性为每个顶点定义不同的颜色。该属性在使用CanvasRenderer时不起作用,但可以在使用WebGLRenderer时起作用。
,,,雾(雾化)/该属性指定当前材质是否会受到全局雾化效果设置的影响。
,,,初始化方式:
var meshMaterial =, new THREE.MeshBasicMaterial({颜色:0 x7777ff}); mashMaterial.visible =,假;
3。基于深度着色的MeshDepthMaterial
,,使用这种材质的物体,其外观不是有光照或某个材质属性决定的;而是由物体到相机的距离决定的。可以将这种材质与其他材质想结合,从而很容易地创建出逐渐消失的效果只,,
4。融合材质
,,,我们知道MeshDepthMaterial不能设置颜色,一切都是有材质的默认属性决定的。但是,三个。js可通过联合材质创建出新效果。使用方式如下:
<>之前…,var cubeGeometry =, new THREE.BoxGeometry (cubeSize, cubeSize,, cubeSize),,,,,,,,,,,,,,,,, var cubeMaterial =, new THREE.MeshDepthMaterial (),,,,,,,,,,,,,,,,, var colorMaterial =, new THREE.MeshBasicMaterial ({0 x00ff00颜色:,,,透明,,真的,,混合:,THREE.MultiplyBlending}),,,,,,,,,,,,,,,,, var cube =, new THREE.SceneUtils.createMultiMaterialObject (cubeGeometry, [cubeMaterial colorMaterial也]); ,,,,,,,,,,,,,,,cube.children [1] .scale.set (0.99, 0.99, 0.99); …
,,展示效果如下:
,,,这些方块可以从MeshDepthMaterial对象获得渐变效果,从MeshBasicMaterial获取颜色。为了使颜色能够有渐变效果,必须设置MeshBasicMaterial的透明为真的,设置融合混合的方式。在查看最后一行代码,如何不这样设置,在渲染的时候就会出现闪烁。
5。计算法向颜色的MeshNormalMaterial
,,,MeshNormalMaterial会根据每个面的法向量来决定颜色,如果是一个球面,由于每个面的法向量不一样,所有每个面的颜色也不一样。该材质最主要的一个属性是阴影,设置着色的方式:THREE.FlatShading表示平面着色,3。SmoothShading表示平滑作色。两个着色差别如下图所示:
5。为每个面指定材质的MeshFaceMaterial
,,,通过MeshFaceMaterial可以为几何体的每一个面指定不同的材质。加入你有一个方块,上面有六个面,你可以用这种材质来为每个面指定一个材质,例如:
var group =, new THREE.Mesh (),,,,,,,,, var mats =, [];
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 x009e60}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 x009e60}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 x0051ba}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 x0051ba}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xffd500}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xffd500}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xff5800}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xff5800}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xc41e3a}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xc41e3a}));
,,,,,,,mats.push (new THREE.MeshBasicMaterial({颜色:0 xffffff}));
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null使用Three.js的材质
