javascript - 使用 three.js 在场景中只显示一个粒子

Question

我正在尝试创建一个粒子随机漂浮在其表面上的球体。它会移动取决于 mousemove 上的位置。像这样的

奇怪的是，它只在 Canvas 上显示一个粒子。我正在使用 console.log(vertices) 进行调试，但它清楚地显示了数组中的所有 vertices。

My code in CodeSandBox

Answer 1

问题出在你的循环上。您只在循环外为 theta 和 phi 赋值一次，然后为所有 1600 个顶点赋予相同的值:

const theta = Math.acos(THREE.Math.randFloatSpread(2));
const phi = THREE.Math.randFloatSpread(360);

for (let i = 0; i < 1600; i++) {
  const vertex = new THREE.Vector3();

  vertex.x = distance * Math.sin(theta) * Math.cos(phi);
  vertex.y = distance * Math.sin(theta) * Math.sin(phi);
  vertex.z = distance * Math.cos(theta);

  vertices.push(vertex.x, vertex.y, vertex.z);
}

当您使用 console.log(vertices) 时，查看 x, y, z 值，您会发现它们全部重复。

你应该做的是重新分配一个新的 theta 和一个新的 phi inside 循环，这样每个顶点都有一个唯一的位置:

let theta, phi;
let x, y, z;

for (let i = 0; i < 1600; i++) {
  theta = Math.acos(THREE.Math.randFloatSpread(2));
  phi = THREE.Math.randFloatSpread(360);

  x = distance * Math.sin(theta) * Math.cos(phi);
  y = distance * Math.sin(theta) * Math.sin(phi);
  z = distance * Math.cos(theta);

  vertices.push(x, y, z);
}

您也不需要在每次迭代时创建一个 THREE.Vector3()，创建 1600 个 Vector3 只是为了立即丢弃是非常低效的。相反，您可以重复使用相同的 x, y, z 变量来避免所有这些对象构造成本。

See here for a working demo你的例子。我还将磅值缩小到 1。