Drag trough image sequence calc, other solution?

Currently I’m working on a AS3 project where people can view pre-rendered 360 degree image sequence of 3D scenes or models. However I’ve been trying to find a decent way to scroll trough an image sequence by: Click & Drag.

To give an impression what I mean, here a link to a WIP application:
http://www.makeit3d.nl/client/vicem46/3drotate/index.html

The rotation functions to swap the image sequence works perfectly. However the mouse drag function not. When you drag the mouse on a decent speed it’s doing the job fine. But when dragging on a low speed it hardly moves and feels really ugly.

The drag functionality works like:

  • on click, add event mouse movement listener
  • get current position where mouse has clicked
  • calculate: current mouse pos - clicked to start drag from
  • calculate if drag is to left or right direction, and rotate

Current code I created for this Click & Drag functionality is:


        /*------------------------------------------------
            StartDrag
            info: enable drag rotate modus
                - stop auto rotation
                - add mouse event listener, get mouse position
                - calc drag direction
                - rotate according to drag direction
        ------------------------------------------------*/
        public function StartDrag():void {
            vrStatus = "DRAG";
            if(vrDragStatus){
                vrContainer.addEventListener(MouseEvent.MOUSE_MOVE, getMousePos);
                var sum:int     = vrCurrDragPoint.x - vrLastDragPoint.x;
                vrLastDragPoint = vrCurrDragPoint;
                if (Math.abs(sum) > 5) {
                    if (sum > 0) {
                        RotateCCW();
                    } else {
                        RotateCW();
                    }
                }
            }
        }
        /*------------------------------------------------
            StopDrag
            info: stop drag and reset last drag point
        ------------------------------------------------*/
        public function StopDrag():void {
            vrStatus = "NONE";
            vrLastDragPoint = new Point(0, 0);
        }
        /*------------------------------------------------
            getMousePos
            info: get mouse position as x/y point
        ------------------------------------------------*/
        private function getMousePos(evt:MouseEvent):void {
            vrCurrDragPoint = new Point(evt.target.mouseX, evt.target.mouseY);
            //trace(vrCurrDragPoint);
        }

I hope someone can help me with creating a decent drag image sequence solution. I’ve ran out of ideas at the moment, tryed a few and the above one was so far the best.

Thanks already. :slight_smile: