CODEWITHSUNDEEP
three.jstrackball
Revanth Alampally
Revanth Alampally

Reputation: 75

what does "pan" in trackball control mean exactly

What does of the term "Pan" in trackball control in three.js exactly mean?

        controls.rotateSpeed = 1;
        controls.zoomSpeed = .5;
        controls.panSpeed = 1;

What is "panspeed" here?

Upvotes: 1

Views: 715

Answers (2)

Chris A.
Chris A.

Reputation: 131

panSpeed has units of pixels/length, i.e. you move your mouse cursor A pixels on the screen, the camera translates by one unit of length in world space of your scene.

For example, suppose you define a cube that is 1 meter x 1 meter x 1 meter. If your panSpeed is 100 pixels/meter, you would need to move your mouse cursor 100 pixels to translate the camera by 1 meter.

I dug up the source that pans the camera based on mouse movement, which I added towards the end of this explanation.

From what I see, first you start with a fractional change in the mouse cursor, which is measured between 0 and 1. The cursor at the top left of your window has position (x=0,y=0) and the bottom right it is (1, 1). Next, the fractional change is converted to units of length/pixels and depends on the right, left, top, bottom and zoom of the camera AND the width in pixels of your window. This fractional change in length/pixels can be read as follows: When you move the mouse cursor 1 pixel, the camera translates by B length in world space. One important part to consider is that the camera might be zoomed in by some factor, i.e. you panned the camera while zoomed in. The fractional change (length/pixels) also includes a camera zoom factor in the denominator and is unitless. To take into account the camera zoom, the distance from the camera position to the target (_eye.length()) is included in the expression below.

This expression calculates the new lateral and vertical change in world space units of length of the camera relative to the camera.

mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );

Which has the units below.

[Length]/[Pixels] * [Length] * [Pixels/Length] = Length

These next 2 expressions convert the translation relative to the camera to new positions of the camera in world space.

pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );

This is the function that computes the new position of the camera after panning.

// Three JS v 0.127.0
this.panCamera = ( function () {

    var mouseChange = new THREE.Vector2(),
        objectUp = new THREE.Vector3(),
        pan = new THREE.Vector3();

    return function panCamera() {

        mouseChange.copy( _panEnd ).sub( _panStart );

        if ( mouseChange.lengthSq() ) {

            if ( scope.object.isOrthographicCamera ) {

                var scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
                var scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;

                mouseChange.x *= scale_x;
                mouseChange.y *= scale_y;

            }

            mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );

            pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
            pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );

            scope.object.position.add( pan );
            scope.target.add( pan );

            if ( scope.staticMoving ) {

                _panStart.copy( _panEnd );

            } else {

                _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );

            }

        }

    };

}() );

Upvotes: 0

ds345
ds345

Reputation: 737

Panning in trackball control means, the object can be moved from any point to any other point. Panspeed like rotatespeed and zoomspeed will specify how fast or how slow should moving of the object happen. Panning means to just change the position of the object, it does not resize or change axis. Hope this helps.

Upvotes: 0

Related Questions