将 three.js 与时间序列数据一起使用

Question

如何最好地使用时间序列数据来指导 three.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   | ...

数据可能有数百行，甚至数千行。并且对象的数量也可以从数据集到数据集变化。

我已经阅读了有关使用 tween.js 和链接关键帧的内容。但是在初始化过程中创建和链接成千上万的补间并不是正确的答案。

tween.js 是正确的方法吗？还是我错过了可以更好地处理这种情况的延期？有什么类似的用例可以证明有用吗？

更新

所以Director.js 肯定能够给出正确的结果。但看起来它的目的是对场景周围的相机运动进行补间，而不是指导数百个网格的运动。在可能数百个网格上将可能数千个补间链接在一起是实现脚本重放的最佳方式吗？

Answer 1

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

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);
        });
    }
}

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

编辑：

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