參考資料：threejs中文網(wǎng)
threejs qq交流群：814702116
Three.js矩陣Matrix4
前面兩節(jié)課，給大家介紹了模型矩陣的數(shù)學(xué)基礎(chǔ)理論，下面給大家介紹Three.js的一個矩陣相關(guān)類Matrix4(4x4矩陣)，并用Matrix4創(chuàng)建平移矩陣、旋轉(zhuǎn)矩陣、縮放矩陣。
查看4x4矩陣Matrix4文檔，你可以看到很多相關(guān)矩陣相關(guān)的數(shù)學(xué)幾何計算方法。
創(chuàng)建4x4矩陣Matrix4對象
// 創(chuàng)建一個4x4矩陣對象
const mat4 = new THREE.Matrix4()
屬性.elements設(shè)置平移矩陣
通過4x4矩陣Matrix4的屬性.elements設(shè)置矩陣的值，比如設(shè)置一個平移矩陣。
.elements屬性值是一個數(shù)組，數(shù)組的元素就是4x4矩陣的16個數(shù)字，數(shù)字在數(shù)組中按照矩陣列的順序，一列一節(jié)輸入數(shù)組中。
// 平移矩陣，沿著x軸平移50
// 1, 0, 0, x,
// 0, 1, 0, y,
// 0, 0, 1, z,
// 0, 0, 0, 1
const mat4 = new THREE.Matrix4()
mat4.elements=[1,0,0,0, 0,1,0,0, 0,0,1,0, 50, 0, 0, 1];
.elements屬性不設(shè)置，默認(rèn)是單位矩陣。
const mat4 = new THREE.Matrix4()
// 默認(rèn)值單位矩陣
// 1, 0, 0, 0,
// 0, 1, 0, 0,
// 0, 0, 1, 0,
// 0, 0, 0, 1
console.log('.elements默認(rèn)值', mat4.elements);
頂點坐標(biāo)進行矩陣變換Vector3.applyMatrix4()
.applyMatrix4()是三維向量Vector3的一個方法，如果Vector3表示一個頂點xyz坐標(biāo)，Vector3執(zhí)行.applyMatrix4()方法意味著通過矩陣對頂點坐標(biāo)進行矩陣變換，比如平移、旋轉(zhuǎn)、縮放。
// 空間中p點坐標(biāo)
const p = new THREE.Vector3(50,0,0);
// 矩陣對p點坐標(biāo)進行平移變換
p.applyMatrix4(mat4);
console.log('查看平移后p點坐標(biāo)',p);
//用小球可視化p點位置
mesh.position.copy(p);
快速生成平移、旋轉(zhuǎn)、縮放矩陣
使用threejs平移矩陣、旋轉(zhuǎn)矩陣、縮放矩陣，可以不用自己直接設(shè)置.elements的值。threejs提供了一些更為簡單的方法，輔助創(chuàng)建各種幾何變換矩陣。
你可以分別測試下面方法，作為練習(xí)，去改變一個坐標(biāo)點，并用小球可視化變換后的坐標(biāo)位置。
- 平移矩陣
.makeTranslation(Tx,Ty,Tz) - 縮放矩陣
.makeScale(Sx,Sy,Sz) - 繞x軸的旋轉(zhuǎn)矩陣
.makeRotationX(angleX) - 繞y軸的旋轉(zhuǎn)矩陣
.makeRotationY(angleY) - 繞z軸的旋轉(zhuǎn)矩陣
.makeRotationZ(angleZ)
const mat4 = new THREE.Matrix4();
// 生成平移矩陣(沿著x軸平移50)
mat4.makeTranslation(50,0,0);
// 結(jié)果和.elements=[1,0,0,0,...... 50, 0, 0, 1]一樣
console.log('查看矩陣的值',mat4.elements);
平移矩陣案例文章來源：http://www.zghlxwxcb.cn/news/detail-857303.html
const mat4 = new THREE.Matrix4();
// 生成平移矩陣(沿著x軸平移50)
// mat4.makeTranslation(50,0,0);
console.log('查看矩陣的值',mat4.elements);
旋轉(zhuǎn)矩陣案例文章來源地址http://www.zghlxwxcb.cn/news/detail-857303.html
const mat4 = new THREE.Matrix4();
//生成繞z軸旋轉(zhuǎn)90度的矩陣
mat4.makeRotationZ(Math.PI/2);
到了這里，關(guān)于Three.js矩陣`Matrix4` 簡介的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
