解析和更新三個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中動畫的對象位置

回答

相關問題