Utilizing the transformControls for translating, rotating, and scaling objects in my scene has been successful. However, I am encountering an issue where the clickable area of geometries is offset:
https://i.sstatic.net/7SOA5.jpg
This means that clicking on the lower part of the object does not select it, but rather the upper part.
The problem is exacerbated when dealing with collada files.
I believe the issue lies within this section:
function onDocumentTouchStart(event){
event.preventDefault();
event.clientX = event.touches[0].clientX;
event.clientY = event.touches[0].clientY;
onDocumentMouseDown(event);
}
function onDocumentMouseDown(event){
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if(intersects.length > 0){
SELECTED = intersects[ 0 ].object;
scene.add(control);
control.attach(SELECTED);
} else{
scene.remove(control);
}
}
EDIT :
After some investigation, it turns out the issue was due to certain margins present...
However, now I am struggling with attaching transformControls to my object properly. While using transformControls, the problem persists. Interestingly, changing the material color upon click works seamlessly. Could there be margins associated with transformControls? Here is a snippet of what I tried:
if(intersects.length > 0){
SELECTED = intersects[ 0 ].object;
scene.add(control);
control.attach(SELECTED);
} else{
scene.remove(control);
}