最新文章:

您的位置: 富录-前端开发|web技术博客 > Three.js > Three.js之材质篇

Three.js之材质篇

发布时间:2020年05月29日 评论数:抢沙发阅读数: 177

    3703069384beef06c75d752b392c80ce-2.jpg

    材质种类:


    1.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;

    2.MeshDepthMaterial

    使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合,从而很容易创建逐渐消失的效果。

    只有两个控制线框的属性:

    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);//避免渲染遮挡而造成的闪烁
    


    3.MeshNormalMaterial

    法向量的作用: 决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。

    属性:

    wireframe

    wireframeLinewidth

    shading

    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的箭头


    4.MeshFaceMaterial

    可以为几何体的每一个面指定不同的材质。

    假设有一个正方体,可以为每个面指定不同的颜色。

    var matArray = [];
    matArray.push(new THREE.MeshBasicMaterial({color:0xffff00}));
    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
    matArray.push(new THREE.MeshBasicMaterial({color:0x00ffff}));
    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
    matArray.push(new THREE.MeshBasicMaterial({color:0xffff00}));
    matArray.push(new THREE.MeshBasicMaterial({color:0x00ffff})); 
    var faceMaterial = new THREE.MeshFaceMaterial(matArray); 
    var cubeGeometry = new THREE.CubeGeometry(3,3,3);
    var cube = new THREE.Mesh(cubeGeometry,faceMaterial);
    


    5.MeshLambertMaterial

    考虑光照的影响,对光源有反应,可以创建颜色暗淡,不光亮的物体。

    基本属性:

    color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

    独特属性:

    ambient:和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。

    emissive:该材质发射的属性。不像是光源,只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。


    6.MeshPhongMaterial

    考虑光照的影响,可以创建光亮的物体

    基本属性:

    color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

    独特属性:

    ambient

    emissive

    specular:指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色,将会得到一种更加类似金属的材质。如果设置为灰色,材质将变得更像塑料。

    shininess:指定高光部分的亮度。默认是30.


    7.ShaderMaterial

    使用自定义的着色器程序,直接控制顶点的放置方式,以及像素的着色方式。

    属性:

    wireframe

    wireframeLinewidth

    shading

    vertexColor

    fog:指示当前是否会受全局雾化效果设置的影响。

    独特属性:

    fragmentShader:定义每个传入的像素的颜色。

    vertexShader:允许你修改每一个传入的顶点的位置

    uniforms:该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。

    defines:该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。

    attributes:该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性,辣么你要为几何体中的所有顶点提供信息。

    lights:定义光照数据是否传递给着色器。默认是false。

    独特属性:

    fragmentShader:定义每个传入的像素的颜色。

    vertexShader:允许你修改每一个传入的顶点的位置

    uniforms:该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。

    defines:该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。

    attributes:该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性,辣么你要为几何体中的所有顶点提供信息。

    lights:定义光照数据是否传递给着色器。默认是false。


    8.LineBasicMaterial

    可以用于THREE.Line几何体,从而创建着色的直线

    基本属性:

    color

    lineWidth

    LineCap:butt、round、square。默认是round。WebGLRenderer不支持该属性。

    LineJoin:round、bevel(斜切)、miter(尖角)。默认是round。WebGLRenderer不支持该属性。

    vertexColors:该属性值设置为 THREE.VertexColors值时,就可以为每个顶点指定一种颜色。

    fog:指定当前物体是否受全局雾化效果的影响。


    9.LineDashedMaterial

    和LineBasicMaterial有着一样的属性,但是有几个额外的属性,可以用来定义短划线长度和短划线中间空格长度的属性。

    独特属性:

    scale:缩放dashSize和gapSize。如果scale<1,则dashSize和gapSize就会增大。

    dashSize:短线划的长度

    gapSize:间隔的长度

二维码加载中...
本文作者:DGF      文章标题: Three.js之材质篇
本文地址: http://arbays.com/post-158.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论