I'm currently experimenting with a raycaster to identify points on a 2D plane of points...
function dynamic(x) { x.dynamic = true; return x; }
geometry.addAttribute("position", dynamic(new THREE.BufferAttribute(positions, 3)));
geometry.addAttribute("color", dynamic(new THREE.BufferAttribute(colors, 3)));
var grid = new THREE.Points(geometry, material);
scene.add(grid);
function mouseDownHandler(event) {
if (event.button == 0) {
event.preventDefault();
var mouse = new THREE.Vector2();
var box = canvas.getBoundingClientRect();
mouse.x = ((event.clientX - box.left) / (box.right - box.left)) * 2.0 - 1.0;
mouse.y = ((event.clientY - box.bottom) / (box.top - box.bottom)) * 2.0 - 1.0;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(grid);
if (intersects.length > 0) {
// Why does my intersect not work?
// I _believe_ I'm calculating the mouse positions correctly.
// But, the intersects are always way off. (Or, I'm misinterpreting
// something...)
console.log("mouse: ", mouse);
console.log("First Intersect:", intersects[0]);
console.log("First Point:", intersects[0].point);
}
}
}
You can access the complete code here: for the webpage, and for the actual code..
The issue lies within the mouseDownHandler function. Essentially, when you click your mouse, I want it to indicate which point was actually clicked. However, when I click near the bottom left of the grid, the mouse coordinates approximate to {-1,-1}(which I believe is expected, right?) and they approximate to {1,1} near the top right.
How do I determine the index of the point that was clicked? I've attempted clicking on all four corner points, expecting at least one of them to be 0 considering how I constructed the data (using just 2 nested for loops). Yet, none of them are close to 0, and the points in intersects[0].point always appear significantly distant. Where am I making a mistake?
Thank you!