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

• 顶点位置
• 顶点颜色
• 顶点法向量光照计算（一个顶点对应一个法向量），法向量即图形面向哪个方向，有了法向量之后使得几何模型在光照下有了黑白灰，有了颜色的过渡

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

    //创建一个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);//线条对象添加到场景中

设置顶点颜色

//类型数组创建顶点颜色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

设置法向量

   // 法向量也是通过对应的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个为一组,表示一个顶点的法向量数据

顶点索引服用顶点数据

    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个为一组

标签：geometry,THREE,概念,new,var,顶点,向量
来源： https://www.cnblogs.com/JianXin1994/p/16293948.html