别再死记硬背公式了！用Unity/Three.js实战案例，5分钟搞懂向量点乘和叉乘

刚接触三维向量运算时，很多人会陷入公式记忆的泥潭。但真正的开发者都知道，数学工具的价值在于解决实际问题。今天我们就用游戏开发和Web 3D中的典型场景，带你重新认识点乘和叉乘——不是作为数学符号，而是作为解决问题的利器。

想象这些场景：敌人是否发现了玩家？物体表面应该如何反射光线？两个平面之间的夹角如何计算？这些问题的答案都藏在向量运算中。我们将通过Unity和Three.js的代码实例，让你在动手实践中理解这些概念。

1. 点乘：不只是数学公式，更是游戏AI的感知工具

在Unity中开发第一人称射击游戏时，我们经常需要判断敌人是否"看到"了玩家。这个看似复杂的问题，用点乘可以轻松解决。

点乘的几何意义是测量两个向量之间的夹角余弦值。具体来说，给定两个向量A和B：

csharp复制// Unity C#示例
float dotProduct = Vector3.Dot(A.normalized, B.normalized);

这个简单的运算结果能告诉我们：

• 结果为1：两向量方向完全相同
• 结果为0：两向量垂直
• 结果为-1：两向量方向完全相反

实战应用：视野检测系统

假设我们要实现一个敌人AI，当玩家进入其视野范围（比如120度锥形区域）时触发警报。传统方法可能需要复杂的角度计算，而使用点乘只需几行代码：

csharp复制// Unity中的视野检测
public bool IsPlayerInSight(Transform enemy, Transform player, float fieldOfViewAngle) {
    Vector3 directionToPlayer = player.position - enemy.position;
    float dotValue = Vector3.Dot(enemy.forward, directionToPlayer.normalized);
    float cosThreshold = Mathf.Cos(fieldOfViewAngle * 0.5f * Mathf.Deg2Rad);
    return dotValue > cosThreshold;
}

注意：这里使用了余弦值比较而非直接角度计算，避免了频繁的三角函数运算，性能更优。

点乘在此场景中的优势显而易见：

• 计算效率高，适合每帧执行
• 代码简洁易读
• 可轻松调整检测范围

2. 叉乘：从三角面片到逼真光照的关键

叉乘在三维图形中的经典应用是计算表面法线。法线不仅决定了光照效果，还影响着碰撞检测、物理模拟等核心功能。

在Three.js中创建自定义几何体时，我们经常需要手动计算法线。假设我们有一个由三个顶点组成的三角形：

javascript复制// Three.js中计算三角形法线
const vA = new THREE.Vector3(1, 0, 0);
const vB = new THREE.Vector3(0, 1, 0);
const vC = new THREE.Vector3(0, 0, 1);

const edgeAB = new THREE.Vector3().subVectors(vB, vA);
const edgeAC = new THREE.Vector3().subVectors(vC, vA);

const normal = new THREE.Vector3();
normal.crossVectors(edgeAB, edgeAC).normalize();

这个法线向量将决定：

• 光照计算时的表面朝向
• 碰撞检测时的接触方向
• 材质渲染时的反射效果

右手定则的实际应用

叉乘结果的方向遵循右手定则，这在确定表面"内外"时至关重要。比如在构建自定义网格时，正确的法线方向决定了：

• 背面剔除是否正常工作
• 光照计算是否正确
• 物理碰撞是否准确

下表对比了不同顺序叉乘的结果：

3. 组合应用：构建完整的3D交互系统

单独使用点乘或叉乘已经能解决很多问题，但它们的真正威力在于组合应用。让我们看一个完整的角色交互系统案例。

案例：可攀爬表面检测

在动作游戏中，我们常需要检测哪些表面可以被角色攀爬。这需要同时使用两种运算：

1. 用叉乘计算墙面法线
2. 用点乘判断角色朝向与墙面法线的关系

csharp复制// Unity中的攀爬检测
public bool CanClimbSurface(Vector3 characterForward, Vector3[] surfaceVertices) {
    // 计算表面法线
    Vector3 edge1 = surfaceVertices[1] - surfaceVertices[0];
    Vector3 edge2 = surfaceVertices[2] - surfaceVertices[0];
    Vector3 surfaceNormal = Vector3.Cross(edge1, edge2).normalized();
    
    // 判断表面是否足够"垂直"
    float verticality = Vector3.Dot(surfaceNormal, Vector3.up);
    bool isVertical = Mathf.Abs(verticality) < 0.3f;
    
    // 判断角色是否面向墙面
    float facing = Vector3.Dot(characterForward, -surfaceNormal);
    
    return isVertical && facing > 0.7f;
}

这个例子展示了如何将两种运算结合使用：

• 叉乘确定几何属性
• 点乘评估空间关系
• 组合判断实现复杂交互

4. 性能优化与调试技巧

理解了基本原理后，我们需要关注实际项目中的实现细节。以下是几个关键优化点：

1. 归一化的正确使用

javascript复制// Three.js中低效写法
const direction = new THREE.Vector3().subVectors(target, origin);
const normalizedDir = direction.clone().normalize();
const dot = normalizedDir.dot(anotherNormalized);

// 优化后写法
const direction = new THREE.Vector3().subVectors(target, origin);
const lenSq = direction.lengthSq();
const dot = direction.dot(another) / Math.sqrt(lenSq * anotherLenSq);

2. 可视化调试工具

在Unity中，我们可以使用Debug.DrawRay来可视化向量：

csharp复制// 绘制法线（红色）和视线（绿色）
Debug.DrawRay(transform.position, normal * 2, Color.red);
Debug.DrawRay(transform.position, viewDirection * 3, Color.green);

3. 常见问题排查表

5. 进阶应用：从基础运算到高级效果

掌握了基础应用后，这些运算还能实现更复杂的效果：

1. 反射向量计算

glsl复制// Shader中的反射计算
vec3 reflectDir = reflect(-lightDir, normal);
float specular = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);

2. 速度分解与投影

csharp复制// 计算速度在斜坡上的分量
Vector3 velocityOnSlope = velocity - Vector3.Dot(velocity, slopeNormal) * slopeNormal;

3. 多边形三角剖分

javascript复制// 判断三角形朝向
const cross = new THREE.Vector3().crossVectors(v2-v1, v3-v1);
const isFrontFacing = cross.dot(cameraDirection) < 0;

这些例子展示了向量运算如何从基础功能延伸到高级渲染和物理模拟。关键在于理解其几何意义，而非死记公式。