使用三.js时间序列数据

Using three.js with time series data

本文关键字：时间序列 数据 js      更新时间：2023-09-26

如何使用时间序列数据来指导三.js场景的动画？

例如：

  Time     | ObjA(x,y,z) | ObjB(x,y,z) | ...
  00:00:00 | 0,9,0       | 1,1,1       | ...
  00:00:10 | 0.1,0,0.1   | 1,0.5,1     | ...
  00:00:15 | 0.1,0.1,0.1 | 0.9,0.5,1   | ...

数据可以是数百行，如果不是数千行长。并且对象的数量也可以因数据集而异。

我已经阅读了使用补间.js和链接关键帧的内容。但是，在初始化期间创建和链接数千个补间感觉不像是正确的答案。

补间.js是正确的方法吗？还是我错过了可以更好地处理这种情况的延期？是否有任何类似用例的例子可以证明是有用的？

更新

所以导演.js肯定有能力给出正确的结果。但它看起来是用来在场景中补间摄像机运动，而不是指导数百个网格的运动。在数百个网格上将数千个补间链接在一起是实现脚本重播的最佳方式吗？

您提供的表格有点误导。通常，如果您有一个时间轴，并且对象的数量是动态的 - 您将创建多个时间轴，每个时间轴一个 - 这样可以更轻松地操作整个设置。

var Record = function(time, value){
    this.time = time;
    this.value = value;
};
var Signal = function(){
    this.records = [];
    this.findValue = function(time){
        //... some divide and conquer implementation
    }
    this.getInterpolatedValue = function(time){...};
    this.add = function(time,value){
        //make sure sequence is preserved by doing a check or just assuming that add is always called with time greater than what's already in the series
        this.records.push(new Record(time,value));
    }
};
var signalObjA = new Signal();
var signalObjB = new Signal();

当涉及到重播时，某种插值是必要的，你可能想要某种动画管理器，一种根据当前时间从信号中获取（信号，对象）对和设置对象值的东西。

var Binding = function(signal, object){
    this.signal = signal;
    this.object = object;
    this.applyTime = function(t){
       var val = this.signal.getInterpolatedValue(t);
       for(var p in val){
           if(val.hasOwnProperty(p)){
               this.object[p] = val[p]; //copying values into object
           }
       }
    }
}
var Simulator = function(){
    this.time = 0;
    this.bindings = [];
    this.step = function(timeDelta){
        this.time += timeDelta;
        var time = this.time;
        this.bindings.forEach(function(b){
            b.applyTime(time);
        });
    }
}

如果遇到空间问题，请尝试将Record s展平到Float32Array或您选择的其他二进制缓冲区中。

编辑：

请注意，此方法旨在节省内存并删除数据转换。一个节省了堆使用量和 GC，另一个节省了 CPU 时间。

相关文章：