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

Animation 在三个js中解析和更新动画的对象位置,animation,three.js,Animation,Three.js,我在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

我在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 );
        }
fetch('Une\u image\u 256\u atomes.txt')。然后(response=>response.text())。然后(text=>{
常量原子=text.split('\n')
.map(line=>line.trim())
.map(line=>line.split(“”))
.map(([size,x,y,z])=>({
尺寸:数量(尺寸),
x:数字(x),
y:数字(y),
z:编号(z)
}));
对于(var i=0;i
其中“group”是包含所有atom对象的数组

  • 将长文件剪切成500个较小的文件并循环使用相同的代码解析每个短文件更好吗?还是应该一次性解析长文件?如果是后者,我如何在其中迭代,以便动画的每个帧=下一个256个位置

  • 是否有一种方法可以设置每帧的时间?如果我希望动画更快,可以设置为1毫秒;如果希望动画更慢,可以设置为10毫秒

  • 如何让动画在加载页面时运行,而不必先单击按钮

  • <强> 1)< /强>如果内存允许,将它们全部保存在一个文件中,并将其解析成2D数组,以便每个帧都有一组256个位置。

    var i, j;
    for(i = 0, i < numberOfFrames; ++i){
        for(j = 0; j < numberOfAtoms; ++j){
            moveAtom(j, framePositions[i][j]);
        }
    }
    
    vari,j;
    对于(i=0,i
    2)使用间隔(,)设置位置更新和渲染的定时执行


    3)这就像执行一个函数解析数据文件并启动间隔一样简单。这是JavaScript中的常见做法,在web上有很多这样做的例子。

    我已经给出了答案,但请记住:1)多个问题应该分为多个帖子,特别是当其中一个的主题与其他主题无关(例如,解析文件与计时呈现无关,而计时呈现与在页面加载时运行脚本无关)2)虽然您的代码可以帮助我们了解您是如何解决问题的,但您没有提供任何信息来告诉/展示您所做的尝试。首先尝试一些东西很重要,这样我们可以帮助您解决特定的问题/错误。因此基本上框架位置[i][j]。x=x一个原子的位置,框架位置[i][j]对于短文件,我不必考虑停止解析每258行,因为整个文件是258行,我怎么循环得到二维数组?@ @ JujAdAc正确。对于循环通过您的文件,您可能需要手动完成,在您按行分割(<代码> \n < /代码>)。您可以258“行”。从拆分返回的数组中取出子数组,并对其进行处理。正如我在评论中所说的,请尝试。如果您害怕破坏您所拥有的,请进行备份。如果遇到问题,请返回并询问更多问题。