如何在世界轴上拉伸（缩放）网格

Question

有一个在线3d编辑器，您可以在其中编辑单个网格（移动，缩放，旋转）。 能够编辑使用基于Threejs的TransformControls代码的自定义转换控件实现的网格。 这是mousemove事件的片段：

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;

如果网格不旋转，则此代码效果很好。

需要缩放总是发生在世界坐标系上。 这是编程问题

例如，从此：

对此：

PS：我认为必须创建自定义网格矩阵，但是我对矩阵的经验很少

谢谢！

Answer 1

而不是设置旋转，像这样：

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

将相同的旋转应用于几何，而不是：

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

现在，您可以设置比例并获得所需的结果。

mesh.scale.z = 2;

小提琴： http ： //jsfiddle.net/Tm7Ab/5/

three.js r.67