Question

我正在创建一个用于在ThreeJ中旋转图像的工具，但在处理负尺度时它不起作用。

图像显示在使用THREE.PlaneGeometry元素创建的网格中，以及映射到correspongin图像的材质。

该工具是一个对象，它有一个名为Gizmo的元素（它是一个小网格），用户可以选择并拖动它来旋转对象。

为了进行旋转，我定义了一个角度和一个轴。角度由使用Gizmo的位置（原始和当前）和网格的位置创建的两个向量定义。

var gizmoOriginalPosition = this.gizmoOriginalPosition.clone().applyMatrix4( this.matrixWorld );
var imagePosition = this.imageToTransformOriginalPosition.clone().applyMatrix4( this.imageToTransformParentOriginalMatrix );

var vector1 = gizmoOriginalPosition.sub( imagePosition ).normalize();
var vector2 = point.sub( imagePosition ).normalize();

var angle = Math.acos( vector1.dot( vector2 ) );
var axis = new THREE.Vector3( 0, 0, 1 );

var ortho = vector2.clone().cross( vector1 );

var _m = this.imageToTransformOriginalMatrix.clone();
this.tempMatrix.extractRotation( _m );
var q = new THREE.Quaternion().setFromRotationMatrix( this.tempMatrix );
var _axis = axis.clone().applyQuaternion( q );

var f = ortho.dot( _axis );
f = f > 0 ? 1 : -1;
angle *= -f;

var q = new THREE.Quaternion().setFromAxisAngle( axis, angle );
var Q = new THREE.Quaternion().multiplyQuaternions( this.imageToTransformOriginalQuaternion, q );
imageToTransform.quaternion.copy( Q );

旋转轴始终为（0,0,1），因为网格是XY中的平面。 point是使用交叉平面的Gizmo的新位置。

定义角度的向量是世界坐标。 ortho是一个定义角度方向的矢量，因此Mesh在鼠标指针的方向上旋转。我用使用ortho和axis获得的f值定义角度的方向。旋转轴（0,0,1），使其方向为世界坐标（ortho为世界坐标）。

几乎在所有情况下都能正常工作，除非网格在X和Y中具有负刻度。此处图像以与鼠标指针相反的方向旋转。

感谢。

旋转负尺度

0 个答案: