5. 顶点概念

如果我们需要做自定义的几何形状，就得用到顶点这个概念，根据顶点去制作几何形状，上色也可以根据顶点颜色去设置
顶点

• 顶点位置
• 顶点颜色
• 顶点法向量光照计算（一个顶点对应一个法向量），法向量即图形面向哪个方向，有了法向量之后使得几何模型在光照下有了黑白灰，有了颜色的过渡
• buffer几何与普通几何顶点数据的设置不一样
  • geometry 顶点数据用一个对象表示
  • BufferGeometry 顶点数据使用类型化数组集中表示

根据顶点位置自定义几何形状

buffer类使用类型化数组设置顶点位置

    //创建一个Buffer类型几何体对象
    var geometry = new THREE.BufferGeometry();
    //类型数组创建顶点数据
    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坐标
    ]);
    // 创建缓冲区属性对象
    //3个元素为一组，表示一个顶点的x，y，z坐标
    var attribue = new THREE.BufferAttribute(vertices, 3);
    // 设置几何体attributes属性的位置属性
    geometry.attributes.position = attribue;

    // 三角面(网格)渲染模式
    var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff, //三角面颜色
      side: THREE.DoubleSide //两面可见
    }); //材质对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    // 点渲染模式
    var material = new THREE.PointsMaterial({
      color: 0xff0000,
      size: 5.0 //点对象像素尺寸
    }); //材质对象
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points); //点对象添加到场景中

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

非buffer类用Vector3设置顶点位置

    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);

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

设置顶点颜色

buffer类几何用类型数组设置顶点颜色

//类型数组创建顶点颜色color数据，对应RGB
    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

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

非buffer类用Color设置顶点颜色

    // Vector3向量对象表示顶点位置数据
    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);

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

设置法向量

   // 法向量也是通过对应的x，y，z来决定每个顶点的面朝方向
   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个为一组,表示一个顶点的法向量数据

通过顶点索引复用顶点数据

buffer类几何通过创建类数组来实现顶点复用

    var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      80, 0, 0, //顶点2坐标
      80, 80, 0, //顶点3坐标
      0, 80, 0, //顶点4坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue
    var normals = new Float32Array([
      0, 0, 1, //顶点1法向量
      0, 0, 1, //顶点2法向量
      0, 0, 1, //顶点3法向量
      0, 0, 1, //顶点4法向量
    ]);
    // 设置几何体attributes属性的位置normal属性
    geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的xyz坐标

    // Uint16Array类型数组创建顶点索引数据
    var indexes = new Uint16Array([
      0, 1, 2, 0, 2, 3,
    ])
    // 索引数据赋值给几何体的index属性
    geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

非buffer类几何通过face3来实现顶点复用,通过添加面的法向量来实现后面图形的法向量复用

    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

    var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
    var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
    var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2, p3,p4);

    // Face3构造函数创建一个三角面
    var face1 = new THREE.Face3(0, 1, 2);
    //三角面每个顶点的法向量
    var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
    var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
    var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
    // 设置三角面Face3三个顶点的法向量
    face1.vertexNormals.push(n1,n2,n3);

    // 三角面2
    var face2 = new THREE.Face3(0, 2, 3);
    // 设置三角面法向量
    face2.normal=new THREE.Vector3(0, -1, 0);

    //三角面face1、face2添加到几何体中
    geometry.faces.push(face1,face2);