ThreeJs顶点颜色信息渲染

1、实现效果

线和面都会根据顶点的颜色进行渐变
1、点渲染

2、线渲染

3、面渲染

2、思维导图

3、实现流程

1、创建一个空几何体
2、创建空几何体的顶点位置数据（类型数组）
3、创建属性缓冲区对象（生成顶点）
4、设置几何体的attributes属性的位置position属性（将顶点赋给空几何体）
5、创建空几何体的顶点位置数据（类型数组）
6、创建属性缓冲区对象（生成RGB颜色）
7、设置几何体的attributes属性的颜色color属性（将颜色赋给空几何体）

4、关键代码

1、点渲染

 /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    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属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    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
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points); //点对象添加到场景中

2、线渲染

/**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      100, 100, 100, //顶点2坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 0, 1, //顶点2颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB


    //材质对象
    var material = new THREE.LineBasicMaterial({
      // 使用顶点颜色数据渲染模型，不需要再定义color属性
      // color: 0xff0000,
      vertexColors: THREE.VertexColors, //以顶点颜色为准
    });
    // 线条渲染模式  线模型对象Line
    var line = new THREE.Line(geometry, material); //点模型对象
    scene.add(line); //点对象添加到场景中

3、面渲染

  /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    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属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    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.MeshBasicMaterial({
      // 使用顶点颜色数据渲染模型，不需要再定义color属性
      // color: 0xff0000,
      vertexColors: THREE.VertexColors, //以顶点颜色为准
    });
    // 网格模型  三角面渲染模式
    var mesh = new THREE.Mesh(geometry, material); //网格模型
    scene.add(mesh); //点对象添加到场景中