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();
            }
        }

如何用three.js中的DragControls围绕它的终点旋转一条线？

1 个答案: