Javascript 对时间序列数据使用three.js

如何最好地使用时间序列数据来指导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并不是正确的答案

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

如果您遇到空间问题，请尝试将

记录

s展平到Float32Array或您选择的其他二进制缓冲区中

编辑：

---

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

首先看一看。如果一个基于TWEELIMEN的方法不是你想要的，那么考虑为每个对象创建一个3D路径，并在每个框架中调用函数<代码> GooPototAT（t）< /C>。看，例如中的动画。Director.js脚本当然是一个选项，我已经玩过了。我一点也不反对基于tweening的方法，但它只是看起来像是在数据列表中循环，并且链接可能数千个tweens似乎效率低下。播放听起来像是一个常规问题，我想知道我是否错过了一些显而易见的东西。谢谢你的3D路径链接。我现在就去看看。也许可以试试格林斯托克的TimelineLite。医生：我很好奇为什么这会被降级。这个人有一个timeseries数据，而不是一个可以由某种tween处理的转换。我认为使用吐温是完全错误的。如果要在屏幕上绘制视频图片，是否会使用800*600 1像素帧缓冲区和计时器来驱动切换？