javascript - Three.js 获取可见区域中心的粒子

Question

我有一个粒子系统，其中 1000 个粒子散布在屏幕上。当我使用 OrbitControls 进行缩放和平移时，我希望粒子最接近可视区域的中心。

我认为这有两个部分。首先，我们需要找到可视区域的中心顶点。接下来，我们需要对所有粒子运行距离公式，以找到距离中心顶点最近的粒子。希望有比这更有效的方法。第二部分使用蛮力相当简单。第一部分是我不确定的。如何找到可视区域的中心顶点？

Answer 1

您可能应该获得一个位于您正前方 10 个单位的点，然后获得距离该点最近的粒子。

这篇文章帮助我告诉你这一点，顺便说一句，我之前已经完成了这一切。

Three.js Projector and Ray objects

用于单击屏幕上的一个点，并从中获取矢量。

projector = new THREE.Projector();

// This is like clicking on the center of the screen, 0, 0 is center
straight_ahead = new THREE.Vector3(0,0,.5);

// Now we have straight_ahead relative to the camera
projector.unprojectVector(straight_ahead, camera);

// Now straight_ahead is just the direction of the camera, since we're taking away the camera's position from it
straight_ahead.sub(camera.position)

// It's a direction of where the camera is looking, so lets make it 10 units away( pick your own number)
straight_ahead.normalize().multiplyScalar(10)

// Now we we have a length of 10 units, we can get 10 units in front of the camera
straight_ahead.add(camera.position)

// At this point, straight ahead is a point in space 10 units in front of you, so lets find the closest point to that

// here's where you put a simple loop in
min_point = null
min_distance = 999999999
_.each( my_particles, function(particle) {
  distance = particle.position.distanceTo(straight_ahead)
  if (distance < min_distance) {
    min_point = particle
    min_distance = distance
  }
});

// now you have min_point, which should be the closest point to 10 feet in front of your face