Three.js中的PointCloud中涉及个体点的射线投射

Question

我有一个PointCloud对象，显示了几个点。我想在点击的点周围绘制一个边界框。不幸的是，我似乎无法找出如何访问PointCloud中的单个点，如果可能的话。

这是我正在使用的射线投射代码...

window.addEventListener('dblclick', function (ev) {
    var mouse = { x: 1, y: 1 };
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

    var raycaster = new THREE.Raycaster();

    raycaster.params.PointCloud.threshold = 15;
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
    raycaster.ray.set(camera.position, vector.sub(camera.position).normalize());
    scene.updateMatrixWorld();
    var intersects = raycaster.intersectObject(particles);

    if (intersects.length > 0) {

        console.log(intersects[0]);
        var hex  = 0x000000;

        var bbox = new THREE.BoundingBoxHelper(intersects[0], hex);
        bbox.update();
        scene.add( bbox );

    } else {
        // do nothing
    }
}
);

我可以使用 intersects[0].point.x 访问点击点的坐标。 但是，将 intersects[0] 传递给 BoxHelper 显然不起作用，因为 intersects[0] 不是一个 Object3D。同样，如果我使用 intersects[0].object，这会在整个 PointCloud 周围绘制一个框，而我只想在点击点周围绘制一个框。

这是否可能，如果可能，我该如何做呢？

非常感谢您的帮助！

- JoshG

Answer 1

请看以下示例，它们将帮助您处理粒子/点云：

webgl_interactive_particles 和 webgl_interactive_raycasting_pointcloud。

使用 intersects[0].index 您可以找到所相交点的索引。因此，您可以使用该索引来找到您的点：

var index = intersects[0].index;
var point = particles.geometry.vertices[ index ];

正如您所说，要绘制一个BoundingBox，您需要一个Object3D。单个粒子只是空间中的一个点，因此在该点周围绘制BoundingBox实际上将是大小为0的框。所以在这一部分我无法帮助您。

- Wilt