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

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

非常感谢您的帮助！

Answer 1

查看这些示例，它们将帮助您使用 particle/point 云：

webgl_interactive_particles and webgl_interactive_raycasting_pointcloud.

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

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

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

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

Raycasting involving individual points in a Three.js PointCloud

javascript

three.js