空间 - 位置变换:
// 假设有一个Three.js的对象: object3D
// 存储矩阵位置
const matrix = object3D.matrix.clone();
const matrixArray = matrix.toArray(); // 转换为数组
// 之后,当你需要恢复位置时
object3D.matrix.fromArray(matrixArray); // 从数组中恢复矩阵
object3D.matrixWorldNeedsUpdate = true; // 通知Three.js需要更新世界矩阵
// 如果对象有子对象,你可能还需要更新子对象的矩阵
object3D.traverse(function(child) {
if (child.matrixWorldNeedsUpdate === true) {
child.matrixWorldNeedsUpdate = false;
child.matrixWorld.multiplyMatrices(object3D.matrixWorld, child.matrix);
// 如果子对象也有子对象,递归更新...
}
});
着色器-位置变换:
1、matrixCompMult(mat x, mat y)
矩阵x与y相乘
2、outerProduct(vec3 a, vec3 b)
向量a与b的外积
3、transpose(mat3 m)
矩阵的转置
4、inverse(mat3 m)
矩阵的反转
着色器-常用方法:
sin(time),cos(time):周期性变换函数
normalize(x):归一化操作,即x / length(x),算单位标量
length(x):求矢量的长度,sqrt( x0 + x1 + … )
distance(p0, p1):求两点距离,即length(p0 - p1)
向量a+向量b:
向量a-向量b:(对称 相加的向量结果)
dot(a, b):点积 相乘 a在b的投影
cross(vec3 x, vec3 y) 叉积 法线
求矢量x与y的叉乘,即(x1 · y2 - y1 · x2 , x2 · y0 - y2 · x0 , x0 · y1 - y0 · x1)
弧度 角度知识点
三角函数sin cos tan和弧度,度等定义及其相关_cos是求锐角的弧度?-CSDN博客
数学乐
矩阵变换知识点:
旋转
运动
clamp(x, minVal, maxVal)
求minVal与maxVal之间的数值,即min(max(x, minVal), maxVal)
mix(x, y, a)
x与y的混合,即x * (1- a) + y * a
step(edge, x)
阶跃函数。当x < edge时返回0,否则返回1
smoothstemp(edge0, edge1, x)
平滑阶跃函数。当x <= edge0且x >= edge1时,返回0。否则在[0, 1]区间执行Hermite插值(edge0 < x < edge1)
floor(x)
向下取整,返回小于等于x的整数
fract(x)
返回x-floor(x),即返回x的小数部分
mod(x, y)
返回x和y的模
坐标系
ThreeJS 坐标系转化_three.js 坐标系转换-CSDN博客
// = object.matrixWorld 对象世界矩阵
uniform mat4 modelMatrix;
// = camera.matrixWorldInverse * object.matrixWorld 摄像机置换矩阵*物体世界矩阵
uniform mat4 modelViewMatrix;
// = camera.projectionMatrix 摄像机投影矩阵
uniform mat4 projectionMatrix;
// = camera.matrixWorldInverse 视图 相机矩阵WorldInverse
uniform mat4 viewMatrix;
// = inverse transpose of modelViewMatrix 模型ViewMatrix的逆转置
uniform mat3 normalMatrix;
// = camera position in world space 摄像机位置
uniform vec3 cameraPosition;
position : 物体顶点位置
uv:控制颜色外表的坐标
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );