What is proper way to programmatically move map?

[PeterVermont]

The Orbit controls are quite nice but I also wanted to add control buttons.

I knwo that I did not do this 'correctly' in that I accessed internal variables. What is the correct way?

Here is how I did it (code derived from an example of OSMBuildings):

html:

    <!-- symbols defined at: https://graphemica.com/ -->
    <button class="move left" title="move left">&larr;</button>
    <button class="move right" title="move right">&rarr;</button>&nbsp;
    <button class="move back" title="move back">&uarr;</button>
    <button class="move forward" title="move forward">&darr;</button>&nbsp;
    <!-- north east arrow ? https://graphemica.com/%E2%86%97 -->
    <button class="tilt up" title="tilt up">&#8599;</button>
    <!-- left-side arc anticlockwise arrow https://graphemica.com/%E2%A4%B9 -->
    <button class="tilt down" title="tilt down">&#8601;</button>&nbsp;
    <button class="rotate left" title="rotate left">&#8635;</button>
    <button class="rotate right" title="rotate right">&#8634;</button>&nbsp;
    <button class="zoom in" title="zoom in">&#9547;</button>
    <button class="zoom out" title="zoom out">&#9473;</button>

javascript:

var controlButtons = document.querySelectorAll('.control button');
for (var i = 0; i < controlButtons.length; i++) {
    controlButtons[i].addEventListener('click', function (e) {
        var button = this;
        var title = button.title;
        var classList = button.classList
        var increment = classList.contains('forward') || classList.contains('right') || classList.contains('in') || classList.contains('down');
        var direction = increment ? 1 : -1;
        var angle = direction * .1;
        if (classList.contains('move')) {
            var distance = direction * 20;
            if (classList.contains('back') || classList.contains('forward')) {
                controls._controls.pan(0, distance);
            } else {
                controls._controls.pan(distance, 0);
            }
        } else if (classList.contains('tilt')) {
            controls._controls.rotateUp(angle);
        } else if (classList.contains('rotate')) {
            controls._controls.rotateLeft(angle)
        } else if (classList.contains('zoom')) {
            if (increment) {
                controls._controls.dollyOut(controls._controls.getZoomScale());
            } else {
                controls._controls.dollyIn(controls._controls.getZoomScale());
            }
        }
    });
} //end for loop over controls