I have spent countless hours today diving deep into the documentation, tutorials, and stackoverflow questions in pursuit of a solution to this issue. I am pleading for your assistance – please take pity on me and help!
The problem at hand involves a watering can with an event listener attached to it. However, when I click on the can, nearby objects such as the tree trunk or a leaf (code not included) to the left end up being selected instead. This allows me to drag and drop those unintended objects around until they are out of range. If I drop them close to the watering can, they get selected again upon clicking. This behavior is not what I intended; my goal is for the actual watering can that was clicked on to be selected and then dragged and dropped accordingly. Although there's quite a bit of code involved here, I am unable to pinpoint where the issue lies anymore, so I've included almost all of it. It seems like the watering can believes it is located elsewhere or the ray is firing in a different direction. Please let me know if you need any further clarification or additional code snippets. While I only started learning three.js yesterday, I have a decent grasp of what should be happening here...and this isn't it!
const WateringCan = function() {
// Code block omitted for brevity
};
let wateringCan;
function createWateringCan() {
// Code block omitted for brevity
}
let plane;
function createPlane() {
// Code block omitted for brevity
}
let selection;
function onWateringCanMouseDown(e) {
// Code block omitted for brevity
}
function onDocumentMouseMove(e) {
// Code block omitted for brevity
}
function onDocumentMouseUp(e) {
// Code block omitted for brevity
}
I have tried various solutions already, including using computeBoundingBox() on elements with applyMatrix, rearranging mouse3D/raycaster in different ways, and moving the can far away (resulting in nothing getting selected). At one point, I had the event listener attached to the document, which resolved the selection issue but caused the watering can pieces to not stick together; each individual component could be dragged and dropped separately. While dragging everything on the page was entertaining, it defeated the purpose – I don't need every leaf on my tree to be movable.
Please lend a helping hand if you can! Wrestling with this challenge all day has taken a toll on my spirits. :D