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 = false;
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"> uniform float time; varying vec2 vUv; 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(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.innerWidth; uniforms.resolution.value.y = window.innerHeight; var meshMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, attributes: attributes, vertexShader: verShader, fragmentShader: fragShader, transparent: true }); return meshMaterial; }
我们设置了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 = 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()方法,如果不调用,间隔就不会显示出来。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:使用Three.js的材质-创新互联
URL网址:https://www.cdcxhl.com/article16/dcsidg.html
成都网站建设公司_创新互联,为您提供品牌网站制作、网站营销、营销型网站建设、全网营销推广、域名注册、面包屑导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联