While working in THREE.js, I've been experimenting with moving objects around on the screen based on mouse position. After exploring some sample codes, it appeared to be quite straightforward. Here's a snippet of code that I found useful from one of the examples:
function mouseMove(e){
mouse2D.x = ( (e.pageX-canvas.offsetParent.offsetLeft) / canvas.clientWidth ) * 2 - 1;
mouse2D.y = - ( (e.pageY-canvas.offsetParent.offsetTop) / canvas.clientHeight ) * 2 + 1;
if (selected) {
var ray = projector.pickingRay(mouse2D, PGL._camera).ray;
var targetPos = ray.direction.clone().addSelf(ray.origin);
targetPos.subSelf(_offset);
obj.position.x = initPos.x + targetPos.x;
obj.position.y = initPos.y + targetPos.y;
}
}
Although this works well for moving children within the scene directly, I encountered an issue when trying to move objects that have parent(s) which are rotated or scaled. How would you approach this challenge? Perhaps consider applying the object's matrixRotationWorld to the movement operation?
I am still grappling with these concepts and any guidance would be highly appreciated.