Question

我知道，有一个用于“改变”时触发的轨道控制事件监听器，但我需要让监听器更具体，例如缩放，平移和移动。像这样已经实现的东西了吗？

正在寻找类似的东西：

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

我希望它清楚我想要实现的目标。

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

三个JS轨道控制缩放，平移和移动侦听器

1 个答案: