• composed of vertices(point coordinates in 3D spaces) and faces(triangles that join those vertices to create a surface)
• can be used for meshes but also for particles
• can store more data than the positions(UV coordinates,normals,colors or anything we want)

• BoxGeometry

  • the size on the axis: width,height,depth
  • 可选参数，how many subdivisions in the axis: widthSegments,heightSegments,depthSegments
  • 通过打印出的 geometry 可观察到attributes属性下的position，一个立方体，当每个面由2个三角形组成时，共有24个顶点，每个顶点坐标由对应的xyz3个值组成，因此array属性值的长度为72

// Cube
// 1 - 2 triangles per face
// 2 - 8 triangles per face
const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1)  // 每个面由2个三角形组成 
console.log(geometry) // 打印geometry观察顶点，如下图
const material = new THREE.MeshBasicMaterial({
  color: '#ff0000',
  wireframe: true, // 将几何体渲染为线框
  // side: THREE.DoubleSide // 正反面都可见
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

image.png

• BufferGeometry

  • use Float32Array，创建一个三角面

  // 三角形
  
  // 创建几何体
  const geometry = new THREE.BufferGeometry()
  // 创建顶点，3个顶点，逆时针方向绘出顶点，即正面
  const positionsArray = new Float32Array([
    0,0,0,
    0,1,0,
    1,0,0
  ])
  // 创建顶点属性，3个顶点
  const positionsAttribute = new THREE.BufferAttribute(positionsArray,3)
  geometry.setAttribute('position',positionsAttribute)
  

  • 创建一个四边形，由2个三角形组成，共有6个顶点

  // 四边形
  
  // 创建几何体
  const geometry = new THREE.BufferGeometry()
  // 创建顶点数据 32位浮点数数组 以逆时针顺序渲染顶点，展示为立方体正面
  const vertices = new Float32Array([
    // 三角面1
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    1.0, 1.0, 0.0,
    // 三角面2
    1.0, 1.0, 0.0,
    -1.0, 1.0, 0.0,
    -1.0, -1.0, 0.0
  ])
  // 创建顶点属性 3个数值为一个顶点数据
  geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))
  

  image.png
  • 创建一个四边形，由2个三角形组成（共用顶点），共4个顶点

  // 四边形（共用顶点）
  
  // 创建几何体
  const geometry = new THREE.BufferGeometry()
  // 使用索引绘制
  const vertices = new Float32Array([
    // 四边形4个顶点
    -1.0, -1.0, 0.0,
    -1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    1.0, -1.0, 0.0,
  ])
  // 创建顶点属性 3个数值为一个顶点数据
  geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))
  // 创建索引 0, 1, 2组成一个面，2, 3, 0也组成一个面
  const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
  // 创建索引属性
  geometry.setIndex(new THREE.BufferAttribute(indices, 1))
  

image.png