# 1、常用材质介绍
# 1、点材质
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); //网格模型添加到场景中
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2、线材质
- 基础线材质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); //点模型添加到场景中
1
2
3
4
5
6
7
2
3
4
5
6
7
- 虚线材质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();
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3、网格模型
- 基础网格材质对象
var material = new THREE.MeshBasicMaterial({
color: 0x0000ff,
})
1
2
3
2
3
MeshLambertMaterial
材质可以实现网格Mesh表面与光源的漫反射光照计算
var material = new THREE.MeshLambertMaterial({
color: 0x00ff00,
});
1
2
3
2
3
- 高光网格材质
var material = new THREE.MeshPhongMaterial({
color: 0xff0000,
specular:0x444444,//高光部分的颜色
shininess:20,//高光部分的亮度,默认30
});
1
2
3
4
5
2
3
4
5
# 2、材质和模型对象对应关系
← 1、顶点及集合体结构 3、模型对象 →