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

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;

如果网格不旋转，此代码可以正常工作。

要求缩放始终发生在世界坐标系中。这是编程问题

例如，从中：

对此：

P.S。我认为必须创建自定义网格矩阵，但我对矩阵的经验很少

谢谢！

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