持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情

顶点位置数据解析渲染

BufferGeometry类几何体

       /**
       * @BufferGeometry：BufferGeometry类几何体， 实现buffer缓冲区功能的模型区域
       */
      var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象

扩展：javascript的类型化数组

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个为一组，表示一个顶点的xyz坐标
      // 设置几何体attributes属性的位置属性
      geometry.attributes.position = attribue;

color 顶点颜色

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

normal 顶点法向量

      /**
       * @normal：设置法向量区域：为了使方向光等光源生效
       */
      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个为一组,表示一个顶点的法向量数据

index 索引区域

      /**
       * @index：索引区域，实现了顶点位置的服用
       */
      // Uint16Array类型数组创建顶点索引数据
      var indexes = new Uint16Array([
        // 0对应第1个顶点位置数据、第1个顶点法向量数据
        // 1对应第2个顶点位置数据、第2个顶点法向量数据
        // 索引值3个为一组，表示一个三角形的3个顶点
        0, 1, 2, 
        0, 2, 3,
      ]);
      // 索引数据赋值给几何体的index属性
      geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组