常用材质

为了方便开发,Three.js提供了一系列的材质,所有材质就是对WebGL着色器代码的封装。

点材质PointsMaterial

点材质比较简单,通常使用点模型的时候会使用点材质

点材质PointsMaterial.size属性可以每个顶点渲染的方形区域尺寸像素大小。

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

线材质

线材质有基础线材质LineBasicMaterial和虚线材质LineDashedMaterial两个,通常使用线模型才会用到线材质

基础线材质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();

网格模型

网格模型是网格类模型才会使用的材质对象

基础网格材质对象MeshBasicMaterial,不受带有方向光源影响,没有棱角感。

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

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

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

高光网格材质MeshPhongMaterial除了可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

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

材质共有属性、私有属性

点材质PointsMaterial、基础线材质LineBasicMaterial、基础网格材质MeshBasicMaterial、高光网格材质MeshPhongMaterial等材质都是父类Material子类

各种各样的材质子类都有自己的特定属性,比如点材质特有的尺寸属性.size、高光网格材质特有的高光颜色属性.specular等等这些属性可以成为子类材质的私有属性。

所有子类的材质都会从父类材质Material继承透明度opacity、面side等属性,这些来自父类的属性都是子类共有的属性。

.side属性

.side属性的属性值定义面的渲染方式前面、后面 或 双面 可见。 属性的默认值是THREE.FrontSide,表示前面. 也可以设置为后面THREE.BackSide 或 双面THREE.DoubleSide.

var material = new THREE.MeshBasicMaterial({
  color: 0xdd00ff,
  // 前面FrontSide  背面:BackSide 双面:DoubleSide
  side:THREE.DoubleSide,
});

.opacity属性

通过材质的透明度属性.opacity可以设置材质的透明程度.opacity 属性值的范围是0.0~1.0,0.0值表示完全透明, 1.0表示完全不透明,.opacity 默认值1.0。

当设置.opacity属性值的时候,需要设置材质属性transparent值为true,如果材质的transparent属性没有设置为true, 材质会保持完全不透明状态。

可以在构造函数参数中设置transparent.opacity的属性值

var material = new THREE.MeshPhongMaterial({
  color: 0x220000,
  // transparent设置为true,开启透明,否则opacity不起作用
  transparent: true,
  // 设置材质透明度
  opacity: 0.4,
});

也可以通过访问材质对象属性形式设置transparent.opacity的属性值

  // transparent设置为true,开启透明,否则opacity不起作用
material.transparent = true;
  // 设置材质透明度
material.opacity = 0.4;