核心内容摘要
告别多平台切换烦恼：Simple Live直播聚合工具全解析
目录
引言为什么我们需要“回去”
核心理论逆矩阵的几何意义
数学推导
几何解释
实战应用为什么这很重要场景点击一个歪歪扭扭的盒子
代码实现基于 Three.js
使用封装好的 API
手动实现还原数学原理
更通俗易懂的例子核心逻辑代码实现在 3D 开发如 Three.js、WebGL中我们经常使用模型矩阵将物体从局部坐标系转换到世界坐标系。
但你是否思考过如何反向操作现在从数学原理与几何意义出发探讨“模型矩阵的逆矩阵”在坐标转换中的核心作用并结合射线拾取Raycasting等实际场景
引言为什么我们需要“回去”我们最熟悉的流程通常是这样的在建模软件里建好一个模型局部坐标Local Space。
把它加载到场景中设置position、rotation、scale。
渲染引擎通过模型矩阵自动帮我们把顶点的局部坐标转换成了世界坐标最终显示在屏幕上。
公式很简单但是在很多高阶交互场景下比如鼠标点击检测、父子层级变换我们需要反着来——已知一个世界坐标中的点想知道它相对于某个物体中心的坐标是多少。
这就涉及到了线性代数中一个极其优美的概念逆矩阵Inverse Matrix。
核心理论逆矩阵的几何意义如果说模型矩阵M 是一张“单程票”把点从家局部带到了世界广场那么M的逆矩阵就是一张“返程票”把点从世界广场送回家。
数学推导根据线性代数的基本性质
几何解释模型矩阵 (M)记录了物体是如何平移、旋转、缩放的。
逆矩阵 (M的逆)记录了如何撤销这些平移、旋转、缩放。
一句话
总结模型矩阵是将局部坐标系转换到世界坐标系模型矩阵的逆就是将世界坐标系转换回局部坐标系。
实战应用为什么这很重要在实际工程中它解决了一个巨大的痛点碰撞检测与交互Raycasting。
场景点击一个歪歪扭扭的盒子假设场景里有一个被旋转了 45 度、又被缩放过的盒子Box。
你需要判断鼠标点击出的射线Ray是否击中了这个盒子。
困难的做法在世界坐标系算你需要计算射线与一个“倾斜的立方体”的交点。
这涉及复杂的立体几何运算计算量大且容易出错。
聪明的做法在局部坐标系算利用逆矩阵获取盒子的模型矩阵求逆得到 M的逆用 M的逆 把鼠标发出的射线World Ray变换一下变回盒子的局部空间。
奇迹发生了在局部空间里盒子永远是正正方方的Axis-aligned中心通常在原点。
我们只需要判断“一条歪射线”和“一个正盒子”是否相交。
这仅仅是简单的if (x minX x maxX)的运算速度快了几个数量级Three.js 的Raycaster底层正是利用了这个逻辑才实现了高效的拾取。
代码实现基于 Three.js在 Three.js 中虽然封装好的worldToLocal方法屏蔽了细节但理解底层原理不是更香吗
使用封装好的 APIconst mesh new THREE.Mesh(geometry, material); scene.add(mesh); // 假设有一个世界坐标点 const worldPoint new THREE.Vector3(10, 5,
; // 直接转换回 mesh 的局部坐标 mesh.worldToLocal(worldPoint); console.log(worldPoint); // 输出该点相对于 mesh 中心的位置
手动实现还原数学原理const worldPoint new THREE.Vector3(10, 5,
; //
获取物体的世界变换矩阵 const matrixWorld mesh.matrixWorld; //
计算逆矩阵 const inverseMatrix new THREE.Matrix4(); inverseMatrix.copy(matrixWorld).invert(); // 求逆 //
应用逆矩阵 P_local M_inv * P_world const localPoint worldPoint.clone().applyMatrix4(inverseMatrix); console.log(localPoint);
更通俗易懂的例子判定一个点是否在一个box内呢知道box的模型矩阵及点的世界坐标核心逻辑困难模式世界坐标系你的 Box 是歪的被旋转过点也是任意的。
你需要判断点是否在六个倾斜面的“中间”这需要算点到平面的距离非常麻烦。
简单模式局部坐标系利用模型矩阵的逆把世界坐标的点变换回 Box 的局部坐标在局部坐标系里Box 永远是正正方方的通常中心在原点或者是已知的 min/max 范围。
你只需要做最简单的大小比较AABB 检测。
代码实现// 假设 boxMesh 是你的物体pointWorld 是世界坐标中的点(Vector