在 Three.js 中，
Interpolant是一个用于数据插值的类，用来在给定的输入值（通常是时间）之间计算输出值。插值的作用是根据已知的离散数据点，通过某种算法计算出这些点之间的中间值，从而获得平滑的过渡效果。Interpolant类通常用于动画或其他需要平滑过渡的场景，比如对象的运动轨迹、颜色渐变、骨骼动画等。Three.js 提供了不同类型的插值器，用于处理不同类型的数据和插值方式。 以下是常见的Interpolant类：
- LinearInterpolant: 线性插值，直接在两个已知点之间进行线性过渡。这是最常见的插值方式，计算速度快，结果平滑。
- CubicInterpolant: 三次插值，通过三次多项式进行插值，适用于需要更平滑曲线的场景。
- DiscreteInterpolant: 离散插值，不进行过渡，直接跳跃到下一个值。适用于没有中间过渡的动画。
- QuaternionLinearInterpolant: 用于四元数的线性插值，常用于旋转动画，以避免欧拉角带来的万向锁问题。
Interpolant 在three中只介绍了这个基类但是这个基类不是直接使用的，这点是需要特别注意
Interpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )
Interpolant 有四个属性一个方法
- parameterPositions 对应参数中的 parameterPositions,
parameterPositions是 Three.js 中Interpolant类的一部分，它表示插值器的输入参数。通常，这些参数是一维数据，例如时间点、关键帧等。在插值过程中，parameterPositions决定了插值器在何时或在哪些位置计算输出值。
// 定义关键帧和对应的三维位置
const parameterPositions = [0, 1, 2, 3];
const sampleValues = [
0, 0, 0, // 位置 (0, 0, 0) 在时间点 0
10, 0, 0, // 位置 (10, 0, 0) 在时间点 1
10, 10, 0, // 位置 (10, 10, 0) 在时间点 2
0, 10, 0 // 位置 (0, 10, 0) 在时间点 3
];
const sampleSize = 3; // 每个样本的维度为 3 (x, y, z)
// 创建一个 resultBuffer 来存储插值结果
const resultBuffer = new Float32Array(sampleSize);
// 创建 LinearInterpolant 实例
const interpolant = new THREE.LinearInterpolant(
parameterPositions, // x 坐标或时间点
sampleValues, // y 值或数据点
sampleSize, // 数据维度
resultBuffer // 存储插值结果的数组
);
// 进行插值
const timeToEvaluate = 1.5; // 在时间点 1.5 进行插值
interpolant.evaluate(timeToEvaluate);
// 输出结果
console.log(resultBuffer); // 输出插值结果，例如 [10, 5, 0]
- resultBuffer 在 Three.js 的
Interpolant类中，插值计算是通过调用evaluate方法来进行的。每次调用evaluate方法时，不会自动记录之前的计算结果。evaluate方法只是在你调用时执行一次插值计算，并将结果存储在你提供的resultBuffer中。每次计算之后，resultBuffer会被更新为新的结果。 - sampleValues 在 Three.js 中，
sampleValues是与Interpolant类一起使用的关键参数。它代表要进行插值的样本值。根据插值的需要，sampleValues可以是任意维度的数据（如位置、颜色、动画帧等），并且它们的组织方式取决于插值的类型（如线性插值、立方插值等）。
// 定义关键帧和对应的三维位置
const parameterPositions = [0, 1, 2, 3];
const sampleValues = [
0, 0, 0, // 位置 (0, 0, 0) 在时间点 0
10, 0, 0, // 位置 (10, 0, 0) 在时间点 1
10, 10, 0, // 位置 (10, 10, 0) 在时间点 2
0, 10, 0 // 位置 (0, 10, 0) 在时间点 3
];
const sampleSize = 3; // 每个样本的维度为 3 (x, y, z)
// 创建一个 resultBuffer 来存储插值结果
const resultBuffer = new Float32Array(sampleSize);
// 创建 LinearInterpolant 实例
const interpolant = new THREE.LinearInterpolant(
parameterPositions, // x 坐标或时间点
sampleValues, // y 值或数据点
sampleSize, // 数据维度
resultBuffer // 存储插值结果的数组
);
// 进行插值
const timeToEvaluate = 1.5; // 在时间点 1.5 进行插值
interpolant.evaluate(timeToEvaluate);
// 输出结果
console.log(resultBuffer); // 输出插值结果，例如 [10, 5, 0]
- settings
- valueSize 每个样本的维度
方法
- evaluate 通过 parameterPositions 中的值计算 sampleValues 对应的值 如上例所示
