tinytree
tinytree

Reputation: 1089

Three JS Orbit Control Zoom,Pan & Move Listener

I know, there is an eventlistener for orbit control that fires on 'change' but I need to have the listeners more specific, like zoom, pan and move. Is there something like that already implemented?

Looking for something like that:

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'onpan', myPanFunction );
controls.addEventListener( 'onzoom', myZoomFunction );
controls.addEventListener( 'onmove', myMoveFunction );

Or something like that:

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', myFunction(event){
    switch (event){
        case pan:

        //do something
        break;

        case zoom:

        //do something
        break;

        case move:

        //do something
        break;

        default:
        break;
    }
});

I hope its clear what I want to achieve.

Upvotes: 2

Views: 2696

Answers (1)

tinytree
tinytree

Reputation: 1089

Ok I solved it by just listening to mousedown events combined with mousemove. This might not be practicable in all cases, but for me it worked:

canvas = document.getElementById("canvas")

canvas.addEventListener("mousedown", function(e){

    // on rotate
    if(e.button === 0 && currentTutorialPage === 0 && tutorial){
        canvas.onmousemove = function(e) {          
            // do something
        }
    }

    // on zoom
    else if(e.button === 1 && currentTutorialPage === 1){
        canvas.onmousemove = function(e) {          
            // do something
        }
    }

    // on pan
    else if(e.button === 2 && currentTutorialPage === 2){
        canvas.onmousemove = function(e) {          
            // do something
        }
    }
});

// remove eventListener
canvas.addEventListener("mouseup", function(e){
    canvas.onmousemove = null
});

Upvotes: 4

Related Questions