three.js杂记

空间 - 位置变换：

// 假设有一个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 );