如何最好地使用时间序列数据来指导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肯定能够给出正确的结果。但是它看起来是为了在镜头周围移动,而不是引导数百个网格的运动。在可能的数百个网格上将数千条推文链接在一起是否是实现脚本重放的最佳方式?
发布于 2014-11-03 03:55:09
你在场的桌子有点误导人。通常情况下,如果您有一个时间线,并且对象的数量是动态的--您将创建多个时间线,每个时间线一个--这使得操作整个集合变得更容易。
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时间。
https://stackoverflow.com/questions/22749591
复制相似问题