three.js使用（2）顶点位置及几何体结构

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

* 顶点位置，几何体结构

1）顶点位置

1.每个模型都是通过顶点创建的（比如正方体有8个顶点），几何体本质上就是three.js生成顶点的算法，通过顶点可以自定义几何体模型。 和上面一样，也是创建模型和材质（不同的是需要添加缓冲区对象，设置坐标几个为一组），之后生成模型对象在添加到scene上渲染。

var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
//类型数组创建顶点数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //三角面颜色
  side: THREE.DoubleSide //两面可见
  //side: THREE.FrontSide//前面可见（隐藏正方体后面的面）
  //side: THREE.BackSide //后面可见（隐藏正房子前面的两个面）
   //wireframe:true,  //网格模型以线条的模式渲染,把三角形用线条的形式展示
   
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

通过模型的透明度属性.opacity可以设置材质的透明程度，.opacity属性值的范围是0.0~1.0，0.0值表示完全透明, 1.0表示完全不透明，.opacity默认值1.0。 当设置.opacity属性值的时候，需要设置材质属性transparent值为true

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

2.除了网格渲染模式外，还有点渲染模式和线渲染模式 2.1 点渲染模式把每个点都渲染成一个方形区域

// 点渲染模式
var material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 10.0 //方形区域大小
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中

1.2 线渲染模式把每个点按顺序连接形成线状

// 线条渲染模式
var material=new THREE.LineBasicMaterial({
    color:0xff0000 //线条颜色
});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象添加到场景中

2）顶点颜色 和顶点位置一样，也是模型geometry的属性

var colors = new Float32Array([
  1, 0, 0, //顶点1颜色
  0, 1, 0, //顶点2颜色
  0, 0, 1, //顶点3颜色

  1, 1, 0, //顶点4颜色
  0, 1, 1, //顶点5颜色
  1, 0, 1, //顶点6颜色
]);
// 设置几何体attributes属性的颜色color属性
geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
//材质对象

上面设置模型材质是通过color属性设置模型颜色，但是添加了顶点颜色后，而是设置了材质属性.vertexColors

var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
});

vertexColors属性的默认值是THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors，渲染模型的时候就会使用几何体的顶点颜色数据geometry.attributes.color。 3）顶点法向量 通过顶点法创建的几何体模型必须设置顶点法向量，否则点光源或者平行光源等带有方向的光源没有效果（模型没有棱角感）

var normals = new Float32Array([
  0, 0, 1, //顶点1法向量
  0, 0, 1, //顶点2法向量
  0, 0, 1, //顶点3法向量

  0, 1, 0, //顶点4法向量
  0, 1, 0, //顶点5法向量
  0, 1, 0, //顶点6法向量
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

总结： 通过顶点创建模型的方法：

// 访问几何体顶点位置数据
BufferGeometry.attributes.position
// 访问几何体顶点颜色数据
BufferGeometry.attributes.color
// 访问几何体顶点法向量数据
BufferGeometry.attributes.normal

3）Geometry 和Vector3

Geometry是设置顶点和颜色和法向量的另一种方法，比缓冲类型BufferGeometry更方便，通过THREE.Geometry()声明一个空白模型，通过THREE.Vector3设置坐标和法向量，通过THREE.Color设置顶点颜色

var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3);

// Color对象表示顶点颜色数据
var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
//顶点颜色数据添加到geometry对象
geometry.colors.push(color1, color2, color3);

注意设置几何体Geometry顶点颜色属性geometry.colors，对网格模型Mesh是无效的，对于点模型Points、线模型Line是有效果。