what?

在three.js中，几何体（Geometry）是用于定义三维物体的形状和结构的对象。它定义了一组顶点（Vertices）和连接这些顶点的面（Faces）。几何体可以包含各种类型的面，例如三角形、矩形、多边形等。

再看具体几何体之前，我们先来看一下缓冲类型几何体BufferGeometry

缓冲类型几何体 BufferGeometry

BufferGeometry是three.js中的一个高性能的几何体对象，它在渲染、处理和传输几何数据时具有更高的效率和性能。

与传统的几何体（Geometry）对象不同，BufferGeometry直接使用底层的缓冲区（Buffer）来存储顶点、面和其他属性的数据。这种直接访问缓冲区的方式在大规模或复杂的场景中更为高效，因为它减少了对JavaScript对象的频繁操作，从而提高了渲染的性能。

使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。

GPU是Graphics Processing Unit（图形处理器）的缩写。它是一种专门用于处理图像和图形计算的硬件设备。GPU最早是为了在电脑上显示图像而开发的，但随着计算机图形的发展，GPU逐渐成为进行复杂计算的强大工具。

相较于通用的中央处理器（CPU），GPU在并行处理能力上具有优势。它被广泛应用于各种领域，包括游戏图形渲染、科学计算、人工智能和深度学习等。由于GPU能够同时处理多个任务或数据，它在处理大规模并行计算时速度更快、效率更高。

Three.js提供的几何体

Three.js 所提供的几何体对象是基于 BufferGeometry 对象之上的一种封装。

如下图，展示了Three.js提供的几何体，具体使用方法可查看Geometry

自定义几何体

使用 BufferGeometry 对象并手动指定顶点和面的数据，创建自定义几何体

如下面的示例代码

<template>
  <div class="container" ref="container" />
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const container = ref()

function initThree(instance) {
// 创建场景
  const scene = new THREE.Scene()

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    75, // 视角
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近裁剪平面
    1000 // 远裁剪平面
  )

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 将渲染器添加到DOM元素中
  container.value.appendChild(renderer.domElement)

  // 创建一个 BufferGeometry 对象
  const geometry = new THREE.BufferGeometry()

  // 定义顶点坐标数组
  const vertices = [
    0,
    0,
    0, // 第一个顶点的 x、y、z 坐标
    1,
    0,
    0, // 第二个顶点的 x、y、z 坐标
    0,
    1,
    0 // 第三个顶点的 x、y、z 坐标
  ]

  // 创建 Float32Array 数组来存储顶点数据
  const verticesArray = new Float32Array(vertices)

  // 将顶点数据设置到 BufferGeometry 中
  geometry.setAttribute('position', new THREE.BufferAttribute(verticesArray, 3))

  // 定义面的索引数组
  const indices = [
    0, 1, 2 // 定义一个三角形，顶点索引为 0、1、2
  ]

  // 创建 Uint16Array 数组来存储面的索引数据
  const indicesArray = new Uint16Array(indices)

  // 将面的索引数据设置到 BufferGeometry 中
  geometry.setIndex(new THREE.BufferAttribute(indicesArray, 1))

  // 创建材质并设置颜色
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

  // 创建网格对象并将几何体和材质应用到网格上
  const mesh = new THREE.Mesh(geometry, material)

  // 将网格对象添加到场景中进行渲染
  scene.add(mesh)

  // 设置相机位置
  camera.position.z = 5

  // 创建动画函数，旋转立方体
  const animate = function () {
    requestAnimationFrame(animate)

    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
  }

  // 调用动画函数
  animate()
}

onMounted(() => {
  initThree()
})

</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

我们首先创建了一个BufferGeometry对象，并定义了顶点坐标数组和面的索引数组。然后，我们将顶点和面的数据分别存储在Float32Array和Uint16Array中，并将它们设置到BufferGeometry中，从而达到自定义的目的。

Three.js基础（一）：几何模型Geometry

what?

缓冲类型几何体 BufferGeometry

Three.js提供的几何体

自定义几何体