东莞网站维护,电子购物网站建设,网页版抖音入口官网,网站前台展示1. 归一化函数
对一个向量进行归一化处理#xff0c;即调整向量的模长#xff08;长度#xff09;为1#xff0c;同时保持其方向不变。
// 归一化函数
function normalized(arr) {let sum 0;for (let i 0; i arr.length; i) {sum arr[i] * arr[i];}const middle …1. 归一化函数
对一个向量进行归一化处理即调整向量的模长长度为1同时保持其方向不变。
// 归一化函数
function normalized(arr) {let sum 0;for (let i 0; i arr.length; i) {sum arr[i] * arr[i];}const middle Math.sqrt(sum);for (let i 0; i arr.length; i) {arr[i] arr[i] / middle;}
}const vector [3, 4]; // 原始向量
normalized(vector);
console.log(vector); // 输出[0.6, 0.8]归一化后的向量
2. 叉积
叉积常被用来计算求两个平面的法向量这个结果向量通常用于确定法线normal方向比如在计算光照效果时。
// 叉积函数获取法向量,固定写法
function cross(a, b) {return new Float32Array([a[1] * b[2] - a[2] * b[1], //这是叉积结果向量的x分量。a[2] * b[0] - a[0] * b[2], //这是叉积结果向量的y分量。a[0] * b[1] - a[1] * b[0], //这是叉积结果向量的z分量。])
}const a [1, 2, 3];
const b [4, 5, 6];
console.log(cross(a, b)); // 结果为[-3, 6, -3]3. 点积
求某点在xyz轴上的投影长度
// 点积函数 获取投影长度
function dot(a, b) {return a[0] * b[0] a[1] * b[1] a[2] * b[2]
}const a [1, 2, 3];
const b [4, 5, 6];
console.log(dot(a, b)); // 结果为32
4. 向量差
向量差用来获取视点到目标点之间的向量。
// 向量差
function minus(a, b) {return new Float32Array([a[0] - b[0],a[1] - b[1],a[2] - b[2],])
}const a [1.0, 2.0, 3.0]
const b [4.0, 5.0, 6.0]
console.log(minus(a, b)) // 结果为[-3.0, -3.0, -3.0]
5. 视图矩阵
基于给定点的视点、注视点和上方向向量来确定视图的方向并生成相应的矩阵。
// 视图矩阵获取
function getViewMatrix(eyex, eyey, eyez, lookAtx, lookAty, lookAtz, upx, upy, upz) {// 视点const eye new Float32Array([eyex, eyey, eyez])// 目标点const lookAt new Float32Array([lookAtx, lookAty, lookAtz])// 上方向const up new Float32Array([upx, upy, upz])// 确定z轴const z minus(eye, lookAt)// 确定x轴normalized(z)normalized(up)const x cross(z, up)// 确定y轴normalized(x)const y cross(x, z)return new Float32Array([x[0], y[0], z[0], 0,x[1], y[1], z[1], 0,x[2], y[2], z[2], 0,-dot(x, eye), -dot(y, eye), -dot(z, eye), 1])
}
6. 正射投影矩阵
// 获取正射投影矩阵
function getOrtho(l, r, t, b, n, f) {return new Float32Array([2 / (r - l), 0, 0, 0,0, 2 / (t - b), 0, 0,0, 0, -2 / (f - n), 0,-(r l) / (r - l), -(t b) / (t - b), -(f n) / (f - n), 1,])
}
7. 透视投影矩阵
// 获取透视投影矩阵
function getPerspective(fov, aspect, far, near) { //视角宽高比远近fov fov * Math.PI / 180;return new Float32Array([1 / (aspect * Math.tan(fov / 2)), 0, 0, 0,0, 1 / (Math.tan(fov / 2)), 0, 0,0, 0, -(far near) / (far - near), -(2 * far * near) / (far - near),0, 0, -1, 0,])
}
