javascript - 使用带有时间序列数据的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);
        });
    }
}

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

编辑:

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