向量线性组合：开启新向量的大门

2024-01-04 15:15:29

在计算机图形学中，WebGL 赋予我们操纵三维世界的超能力。而向量的线性组合便是这股力量的基石，让我们能够将简单的向量融合创造出新的神奇向量。

向量：世界的基石

在三维空间中，向量是位置、方向和大小的数学实体。它们由一组有序的数字（分量）组成，每个分量代表一个特定的轴（如 X、Y 和 Z）。

线性组合：向量融合的艺术

线性组合本质上是一种数学运算，它将一组向量融合成一个新的向量。每个输入向量都乘以一个称为系数的数字，然后将这些加权值相加形成结果向量。

用数学术语来说，线性组合可以表示为：

V = c1 * V1 + c2 * V2 + ... + cn * Vn

其中：

V 是结果向量
V1、V2、...、Vn 是输入向量
c1、c2、...、cn 是系数

线性组合的妙用

线性组合在 WebGL 中的应用无穷无尽：

变换： 通过调整系数，我们可以缩放、旋转和移动向量。
投影： 我们可以使用线性组合将向量投影到特定平面或轴上。
创建新向量： 我们可以融合不同的向量来生成新的向量，这在创建复杂形状和动画时非常有用。

示例：在 WebGL 中创建正方体

让我们用一个简单的例子来说明线性组合的实际应用：创建一个正方体。

// 构建正方体的 8 个顶点
const vertices = [
  [-1, -1, -1], // 0
  [ 1, -1, -1], // 1
  [ 1,  1, -1], // 2
  [-1,  1, -1], // 3
  [-1, -1,  1], // 4
  [ 1, -1,  1], // 5
  [ 1,  1,  1], // 6
  [-1,  1,  1]  // 7
];

// 使用线性组合创建 12 条边的向量
const edges = [
  // 前面
  [0, 1],
  [1, 2],
  [2, 3],
  [3, 0],

  // 后面
  [4, 5],
  [5, 6],
  [6, 7],
  [7, 4],

  // 顶部
  [2, 6],
  [6, 7],
  [7, 3],
  [3, 2],
];

// 使用线性组合创建 6 个面的法向量
const normals = [
  // 前面
  [ 0,  0, -1],
  // 后面
  [ 0,  0,  1],
  // 顶部
  [ 0,  1,  0],
  // 底部
  [ 0, -1,  0],
  // 左侧
  [-1,  0,  0],
  // 右侧
  [ 1,  0,  0],
];