Три JS Orbit Control Zoom,Pan & Move Listener

Я знаю, есть EventListener для управления орбитой, который запускает "изменения", но мне нужно, чтобы слушатели были более конкретными, такими как масштабирование, панорамирование и перемещение. Есть ли что-то подобное уже реализовано?

Ищете что-то подобное:

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

Или что-то типа того:

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

Я надеюсь, что ясно, чего я хочу достичь.

1 ответ

Решение

Хорошо, я решил это, просто слушая mousedown события в сочетании с mousemove. Это может быть не практичным во всех случаях, но для меня это сработало:

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
});
Другие вопросы по тегам