three MathUtils 数据函数

444 阅读6分钟

在 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 中用于进行逆线性插值的函数。它计算的是 valuexy 之间的相对位置,即给定一个范围 [x, y] 和一个值 value,返回 value 所处的位置在这个范围的百分比。返回的值是一个介于 01 之间的浮点数。
  • lerp ( x : Float, y : Float, t : Float ) : Float x - 起始点。 y - 终点。 t - 闭区间 [0,1] 内的插值因子。 1728869252427.png
    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] 的函数。它通过线性映射的方式将数值从一个区间转换到另一个区间,非常适用于将输入值从一个数值范围缩放到另一个范围。 1728869575231.png
    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 超过这个区间时,它会以“乒乓”的方式返回到该区间,类似于反复来回的运动。 1728870323609.png
    // 基本示例
    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)之间创建平滑的过渡效果。 1728870850201.png
    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,但具有更强的平滑效果。它通常用于创建更自然的过渡效果,特别是在动画或图形渲染中。 1728871033267.png
    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);