I'm using echart to generate a 3D surface. I have reproduce a simplified version there /.

const chart = echarts.init(document.getElementById('chart'));

function generateSurfaceData() {
    const data = [];
    const xCount = 50;
    const yCount = 50;
    for (let i = 0; i < xCount; i++) {
        for (let j = 0; j < yCount; j++) {
            const x = i / xCount * 50;
            const y = j / yCount * 50;
            const z = Math.sin(x / 10) * Math.cos(y / 10) * 5; 
            data.push([x, y, z]);
        }
    }
    return data;
}

chart.setOption({
    tooltip: {},
    xAxis3D: {
        type: 'value',
        name: 'X Axis',
        min: 0,
        max: 50
    },
    yAxis3D: {
        type: 'value',
        name: 'Y Axis',
        min: 0,
        max: 50
    },
    zAxis3D: {
        type: 'value',
        name: 'Z Axis',
        min: -5,
        max: 5
    },
    grid3D: {
        viewControl: {
            projection: 'perspective', 
        },
        boxWidth: 100,
        boxDepth: 100,
        boxHeight: 50 
    },
    series: [{
        type: 'surface',
        data: generateSurfaceData(),
        shading: 'realistic',
        realisticMaterial: {
            roughness: 0.8,
            metalness: 0
        }
    }]
});

function zoomToPoint(chart, point) {
    const [x, y, z] = point;

    const option = chart.getOption();

    option.grid3D[0].viewControl.distance = 30;

    chart.setOption(option);
}

document.getElementById('zoom-button').addEventListener('click', () => {
    const pointToZoom = [25, 25, 2.5]; // x, y, z coordinates
    zoomToPoint(chart, pointToZoom);
});

<script src="@5/dist/echarts.min.js"></script>
<script src="@2/dist/echarts-gl.min.js"></script>

<div id="chart" style="width: 600px; height: 400px;"></div>
<button id="zoom-button" style="margin-top: 20px;">Zoom to Point</button>