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周围绘制一个框，而我希望它只是在点击的点周围。

这是可能的，如果可以的话，我该怎么做呢？

非常感谢您的帮助！

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的盒子。所以对于那个部分我无法帮助你。

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

1 个答案: