在 Three.js 中,
THREE.MathUtils是一个提供数学工具函数的类,常用于 3D 场景的数学计算,比如角度和弧度转换、生成随机数以及执行常见的数学运算。
MathUtils 是一个静态类,不需要动态的new 使用 这个类有二十个方法
方法
- clamp ( value : Float, min : Float, max : Float ) : Float value — 需要clamp处理的值。 min — 最小值。 max — 最大值。 限制数值value处于最小值min和最大值max之间。 如果值小于 min 返回最小值,如果大于min返回max
- degToRad ( degrees : Float ) : Float 将度转化为弧度。 因为rotation 接收的是弧度,这是一个简单的应用示例。
let val = THREE.MathUtils.degToRad(30);
console.log(val,"val");
let material = new THREE.MeshBasicMaterial({color: 0xff0000});
let geometry = new THREE.BoxGeometry(10,10,10);
// 假设你有一个立方体
let cube = new THREE.Mesh(geometry, material);
// 将角度 90 度转换为弧度
let radians = THREE.MathUtils.degToRad(30);
// 使用弧度设置旋转(以 Y 轴为例)
cube.rotation.y = radians; // 旋转 90 度;
scene.add(cube)
- euclideanModulo ( n : Integer, m : Integer ) : Integer
THREE.MathUtils.euclideanModulo(n, m)在 Three.js 中的作用是计算欧几里得模运算,它用于确保结果始终为正数,不论n是正还是负。这与常规的取模运算(即%)有所不同。
let result1 = -3 % 5; // 结果是 -3
let result2 = THREE.MathUtils.euclideanModulo(-3, 5); // 结果是 2
- generateUUID ( ) : UUID 创建一个全局唯一标识符 UUID。
- isPowerOfTwo ( n : Number ) : Boolean 如果 n 是2的幂,返回true。
- inverseLerp ( x : Float, y : Float, value : Float ) : Float
THREE.MathUtils.inverseLerp(x, y, value)是 Three.js 中用于进行逆线性插值的函数。它计算的是value在x和y之间的相对位置,即给定一个范围[x, y]和一个值value,返回value所处的位置在这个范围的百分比。返回的值是一个介于0和1之间的浮点数。 - lerp ( x : Float, y : Float, t : Float ) : Float x - 起始点。 y - 终点。 t - 闭区间 [0,1] 内的插值因子。
let x = 0; // 起始值
let y = 100; // 结束值
let t = 0.5; // 插值系数
// 计算插值
let result = THREE.MathUtils.lerp(x, y, t); // 结果是50,因为0到100之间的50%
console.log(result); // 输出 50
- damp ( x : Float, y : Float, lambda : Float, dt : Float ) : Float
THREE.MathUtils.damp(x, y, lambda, dt)是一种用于平滑过渡的插值函数,模拟了阻尼现象。它可以控制x根据时间dt和阻尼系数lambda平滑地接近目标值y。在需要平滑动画、物体运动或摄像机移动的场景中非常有用。
let x = 0;
let y = 100;
let lambda = 5; // 更大的lambda使得过渡更快
let dt = 0.1;
let fastResult = THREE.MathUtils.damp(x, y, lambda, dt);
console.log(fastResult); // 快速逼近100
lambda = 1; // 较小的lambda使得过渡更慢
let slowResult = THREE.MathUtils.damp(x, y, lambda, dt);
console.log(slowResult); // 缓慢逼近100
- mapLinear ( x : Float, a1 : Float, a2 : Float, b1 : Float, b2 : Float ) : Float
THREE.MathUtils.mapLinear(x, a1, a2, b1, b2)是一个用于将值x从一个范围[a1, a2]映射到另一个范围[b1, b2]的函数。它通过线性映射的方式将数值从一个区间转换到另一个区间,非常适用于将输入值从一个数值范围缩放到另一个范围。
let x = 500;
let a1 = 0;
let a2 = 1000;
let b1 = 0;
let b2 = 100;
let result = THREE.MathUtils.mapLinear(x, a1, a2, b1, b2);
console.log(result); // 输出 50,因为500是0到1000之间的中间值
- pingpong ( x : Float, length : Float ) : Float
THREE.MathUtils.pingpong(x, length)是一个用于在给定范围内循环往复的函数。它会将数值x约束在[0, length]的区间内,并且当x超过这个区间时,它会以“乒乓”的方式返回到该区间,类似于反复来回的运动。
// 基本示例
let x = 3;
let length = 5;
// 计算pingpong值
let result = THREE.MathUtils.pingpong(x, length);
console.log(result); // 输出 3,因为 x 在 0 到 5 之间,结果保持原值
// 超过范围的示例
let x = 7;
let length = 5;
// 计算pingpong值
let result = THREE.MathUtils.pingpong(x, length);
console.log(result); // 输出 3,因为 7 超出范围,等价于5 - (7 - 5) = 3
// 更大的 x 值
let x = 12;
let length = 5;
// 计算pingpong值
let result = THREE.MathUtils.pingpong(x, length);
console.log(result); // 输出 2,因为12被转换为“乒乓”运动的值,等价于 5 - (12 % 10 - 5) = 2
- ceilPowerOfTwo ( n : Number ) : Integer 这个方法会计算并返回大于等于
n的最小的 2 的幂值。
let n = 5;
// 计算大于等于 n 的 2 的最小次幂
let result = THREE.MathUtils.ceilPowerOfTwo(n);
console.log(result); // 输出 8, 因为 8 是大于等于 5 的最小的 2 的幂
- radToDeg ( radians : Float ) : Float 将弧度转换为角度。
- randFloat ( low : Float, high : Float ) : Float 在区间 [low, high] 内随机一个浮点数。
- randFloatSpread ( range : Float ) : Float 在区间 [- range / 2, range / 2] 内随机一个浮点数。
- randInt ( low : Integer, high : Integer ) : Integer 在区间 [low, high] 内随机一个整数。
- seededRandom ( seed : Integer ) : Float
THREE.MathUtils.seededRandom(seed)是一个用于生成伪随机数的函数,其随机性基于给定的种子(seed)。通过指定种子,可以确保每次调用生成相同的随机数序列。这在需要可重复性和可预测性的场景中非常有用,比如游戏开发中的随机事件或程序中的测试。
let seed = 12345;
// 使用种子生成随机数
let randomValue1 = THREE.MathUtils.seededRandom(seed);
let randomValue2 = THREE.MathUtils.seededRandom(seed); // 使用相同种子会得到相同的结果
console.log(randomValue1); // 输出一个介于 0 和 1 之间的随机数
console.log(randomValue2); // 输出与 randomValue1 相同的值
- smoothstep ( x : Float, min : Float, max : Float ) : Float THREE.MathUtils.smoothstep(x, min, max) 是一个用于平滑插值的函数。它通常用于将数值 x 规范化到 [0, 1] 的范围,并在指定的最小值(min)和最大值(max)之间创建平滑的过渡效果。
let min = 0;
let max = 10;
console.log(THREE.MathUtils.smoothstep(-5, min, max)); // 输出 0,因为 -5 < 0
console.log(THREE.MathUtils.smoothstep(5, min, max)); // 输出 0.5,因为 5 在 min 和 max 的中间
console.log(THREE.MathUtils.smoothstep(15, min, max)); // 输出 1,因为 15 > 10
- smootherstep ( x : Float, min : Float, max : Float ) : Float THREE.MathUtils.smootherstep(x, min, max) 是一个用于平滑插值的函数,类似于 smoothstep,但具有更强的平滑效果。它通常用于创建更自然的过渡效果,特别是在动画或图形渲染中。
let min = 0;
let max = 10;
console.log(THREE.MathUtils.smootherstep(-5, min, max)); // 输出 0,因为 -5 < 0
console.log(THREE.MathUtils.smootherstep(5, min, max)); // 输出接近 0.5,因为 5 在 min 和 max 的中间
console.log(THREE.MathUtils.smootherstep(15, min, max)); // 输出 1,因为 15 > 10
- setQuaternionFromProperEuler ( q : Quaternion, a : Float, b : Float, c : Float, order : String ) : undefined
THREE.MathUtils.setQuaternionFromProperEuler方法用于根据正确的欧拉角设置四元数。这个方法允许你使用三个角度(通常称为偏航、俯仰和滚转)和指定的旋转顺序来定义旋转。
// 创建一个四元数
const quaternion = new THREE.Quaternion();
// 定义欧拉角(以弧度为单位)
const yaw = Math.PI / 4; // 45度
const pitch = Math.PI / 6; // 30度
const roll = Math.PI / 3; // 60度
// 根据正确的欧拉角设置四元数
THREE.MathUtils.setQuaternionFromProperEuler(quaternion, yaw, pitch, roll, 'XYZ');
// 现在可以使用这个四元数进行旋转
console.log(quaternion);