ThreeJS功能解读—材质
Posted 砖人专语
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ThreeJS功能解读—材质相关的知识,希望对你有一定的参考价值。
往期回顾:
:基础材质、琥珀材质、着色器材质
:深度材质、冯氏材质、基础线材质
本期最后介绍下法向量材质、标准材质、虚线材质⬇
MeshNormalMaterial 法向量材质
定义:三维平面的法线是垂直于该平面的三维向量。曲面在某点P处的法线为垂直于该点切平面(tangent plane)的向量。
特点:每个面的颜色是从该面向外指的法向量映射到RGB颜色上。
构造:
属性:wireframe(显示线框) wireframeLinewidth(线框宽度)
举例:
var component.material = new THREE.MeshNormalMaterial({
color: [0.5, 0.5, 0.5]
});
Notes:可以通过THREE.ArrowHelper添加表示法向量的箭头。
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
});
LineDashedMaterial 虚线材质
属性:scale(缩放比例)、dashSize(短划线的长度)、gapSize(间隔长度)
举例:
new THREE.LineDashedMaterial({ =
true, :
0xffffff, :
10, :
1, :
0.1 :
});
PointsMaterial:点材料,粒子系统所使用的缺省材质
SpriteMaterial: 精灵材料,使用Sprite的材料
MultiMaterial: 多种材料,使用facesmaterialindex来决定哪个面使用哪个材料
材质功能就先介绍到这里,下期见~~~
没看够?网页输入www.bos.xyz进入小红砖首页→示例库,更多BIM示例等你去发现~~
-END-
以上是关于ThreeJS功能解读—材质的主要内容,如果未能解决你的问题,请参考以下文章
Vue2+ThreeJS踩坑记录fbx蒙皮网格模型挂载ShaderMaterial材质之后,挂载动画无效的解决办法