ThreeJS功能解读—材质

Posted 砖人专语

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ThreeJS功能解读—材质相关的知识,希望对你有一定的参考价值。


ThreeJS功能解读—材质(三)


ThreeJS功能解读—材质(三)

往期回顾:

:基础材质、琥珀材质、着色器材质

:深度材质、冯氏材质、基础线材质


本期最后介绍下法向量材质、标准材质、虚线材质



01

MeshNormalMaterial 法向量材质


    定义三维平面的法线是垂直于该平面的三维向量曲面在某点P处的法线为垂直于该点切平面(tangent plane)的向量

    特点:每个面的颜色是从该面向外指的法向量映射到RGB颜色上。

    构造

var normalMaterial = 
new THREE.MeshNormalMaterial()

    属性:wireframe(显示线框) wireframeLinewidth(线框宽度)

     Shading: THREE.FlatShading 平面着色; THREE.SmoothShading 平滑着色

    举例

 var component.material = new THREE.MeshNormalMaterial({ color: [0.5, 0.5, 0.5]});


     效果如下

ThreeJS功能解读—材质(三)

    Notes:可以通过THREE.ArrowHelper添加表示法向量的箭头。




02

MeshStandardMaterial 标准材质

   

    特点基于物理的标准材料,在实践中,这提供了比MeshLambertMaterial或MeshPhongMaterial更准确和逼真的结果,代价是计算成本更高

    构造

var meshMaterial = 

new.THREE.MeshStandardMaterial()

    属性

        metalness — 这种材料多少像金属一样。非金属材料,如木材或石材,使用0.0,金属使用1.0。默认值为0.5。 0.0到1.0之间的值可用于生锈的金属外观。

    举例

component.material = new THREE.MeshPhongMaterial({ "color": [0.5, 0.5, 0.5], "metalness": 0.6});

     

  效果如下

ThreeJS功能解读—材质(三)




03

LineDashedMaterial 虚线材质

 

    属性:scale(缩放比例)、dashSize(短划线的长度)、gapSize(间隔长度)

    举例

Lines.computeLineDistance(); //显示间隔 var material = new THREE.LineDashedMaterial({ "vertexColors": true,     "Color": 0xffffff,     "dashSize": 10,     "gapSize": 1,     "Scale": 0.1});


    Notes
    ( 1)若要创建透明材质,不仅要设置opacity的值,还要将transparent属性设为true;
    ( 2)还有一些较为少见的材质,如

PointsMaterial:点材料,粒子系统所使用的缺省材质

SpriteMaterial: 精灵材料,使用Sprite的材料

MultiMaterial: 多种材料,使用facesmaterialindex来决定哪个面使用哪个材料


材质功能就先介绍到这里,下期见~~~

没看够?网页输入www.bos.xyz进入小红砖首页→示例库,更多BIM示例等你去发现~~ThreeJS功能解读—材质(三)





-END-


在看点这里

以上是关于ThreeJS功能解读—材质的主要内容,如果未能解决你的问题,请参考以下文章

threejs大模型加载崩溃

threejs学习day4:材质

three.js(4)-网格Lambert材质

Vue2+ThreeJS踩坑记录fbx蒙皮网格模型挂载ShaderMaterial材质之后,挂载动画无效的解决办法

Vue2+ThreeJS踩坑记录fbx蒙皮网格模型挂载ShaderMaterial材质之后,挂载动画无效的解决办法

threejs透明贴图如何不影响内部材质