如何在世界轴上拉伸(缩放)网格 [英] How to strech(scale) mesh on the world axis

问题描述

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

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

例如，从这里:

为此:

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

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

谢谢！

推荐答案

代替设置旋转，像这样:

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;

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

three.js r.67

three.js r.67

这篇关于如何在世界轴上拉伸(缩放)网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！