ThreeJS功能解读—材质

Posted 2021-04-21 砖人专语

往期回顾：

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

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

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

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]});

     效果如下 ：

    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});‍

     

  效果如下 ：

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示例等你去发现~~

-END-

在看点这里