如何在世界軸上拉伸（縮放）網格

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