Three.js: Stop Automatic Rotation While Mouse Is Clicked

I am playing around with three.js. I built a rotating cube, which you also can rotate around with the help of OrbitControls. Now I am aiming to stop the automatic rotation when the

Solution 1:

You can use the mousedown and mouseup event listeners.

Something like this:

var isMouseDown = false;

functioninit(){
    window.addEventListener('mousedown', onMouseDown);
    window.addEventListener('mouseup', onMouseUp);
}

functiononMouseDown(){
    isMouseDown = true;
}

functiononMouseUp(){
    isMouseDown = false;
}

functionanimate() {
    if(!isMouseDown){
        mesh.rotation.x += .015;
        mesh.rotation.y += .015;
        mesh.rotation.y += .015;
    }
    render();
    requestAnimationFrame( animate );
}

Here is a working codepen.