ThreeJS入门（084）：THREE.DiscreteInterpolant 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 084篇入门文章

THREE.DiscreteInterpolant 是 Three.js 中用于实现离散数据插值的一个类。与 THREE.CubicInterpolant 不同，THREE.DiscreteInterpolant 主要用于离散数据点之间的插值，而不是通过计算导数来进行平滑插值。这种插值方式适合于数据点之间没有明确的导数信息的情况，例如从传感器采集的数据或不规则采样的数据。

构造函数

构造函数 new THREE.DiscreteInterpolant(times, values, stride, resultBuffer) 接受四个参数来定义一个离散插值器。

参数说明

• times：一个包含采样时刻的数组。这些时刻通常是递增的时间戳或帧编号。
• values：一个包含采样值的数组。这些值通常是三维空间中的位置或其他多维数据。
• stride：表示每个采样值所占用的数据元素数量。例如，对于三维位置，stride 为 3。
• resultBuffer：一个用于存储插值结果的缓冲区，通常是一个 Float32Array 或者 THREE.Vector3 等类型的对象。

方法

THREE.DiscreteInterpolant 提供了以下常用的方法来操作和查询插值结果：

• interpolate(i, time, result)：根据给定的时间 time 和索引 i 在采样点之间进行插值，并将结果存储在 result 中。

示例

创建一个基本的 DiscreteInterpolant 对象：

const times = [0, 1, 2, 3]; // 时间戳
const values = [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3]; // 三维位置
const stride = 3; // 每个采样值包含三个分量（x, y, z）
const resultBuffer = new Float32Array(3); // 存储插值结果
const interpolant = new THREE.DiscreteInterpolant(times, values, stride, resultBuffer);

在这个例子中，我们定义了一个离散插值器，它将在给定的时间戳之间插值三维位置。

插值过程

要使用 interpolate 方法进行插值，首先需要找到当前时间 time 所处的时间段，并计算出相应的插值结果：

const i = interpolant.findTimeIndex(time); // 找到当前时间所处的时间段
const result = new THREE.Vector3(); // 结果存储在 Vector3 对象中
interpolant.interpolate(i, time, result.array); // 进行插值
console.log(result.x, result.y, result.z); // 输出插值结果

使用 THREE.DiscreteInterpolant 在 Three.js 中

THREE.DiscreteInterpolant 在 Three.js 中主要用于实现基于离散数据点的插值。这种插值方式适用于数据点之间没有明确的导数信息的情况，例如从传感器采集的数据或不规则采样的数据。

示例：物体平滑移动

假设你想让一个物体沿着离散的数据点移动：

const times = [0, 1, 2, 3, 4, 5]; // 时间戳
const values = [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5]; // 三维位置
const stride = 3; // 每个采样值包含三个分量（x, y, z）
const resultBuffer = new Float32Array(3); // 存储插值结果
const interpolant = new THREE.DiscreteInterpolant(times, values, stride, resultBuffer);

const animate = function () {
    requestAnimationFrame(animate);
    const currentTime = Date.now() / 1000; // 获取当前时间（秒）
    const i = interpolant.findTimeIndex(currentTime); // 找到当前时间所处的时间段
    const result = new THREE.Vector3(); // 结果存储在 Vector3 对象中
    interpolant.interpolate(i, currentTime, result.array); // 进行插值
    mesh.position.set(result.x, result.y, result.z); // 设置物体位置
    renderer.render(scene, camera); // 渲染场景
};

animate();

这段代码展示了如何使用 THREE.DiscreteInterpolant 让一个物体沿着离散的数据点移动。

总结

THREE.DiscreteInterpolant 是一个用于实现离散数据插值的类，提供了丰富的操作和查询插值结果的方法。通过这些方法，你可以设置采样时刻、采样值、步长和结果缓冲区，并在给定的时间点上进行插值计算。在 Three.js 的许多功能中，THREE.DiscreteInterpolant 对于处理离散数据点的插值非常重要。理解并熟练使用 THREE.DiscreteInterpolant 对于开发高质量的 Three.js 应用程序是非常有帮助的。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。