Reputation: 1089
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
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