Three.js 中归一化坐标的通用计算公式详解

2023-09-05 15:25:17

Three.js 中的归一化坐标是一个重要的概念，用于在三维空间中表示物体的相对位置和大小。本文将详细介绍一种通用的计算公式，让您轻松理解并应用归一化坐标。

认识归一化坐标

归一化坐标将物体的位置和大小转换为 0 到 1 之间的范围，这使得在不同大小和形状的对象之间进行操作变得更加容易。在 Three.js 中，归一化坐标系以原点为中心，X 轴向右延伸，Y 轴向上延伸，Z 轴向外延伸。

通用计算公式

为了计算对象的归一化坐标，可以使用以下通用公式：

归一化坐标 = (物体坐标 - 最小坐标) / (最大坐标 - 最小坐标)

其中：

物体坐标是物体在原始坐标系中的坐标。
最小坐标是原始坐标系中所有物体坐标的最小值。
最大坐标是原始坐标系中所有物体坐标的最大值。

步骤分解

1. 确定最小坐标和最大坐标

首先，需要确定原始坐标系中所有物体坐标的最小坐标和最大坐标。可以使用以下代码片段：

let minX = Infinity;
let minY = Infinity;
let minZ = Infinity;

let maxX = -Infinity;
let maxY = -Infinity;
let maxZ = -Infinity;

for (let i = 0; i < objects.length; i++) {
  const object = objects[i];

  minX = Math.min(minX, object.position.x);
  minY = Math.min(minY, object.position.y);
  minZ = Math.min(minZ, object.position.z);

  maxX = Math.max(maxX, object.position.x);
  maxY = Math.max(maxY, object.position.y);
  maxZ = Math.max(maxZ, object.position.z);
}

2. 计算归一化坐标

有了最小坐标和最大坐标，就可以使用通用公式计算每个物体的归一化坐标：

for (let i = 0; i < objects.length; i++) {
  const object = objects[i];

  object.normalizedPosition.x = (object.position.x - minX) / (maxX - minX);
  object.normalizedPosition.y = (object.position.y - minY) / (maxY - minY);
  object.normalizedPosition.z = (object.position.z - minZ) / (maxZ - minZ);
}