Problem moving camera

HTML

<style>
         #top-camera
        {
            position: absolute;
            top:50px;
            left:10px;
            width: 1000px;
            height: 350px;
            clear: both;
            float: left;
        }
      #bottom-camera
        {
            position: absolute;
            top:420px;
            left:10px;
            width: 1000px;
            height: 400px;
            clear: both;
            float: left;
        }
    </style>
</head>

<body>
    <canvas id="top-camera"></canvas>
  <canvas id="bottom-camera" class="c"></canvas>
    <button id="forward" >forward</button>
    <button id="backward" >backward</button>
</body>

JavaScript

import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/controls/OrbitControls.js';

//creating a plane from points
var points = [];
points.push(new THREE.Vector3(-10, 0, 1));
points.push(new THREE.Vector3(-5, 3, -1));
points.push(new THREE.Vector3(-1, 1, 1));

let planePolygon = new THREE.Plane();
planePolygon.setFromCoplanarPoints(points[0], points[1], points[2]);

var coplanarPoint = new THREE.Vector3();
planePolygon.coplanarPoint(coplanarPoint);


const scene = new THREE.Scene();

const canvasTop = document.getElementById("top-camera");
const camaraTop = new THREE.PerspectiveCamera(50, 1, 0.1, 600);

camaraTop.position.z = -10;
camaraTop.position.y = 20;
camaraTop.position.x = 20;

//Top canvas
const rendererTop = new THREE.WebGLRenderer({
  canvas: canvasTop
});
rendererTop.setSize(
  document.getElementById("top-camera").clientWidth,
  document.getElementById("top-camera").clientHeight
);

const controlsTop = new OrbitControls(
  camaraTop,
  rendererTop.domElement
);

//Bottom canvas
const canvasBottom = document.getElementById("bottom-camera");
const rendererBottom = new THREE.WebGLRenderer({
  canvas: canvasBottom,
});
rendererBottom.setSize(
  document.getElementById("bottom-camera").clientWidth,
  document.getElementById("bottom-camera").clientHeight
);

const cameraBottom = new THREE.OrthographicCamera( -15, 15, 5, -5, 0.1, 10);
var cameraHelper1 = new THREE.CameraHelper(cameraBottom);
cameraHelper1.visible = true;
scene.add(cameraHelper1);

const controlsBottom = new OrbitControls(cameraBottom, rendererBottom.domElement);
controlsBottom.enabled = false;
cameraBottom.translateX(coplanarPoint.x * 2);
cameraBottom.translateY(coplanarPoint.y * 2);
cameraBottom.translateZ(coplanarPoint.z * 2);
controlsBottom.target = planePolygon.normal;

const geometry = new THREE.BoxGeometry(10, 10, 10);
var material3 = new THREE.MeshStandardMaterial({
  color: new THREE.Color("white")
});
const cube = new...