Have you ever used an online 3D editor that allows you to manipulate individual meshes by moving, scaling, and rotating them? This editor utilizes custom transform controls inspired by the TransformControls code from three.js. Here is a snippet of code from the mousemove event:
var intersect = intersectObjects(pointer, [xzPlane]); // Intersect the mouse pointer with a horizontal plane
var point = new THREE.Vector3();
point.copy(intersect.point);
point.sub(offset); // Coordinates from the mousedown event (start stretching)
// Calculate the 'scale' value based on the 'point' variable
// var scale = ...;
mesh.scale.x = scale;
This code works flawlessly as long as the mesh remains unrotated.
It is essential for the scaling to always occur within the world coordinate system. This raises a fundamental programming question.
Consider this transformation:
Which should lead to this result:
P.S. I believe that creating a custom mesh matrix might be the key solution, but my experience with matrices is limited. Any insights would be greatly appreciated!
Thanks!