如何在three.js中用DragControls旋转一条直线的端点？

Question

我已经修改了DragControls.js，添加了一个约束，使其只在y轴上移动直线。

我使用的代码行如下：

material = new THREE.LineBasicMaterial( { color: 0xFF0000 } );
geometry.vertices.push(new THREE.Vector3( 0, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
scene.add( redline );
dragControls = new THREE.DragControls( objects, camera, renderer.domElement );

这是我对Dragcontrols.js的修改，我在THREE.Dragcontrols函数中添加了约束。

this.constrains = function(xyz) {

    if (xyz === undefined)
        xyz = 'xyz';

    moveX = moveY = moveZ = false;

    if (xyz.indexOf('x') > -1) {
        moveX = true;
    }

    if (xyz.indexOf('y') > -1) {
        moveY = true;
    }

    if (xyz.indexOf('z') > -1) {
        moveZ = true;
    }

    return this;

};

这就是我在onDocumentMouseMove(事件)中应用它的方式：

if ( _selected && scope.enabled ) {
        if (event.altKey === true) {
            rotationDrag = true;
        }

//TODO: somewhere here should be a rotationDrag check and if it's true 
than rotate the line instead of moving it
        if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {

            /**
             *  Constrain feature added
             */

            _intersection.sub( _offset );
            //_selected.position.copy( _intersection.sub( _offset ) );

            if (!rotationDrag) {
                if (moveX) _selected.position.x = _intersection.x;
                if (moveY) _selected.position.y = _intersection.y;
                if (moveZ) _selected.position.z = _intersection.z;
            } else {
                debugger;
            }
        }

        scope.dispatchEvent( { type: 'drag', object: _selected } );

        return;

    }

调试器在哪里我想实现的是，如果按下altKey并移动鼠标，线的左端在y轴上移动，而右端在X和Y坐标上移动。

基本上，这条线围绕其端点旋转，就像时钟的指针一样。

你知道怎么做到这一点吗？

Answer 1

答案很简单，只需要弄清楚，如何计算角度和方向。

         if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {

            /**
             *  Constrain feature added
             */

            _intersection.sub( _offset );
            //_selected.position.copy( _intersection.sub( _offset ) );
            if (!rotationDrag) {
                if (moveX) _selected.position.x = _intersection.x;
                if (moveY) _selected.position.y = _intersection.y;
                if (moveZ) _selected.position.z = _intersection.z;
            } else {
                _selected.rotateZ();
            }
        }