关于three.js:Threejs教程常用材质介绍

举荐：将 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 建模学习工作室