How to strech(scale) mesh on the world axis

Question

There is an online 3d editor where you can edit individual meshes (move, scale, rotate). Ability to edit meshes implemented using custom transform controls which based on threejs's TransformControls code. This is fragment from mousemove event:

var intersect = intersectObjects(pointer, [xzPlane]); // intersect mouse's pointer with horizontal plane

var point = new THREE.Vector3();
point.copy(intersect.point);
point.sub(offset); // coords from mousedown event (from start stretching)

// some code for 'scale' value calculating base on 'point' variable
// var scale = ...;
//

 mesh.scale.x = scale;

This code works well if the mesh does not rotate.

Requires scaling always happened to the world coordinate system. This is programming question

For example, from this:

To this:

PS I think that custom mesh matrix must be created, but I have very little experience with matrices

Thanks!

Answer 1

Instead of setting the rotation, like so:

mesh.rotation.set( Math.PI/4, 0, 0 );

apply the identical rotation to the geometry, instead:

var euler = new THREE.Euler( Math.PI / 4, 0, 0 );
mesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationFromEuler( euler ) );

Now, you can set the scale and get the result you want.

mesh.scale.z = 2;

fiddle: http://jsfiddle.net/Tm7Ab/5/

three.js r.67