I am currently working with Autodesk Forge, leveraging Three.js r71, and I am looking to implement a raycaster to identify clicks on various elements within a point cloud.
If anyone could provide a sample code snippet on how to achieve this using Three.js r71, that would be greatly appreciated.
Currently, I have registered an extension with the Forge API and am executing the code below within it. This code generates a point cloud and places the points at predetermined locations (stored within the cameraInfo array).
let geometry = new THREE.Geometry();
this.cameraInfo.forEach(function(e) {
geometry.vertices.push(e.position);
});
const material = new THREE.PointCloudMaterial({ size: 150, color: 0Xff0000, sizeAttenuation: true });
this.points = new THREE.PointCloud(geometry, material);
this.scene.add(this.points);
/* Event listeners setup */
document.addEventListener('mousemove', event => {
let mouse = {
x: (event.clientX / window.innerWidth) * 2 - 1,
y: -(event.clientY / window.innerHeight) * 2 + 1
};
let raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = 15;
let vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(this.camera);
raycaster.ray.set(this.camera.position, vector.sub(this.camera.position).normalize());
this.scene.updateMatrixWorld();
let intersects = raycaster.intersectObject(this.points);
if (intersects.length > 0) {
const hitIndex = intersects[0].index;
const hitPoint = this.points.geometry.vertices[hitIndex];
console.log(hitIndex);
console.log(hitPoint);
}
}, false);
However, the output appears to be inconsistent. In some camera positions, it continuously reports intersections within the point cloud (regardless of mouse position), while in other positions, it fails to detect any intersection at all.
In short, the raycaster does not consistently identify intersections between my point cloud and the mouse cursor.