本地坐标和世界坐标---- geometry和mesh

geometry的point和mesh的position的关系

BufferGeometry 的坐标数据是相对于其所属的 Mesh 对象的原点（局部坐标系中的原点）来定义的。这意味着几何体顶点的位置是以 Mesh 的 position 属性作为参考点的。

这里的关键是 Mesh 的 position 属性本身定义了该对象在世界坐标系中的位置。然而，当我们谈论几何体内部的顶点坐标时，我们是在描述它们相对于 Mesh 的局部坐标系的位置，即 Mesh 的原点。

举个例子，如果你创建一个立方体 geometry，它的中心会默认位于局部坐标系的原点 (0, 0, 0)。
然后，如果你将这个 geometry 赋给一个 Mesh 并设置 Mesh 的 position 到 (5, 5, 5)，那么实际上是整个立方体被移动到世界坐标的 (5, 5, 5)。但是，该 geometry 内部的顶点坐标仍然是相对于它自己的中心点，即局部坐标系。

总的来说，Geometry 中的顶点坐标始终是相对于其父级 Mesh 的局部坐标系统来定义的，而 Mesh 的 position 属性则决定了它在世界空间中的位置。

进一步聊聊

在 Three.js 中，BufferGeometry 的坐标数据并不是世界坐标，而是局部坐标（或称为对象空间坐标）。当一个几何体被创建时，它的坐标是相对于自己的原点定义的。这些坐标描述了几何体的形状和结构，但它们并不知道几何体在场景中的具体位置。

Mesh 对象的 position, rotation, 和 scale 属性则定义了如何将这个局部空间中的几何体放置到世界空间中。Mesh 的 position 是指该 Mesh 在世界空间中的位置。这个位置是相对于其父级的 Object3D （如果有的话）或是相对于整个场景的全局位置。换句话说，Mesh 对象的 position 定义了其局部原点相对于世界空间的位置。

当场景被渲染时，Three.js 会使用每个 Mesh 的变换属性（position，rotation，scale）来计算一个变换矩阵。这个矩阵用于将几何体的局部坐标转换为场景中的世界坐标。这意味着几何体的顶点最终会根据这些属性被放置和定向在三维空间中的正确位置。

总结一下：

Geometry 或 BufferGeometry 的坐标数据是局部坐标，描述了几何体的形状，不考虑其在世界中的位置。
Mesh 对象的 position 是其所在世界空间中的位置，描述了几何体相对于世界原点的偏移。
Mesh 对象的 rotation 和 scale 也是相对于其本身，决定了几何体的朝向和大小。
当这些属性发生变化时，Three.js 使用变换矩阵在渲染时实时计算出顶点的最终世界坐标，但实际上 Geometry 的数据并未变化。

geometry的center实际上是做了什么呢?

在 Three.js 中，.center() 方法是 BufferGeometry 的一个方法，它的作用是调整几何体的顶点坐标，使得几何体的中心被移动到局部坐标系的原点（0, 0, 0）。
这通常被用来将几何体的中心与其对应的 Mesh 对象的原点对齐。

那么问题来了，有时候自定义顶点的几何体他的中心是什么呢？
实际上他是你geometry的AABB包围盒的几何体中心点。

在 Three.js 中，当我们提到几何体的“中心”时，
通常是指它的包围盒（BoundingBox）的中心。
geometry.center() 方法确实是通过计算几何体所有顶点的轴对齐包围盒
（Axis-Aligned Bounding Box，简称 AABB），
然后使用这个包围盒的中心来确定几何体应该如何平移，
以便其中心与局部坐标系的原点对齐。

包围盒的计算是通过找到几何体在每个坐标轴上的最小和最大值来完成的。
然后，基于这些最小和最大值可以确定出一个轴对齐的盒子，
完全包含了整个几何体。
该盒子的中心点就是所有最小和最大值在每个轴上取平均得到的点。

因此，.center() 方法使得该中心点变为局部坐标系的原点 (0, 0, 0)，
这通过对所有顶点进行相同的平移操作来实现。

需要注意的是，这种“中心”是基于物体形状的外围边界，
并不一定代表物体的几何重心或者体积重心。
复杂形状的几何体可能有一个质量分布不均匀，
导致其几何重心与包围盒中心并不重合。
但在许多情况下，特别是对于规则的、均匀分布的几何体，
这两个中心点会非常接近甚至相同。

当你调用 geometry.center() 方法时，Three.js 做了以下事情：

• 首先计算出几何体当前所有顶点的边界框（BoundingBox），以确定其在自身局部坐标系中的占位。
• 然后找到这个边界框的中心点。
  接着计算出从边界框中心点到局部坐标系原点（0, 0, 0）的偏移量。
• 最后，将所有顶点沿着这个偏移量平移相同的距离，这样几何体的中心就被移至局部坐标系原点。

这个操作不会改变 Mesh 的 position, rotation, 或 scale 属性。它只修改了几何体内部的顶点坐标。做完这个操作之后，如果 Mesh 的 position 是 (0, 0, 0)，那么geometry的几何体中心将会在世界空间的原点。

使用 .center() 方法可以方便地进行旋转和缩放操作，因为在很多情况下，有关于中心点的操作更直观和容易理解。

下面是一个示例代码段，演示如何使用 geometry.center()：

// 创建一个新的 BufferGeometry 实例
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 想象我们刚创建的盒子，它的中心现在是在局部坐标系的原点

// 将几何体的中心移动到局部坐标系的原点
geometry.center();

// 此时，该几何体的边界框的中心将与局部坐标系的原点对齐
// 这意味着几何体可能已经被平移，使得它看起来是围绕原点居中

// 现在创建一个 Mesh，并将处理过的几何体传入
const mesh = new THREE.Mesh(geometry, material);

// 将 Mesh 添加到场景中
scene.add(mesh);

在上述代码中，即使我们没有明确设置 mesh 的 position，由于 geometry 已经通过 .center() 方法居中了，所以 Mesh 的可视表现也会居于世界坐标系的原点，前提是 Mesh 的 position 保持默认值 (0, 0, 0)。