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

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

编辑：

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

使用带有时间序列数据的three.js

1 个答案:

编辑：