Question

我是three.js的新手，所以如果以前曾经问过这个问题我会道歉。我有这个外部.txt文件，其中包含256个原子的x，y，z位置。 .txt文件的第一行如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='crumb'>home</div>
<div class='crumb'>sky</div>
<div class='crumb'>sea</div>

第一行包含化合物中原子的数量，第一列包含原子的大小。其余值是每个原子的x，y，z值。到目前为止，我通过手动输入位置添加了第一个原子：

256
1 0.702825 2.71217 2.71612
1 16.9592 2.64886 6.79019
1 0.681418 2.68359 10.8911
...

我可以逐行打开并读取.txt文件，以存储x，y和z变量中的下一个位置吗？我该怎么做才能使用外部文件的信息？

Answer 1

您可以使用AJAX技术获取文件内容。

例如： Read this SO answer。
之后，您可以使用String#split功能将文件分成行和列。

例如： Read this SO answer
然后您可以将其作为Array处理。

Answer 2

使用fetch API：

fetch('myfile.txt').then(response => response.text()).then(text => {
  const atoms = text.split('\n')  // split into lines
    .map(line => line.trim())     // remove whitespace at the beginning and end
    .slice(1)                     // remove the first line
    .map(line => line
      .split(' ')                 // split by ' '
      .map(Number))               // and parse the parts to numbers
    .map(([size, x, y, z]) => ({ size, x, y, z })); // create objects from the arrays
});

atoms现在应包含以下内容：

[
  { size: 1, x: 0.702825, y: 2.71217, z: 2.71612 },
  { size: 1, x: 16.9592, y: 2.64886, z: 6.79019 },
  ...
]

我确定你可以弄清楚如何在Three.js中使用它。

循环遍历atoms可能如下所示：

atoms.forEach(({ x, y, z }) => { // using destructuring
  // ...
  sphere.position.set(x, y, z);
  // ...
});

或：

atoms.forEach(atom => { // normal forEach-loop
  // ...
  sphere.position.set(atom.x, atom.y, atom.z);
  // ...
});

或：

for (let i = 0, len = atoms.length; i < len; i++) { // normal for-loop
  // ...
  sphere.position.set(atoms[i].x, atoms[i].y, atoms[i].z);
  // ...
}

当然，您可以使用XMLHttpRequest代替fetch API。

如何从外部文件中读取和存储数据作为变量javascript three.js

2 个答案: