涉及 Three.js 点云中各个点的光线投射

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]toBoxHelper显然不起作用，因为intersects[0]不是Object3D. 同样，如果我使用intersects[0].object，这会在整个 周围绘制一个框PointCloud，而我希望它仅围绕单击的点。

这可能吗？如果可以，我该怎么做？

非常感谢您的帮助！

Answer 1

检查这些示例，它们将帮助您处理粒子/点云：

webgl_interactive_articles和webgl_interactive_raycasting_pointcloud。

您intersects[0].index可以找到相交点的索引。所以你可以使用这个索引来找到你的观点：

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

就像你已经说过的，要绘制一个BoundingBox你需要一个Object3D. 单个粒子只是空间中的一个点，因此BoundingBox围绕该点绘制实际上是一个大小为 0 的盒子。所以对于这部分我无法帮助您。