I am facing an issue with my PointCloud object. I want to draw a bounding box around a specific point when clicked, but I can't figure out how to access that individual point within the PointCloud.
This is the raycasting code snippet I have been using...
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
}
});
While I can obtain the coordinates of the clicked point using intersects[0].point.x, passing intersects[0] to BoxHelper doesn't work as expected. It seems that intersects[0] is not an instance of Object3D. Similarly, utilizing intersects[0].object draws a box encompassing the entire PointCloud, whereas I specifically require it to be drawn only around the clicked point.
Is there a way to achieve this, and if so, what approach should I follow?
Thank you for any guidance provided!