点线面

在整个几何的世界中，任何物体都是由点线面来构成的，当我们知道了某个点的坐标时，我们就可以根据其坐标，绘制出对应的图形，本节内容主要就是梳理，如何来通过点绘制出三角形和正方形。

• API： BufferGeometry缓冲区存储器
• 理解：将每一个点存储下来，从而形成面
• 原理：利用缓冲区（buffer）来存储顶点、面、法线、UV坐标等几何属性的数据，而不是存储在每个顶点上
• 作用：高效地存储和渲染3D几何体的数据结构
• 索引：索引缓冲区（index buffer）来定义面的连接关系，从而节省存储空间并提高渲染效率
• 地位：所有的几何体基本都是继承自这个BufferGeometry类
• 坐标声明：逆时针方向为正面，顺时针方向为反面

顶点构建三角形

创建缓冲区几何体类
const geometry=new Three.BufferGeometry()
// 创建三角形,定义坐标
const vertex=new Float32Array([
    1.0,1.0,0.0,-1.0,1.0,0.0,-1.0,-1.0,0.0
])
// 创建顶点属性
geometry.setAttribute("position",new Three.BufferAttribute(vertex,3))
// 定义材质
const material=new Three.MeshBasicMaterial({color:'pink'})
// 创建物体
const good=new Three.Mesh(geometry,material)
// 物体添加到场景中
scene.add(good)

顶点构建正方形（6点）

创建缓冲区几何体类
const geometry=new Three.BufferGeometry()
// 创建四边形,定义坐标
const vertex=new Float32Array([
    1.0,1.0,0.0,-1.0,1.0,0.0,-1.0,-1.0,0.0,
    -1.0,-1.0,0.0,1.0,-1.0,0.0,1.0,1.0,0.0
])
// 创建顶点属性
geometry.setAttribute("position",new Three.BufferAttribute(vertex,3))
// 定义材质
const material=new Three.MeshBasicMaterial({color:'pink'})
// 创建物体
const good=new Three.Mesh(geometry,material)
// 物体添加到场景中
scene.add(good)

索引构建正方形（4点）

创建缓冲区几何体类
const geometry=new Three.BufferGeometry()
// 使用索引绘制创建四边形
const vertex=new Float32Array([
    1.0,1.0,0.0,-1.0,1.0,0.0,-1.0,-1.0,0.0,1.0,-1.0,0.0
])
// 创建顶点属性
geometry.setAttribute("position",new Three.BufferAttribute(vertex,3))
// 创建索引
const index=new Uint16Array([0,1,2,2,3,0])
geometry.setIndex(new Three.BufferAttribute(index,1))
// 定义材质
const material=new Three.MeshBasicMaterial({color:'pink'})
// 创建物体
const good=new Three.Mesh(geometry,material)
// 物体添加到场景中
scene.add(good)

解释

虽然都是生成一个正方形，但是一个面上的点数量却是不同的，那是因为：

第一个四边形，两个三角形交汇点没有复用，于是就是6个点

第二个四边形，采用了索引，实际上只用了4个点（常用）

组划分材质

• API：addGroup ( 起始索引，索引个数，具体材质:材质数组的索引 )
• 代码：

// 使用索引绘制创建四边形
const vertex=new Float32Array([
    1.0,1.0,0.0,-1.0,1.0,0.0,-1.0,-1.0,0.0,1.0,-1.0,0.0
])
// 创建顶点属性
geometry.setAttribute("position",new Three.BufferAttribute(vertex,3))
// 创建索引
const index=new Uint16Array([0,1,2,2,3,0])
geometry.setIndex(new Three.BufferAttribute(index,1))
// 设置顶点组
geometry.addGroup(0,3,0)
geometry.addGroup(3,3,1)
// 定义材质组
const material1=new Three.MeshBasicMaterial({color:'red'})
const material2=new Three.MeshBasicMaterial({color:'blue'})
const materialArr=[material1,material2]
// 创建物体
const good=new Three.Mesh(geometry,materialArr)
// 物体添加到场景中
scene.add(good)

• 结果展示

• 图片详解