How to rotate a line around it's end point with DragControls in three.js?

szabcsee Source

I have modified DragControls.js by adding a constraint to move only the line on the y axis.

The line I use is this:

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

Here is my modification of Dragcontrols.js I have added constraints to the THREE.Dragcontrols function.

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;

};

That's how I apply it in the onDocumentMouseMove(event):

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;

    }

Where the debugger is I want to achive that if altKey is pressed and the mouse moved, the left end of the line is moving on the y axis while the right end point stays in the X and Y coordinates.

Basically the line rotates around its endpoint like a clock's hand.

Any idea how to achive this?

javascriptthree.jsrotation

Answers

answered 1 week ago szabcsee #1

Well the answer happens to be pretty simple, only need to figure out, how to calculate angle and directions.

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

comments powered by Disqus