举荐:将NSDT场景编辑器退出你的3D工具链
其余系列工具:NSDT简石数字孪生

罕用材质介绍

为了不便开发Threejs提供了一系列的材质,所有材质就是对WebGL着色器代码的封装,如果你不理解WebGL,会通过查阅Threejs文档应用相干材质类即可。

点材质PointsMaterial

点材质比较简单,只有PointsMaterial,通常应用点模型的时候会应用点材质PointsMaterial。点材质PointsMaterial的.size属性能够每个顶点渲染的方形区域尺寸像素大小。

var geometry = new THREE.SphereGeometry(100, 25, 25); //创立一个球体几何对象// 创立一个点材质对象var material = new THREE.PointsMaterial({  color: 0x0000ff, //色彩  size: 3, //点渲染尺寸});//点模型对象  参数:几何体  点材质var point = new THREE.Points(geometry, material);scene.add(point); //网格模型增加到场景中

线材质

线材质有根底线材质LineBasicMaterial和虚线材质LineDashedMaterial两个,通常应用应用Line等线模型才会用到线材质。

根底线材质LineBasicMaterial

var geometry = new THREE.SphereGeometry(100, 25, 25);//球体// 直线根底材质对象var material = new THREE.LineBasicMaterial({  color: 0x0000ff});var line = new THREE.Line(geometry, material); //线模型对象scene.add(line); //点模型增加到场景中

虚线材质LineDashedMaterial

// 虚线材质对象:产生虚线成果var material = new THREE.LineDashedMaterial({  color: 0x0000ff,  dashSize: 10,//显示线段的大小。默认为3。  gapSize: 5,//间隙的大小。默认为1});var line = new THREE.Line(geometry, material); //线模型对象//  computeLineDistances办法  计算LineDashedMaterial所需的间隔数组line.computeLineDistances();

网格模型

Threejs提供的网格类材质比拟多,网格材质波及的材质品种和材质属性也比拟多,一节课也无奈解说完,本节课先有一个理性的认知。网格材质顾名思义,网格类模型才会应用的材质对象。根底网格材质对象MeshBasicMaterial,不受带有方向光源影响,没有棱角感。

var material = new THREE.MeshBasicMaterial({  color: 0x0000ff,})

MeshLambertMaterial材质能够实现网格Mesh外表与光源的漫反射光照计算,有了光照计算,物体外表分界的地位才会产生棱角感。

var material = new THREE.MeshLambertMaterial({  color: 0x00ff00,});

高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样能够实现光源和网格外表的漫反射光照计算,还能够产生高光成果(镜面反射)。

var material = new THREE.MeshPhongMaterial({  color: 0xff0000,  specular:0x444444,//高光局部的色彩  shininess:20,//高光局部的亮度,默认30});

材质和模型对象对应关系应用材质的时候,要留神材质和模型的对应关系,通过后面课程案例学习,目前为止你至多应该理解到了网格模型Mesh、点模型Points、线模型Line,随着课程的学习其它的模型对象也会接触到,这里先有个印象就能够。

3D建模学习工作室