Greetings and thank you in advance for your assistance! I have been facing challenges when creating shapes with the mouse using THREE.Shape. While I am able to draw and edit shapes that are centered on the canvas without any issues, I encounter problems when the shape is not at the center. It seems to be related to a local coordinates problem arising from points obtained via THREE.Raycaster.
//The vector3 'point' returned by Raycaster is used
ld.ui = 1;
const shapeVisible = new THREE.Shape();
shapeVisible.moveTo( point.x, point.y, ld.ui );
shapeVisible.lineTo( point.x, point.y, ld.ui );
const area = new THREE.ShapeGeometry(handle.shapeVisible);
//Code snippet to move a vertex
area.geometry.attributes.position.setXYZ( 0, point.x, point.y, ld.ui );
area.geometry.verticesNeedUpdate = true;
Everything functions correctly as long as the shape remains at the center of the canvas. However, when the shape is moved away from the center, there is a noticeable shift in the placement of the vertices when trying to reposition them using the following code:
//Again, 'pos' is the position returned by Raycaster
area.position.y = pos.y;
area.position.x = pos.x;
The issue arises once the shape is moved, causing it to jump as if its origin has shifted. Subsequently, attempting to edit a vertex results in extreme displacement.
https://i.sstatic.net/H1B1F.gif
To visualize the problem, refer to this simple fiddle: Whenever you try to move the green box, it jumps to the mouse position with its bottom left corner aligned with the cursor instead of the object's center. https://jsfiddle.net/ox4q89fs/26/
//Your JavaScript code here //Your CSS code goes here //Include necessary libraries and HTML elements here Your assistance in resolving this matter would be greatly appreciated. Thank you once again!