Question

我读过的关于three.js动画的所有教程都是关于以圆形或随机轨迹移动物体。我的问题是我有一个129k行长.txt文件，其中包含原子随时间变化的特定xyz位置。每次迭代都以：

开头

256
Atoms. Timestep: 66000
1 0.702825 2.71217 2.71612
1 16.9592 2.64886 6.79019
1 0.681418 2.68359 10.8911
1 16.96 2.6822 14.9396
1 0.659922 6.77858 2.72442
1 16.9873 6.7709 6.77907
...

重复多达256个原子。忽略前两行，接下来的256行是来自动画的第一个“帧”的原子的xyz位置，总共有500帧（总共500 x 258 = 129000行）。我通过将前256个位置放入一个单独的文件并解析它来模拟动画的第一帧，现在我想使用文档的其余部分更新每个下一帧的原子位置。这是我用于解析第一帧位置的代码：

    fetch('Une_image_256_atomes.txt').then(response => response.text()).then(text => {
      const atoms = text.split('\n')  
        .map(line => line.trim())     
        .map(line => line.split(' ')) 
        .map(([size, x, y, z]) => ({ 
          size: Number(size), 
          x: Number(x), 
          y: Number(y), 
          z: Number(z) 
        }));

        for (var i = 0; i < atoms.length; i++) {
            atom = sphere.clone();
            atom.position.set( atoms[i].x, atoms[i].y, atoms[i].z );
            atom.name = "atom";
            scene.add( atom );
            group.push( atom );
        }

其中“group”是包含所有原子对象的数组。

最好将长文件剪切成500个较小的文件并循环使用相同的代码解析每个短文件，还是应该一次解析长文件？如果是后者，我如何在其中迭代以使动画的每一帧=接下来的256个位置？
有没有办法为每一帧设定时间？假设我希望动画更快或10毫秒（如果更慢），那就说1毫秒。
如何在不首先点击按钮的情况下让动画在页面加载时运行？

Answer 1

1）如果内存允许，请将它们全部保存在一个文件中，并将它们解析为2D数组，这样每个帧都有一组256个位置。考虑循环：

var i, j;
for(i = 0, i < numberOfFrames; ++i){
    for(j = 0; j < numberOfAtoms; ++j){
        moveAtom(j, framePositions[i][j]);
    }
}

2）使用区间（setInterval，clearInterval）设置您的位置更新和呈现的定时执行。

3）这就像执行一个解析数据文件并启动间隔的函数一样简单。这是JavaScript中的常见做法，网上有很多关于如何做到这一点的例子。

在三个j

1 个答案: