Three.js-任意平面的鏡像矩陣


1. 什么是鏡像變換

直接看下面這張圖:

這張圖很好的詮釋了鏡像變化,關於y軸的變化,關於x軸的變化。這種關於任意軸的變化,就是鏡像了。

2d下的鏡像矩陣變化

我們以圖像關於Y軸鏡像為例子:原圖形和結果圖形上所有點的都存在的關系就應該是  x = -x, 

也就是都只有x發生變化。這種通用的變化其實可以用矩陣表示,2D空間中的點其實可以用[x,y ] 表示。對角線的兩個1就是關於那個軸對稱:

這些都是關於x軸、 y軸的對稱, 如果說關於2d平面的任意一條直線呢,當然有人已經幫我們推導出來了如下圖:(數學證明我就不給出了,有興趣的可以自行百度,本篇文章注重3d鏡像矩證的推導)

3d 圖形下關於任意平面的鏡像矩陣推導:

首先給大家介紹下three.js 中的Plane  有兩部分構成一個是平面的法向量(normal - 單位向量)和原點到平面的距離(constant); 平面上的點都滿足 Ax + By + Cz + D = 0;  這個平面推導過程不清楚的同學可以看下這里:點擊這里

  •  A, B ,C 這3個參數代表的是平面法向量的(x,y,z) 
  • D  就是上文的constant這個參數

問題很簡單假設空間中存在點P 和(x,y,z) 以及平面(n,D) 求P點關於平面的鏡像矩陣如圖:

 

  簡單解釋一下圖中內容:

設點P(x, y, z)為平面正方向上的一點,點O是P(x, y, z)在平面上的投影,點A(xa, ya, za)是平面上任取的一點,而P’(x’, y’, z’)則是點P(x, y, z)相對與平面的鏡像點,另外的,我們還假設由點A到點P的向量為a(x - xa, y - ya, z - za),由點O到點P的向量為b,平面法向量為n(xn, yn, zn),平面到原點的帶符號距離為D.

其實說白了我就是推導P’ = mirrorMatrix * P 。

從圖片中可以的出  P’P = 2 b   所以可以得出 P’ = P  - 2b

所以我們現在的問題是如何求解b向量 ?  其實只要求解 a 向量在法向量上的投影就好了

所以就能夠得到 b =  a * n * n

ok 由於 a* n 是一個標量所以在這里我們先求解一下

 

 a * n = (x - xa,  y - ya,  z - za ) * (xn,  yn,  zn) = (x - xa) * xn + (y - ya) * yn + (z - za) * zn = x * xn + y * yn + z * zn - xa * xn - ya * yn - za * zn 

 

又因為點A是平面上的點,所以自然滿足平面方程 (不清楚的同學點擊這里:點擊

 

xa *  xn + ya * yn + za * zn + D =  0

D = - (xa * xn + ya * yn + za * zn)

 

帶入到上面 a * n 的方程 :

 

a*n =  x * xn + y*yn + z *zn + D

所以這時候b向量就可以很好的表示了

b =  ( x * xn + y*yn + z*zn + D ) * n 

 

截止到這里我們已經成功的消元了, 因為A 點是空間中任意一點嘛。

P’ =  P - 2b =  P - 2 *( x * xn + y*yn + z*zn + D ) * n 

到這里我們已經成功求出 P 和 P’ 的關系

接下來就是求出 在 x ,y ,z 上的分量。

 

首先嘗試計算點P’的x分量,我們有:

P’x = x - 2 * (x * xn + y * yn + z * zn + D) * xn

= (1 - 2 * xn * xn) * x - 2 * xn * yn * y - 2 * xn * zn * z - 2 * xn * D

 

根據這個表達式,並根據矩陣乘法規則,我們便可以得到變換矩陣的第一行元素: 

 m11 = 1 - 2 * xn * xn

m12 = -2 * xn * yn

m13 = -2 * xn * zn

m14 = -2 * xn * D

同樣的方法,點P’的y,z分量分別為: 

 P’y  =  y - 2 * (x * xn + y * yn + z * zn + D) * yn 

 = - 2 * xn * yn * x + (1 - 2 * yn * yn) * y - 2 * yn * zn * z - 2 * yn * D 

 

 P’z = z - 2 * (x * xn + y * yn + z * zn + D) * zn 

 = - 2 * xn * zn * x - 2 * yn * zn * y + (1 - 2 * zn * zn) * z - 2 * zn * D 

 

對應的,矩陣的第二行元素和第三行元素分別為:

m21 = -2 * xn * yn

m22 = 1 - 2 * yn * yn

m23 = -2 * yn * zn

m24 = -2 * yn * D

 

m31 = -2 * xn * zn

m32 = -2 * yn * zn

m33 = 1 - 2 * zn * zn

m34 = -2 * zn * D 

矩陣的最后一行 我們暫時不關心設置為默認:

m41 = 0

m42 = 0

m43 = 0

m44 = 1

最后的提醒:

  • 空間中如果是圓者是弧這種圖像 關於任意平面對稱, 這時候的圖像的nomal 應該是 Matrix3 不帶位移的。 也就是將文中的Matrix4 轉為Matrix3
  • 本文是矩陣乘以向量所以是矩陣在前,如果在實際運用中你是后乘,也就是矩陣在后面 需要將m14 和  m41 、 m24 和 m42  、 m34 和 m43  、 互換位置。不清楚的同學百度搜索向量和矩陣相乘。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM