解析和更新三个js中动画的对象位置

我读过的有关three.js中动画的所有教程都是关于移动循环或随机轨迹中的对象。我的问题是，我有一个129k行长的.txt文件，其中包含随时间推移的原子的特定xyz位置。每次迭代开始于：解析和更新三个js中动画的对象位置

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个位置放入单独的文件并解析它来模拟我的动画的第一帧，现在我想使用文档的其余部分更新每个下一帧的原子位置。这里为i用于解析所述第一帧中的位置的代码：

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

，其中“烷基”是包含的所有原子的对象阵列。

是它更好地削减长文件到500个小的文件和循环解析每个短文件具有相同的代码或者我应该解析长文件一气呵成？如果它是后者，我如何在其中进行迭代，以便每个动画帧=接下来的256个位置？
是否有一种方法来设置每个帧的时间？比方说，如果我希望动画更快，或者如果速度更慢，则为10毫秒。
我该如何获得在页面加载时运行的动画，而无需先点击按钮？

来源

2017-08-16 Yujia Ding

我已经给出了答案，但请记住：** 1）**多个问题应该分成多个帖子，特别是当其中一个主题与其他主题无关时（例如解析文件与定时渲染无关，与在页面加载上运行脚本无关。）** 2）**虽然您的代码可以帮助我们了解您是如何解决问题的，但您没有提供任何有关显示/显示我们你有什么**尝试**。首先尝试一些东西非常重要，所以我们可以帮助您解决特定的问题/错误。 – TheJim01

1）如果内存允许，让他们都在同一个文件，并把它解析为一个二维数组，这样你有一组为每帧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中这是一种常见的做法，网络上有很多关于如何做到这一点的例子。

来源

2017-08-17 14:52:20 TheJim01

所以基本framePositions [i] [j] .x = x位置为一个原子，framePositions [i] [j] .y = y等？对于短文件，我不必考虑停止解析每258行，因为整个文件是258行，我如何循环获取二维数组呢？ –

@余家丁对不起。为了遍历你的文件，你可能需要手动完成，在用换行符（'\ n'）分割之后。你可以[从数组中分割出]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice）258“line”子数组拆分，并处理这些。正如我在评论中所说的，_try it_。做一个备份，如果你害怕破坏你的东西。如果您遇到困难，请回来再问一些问题。 – TheJim01

解析和更新三个js中动画的对象位置

回答

相关问题