Moving and facing

by cristianrodriguezcanto

HTML

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

<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';

const scene = new THREE.Scene();

var pointsLine= [];
pointsLine.push(new THREE.Vector3(-20, 0, 0));
pointsLine.push(new THREE.Vector3(-5, 3, 0));
pointsLine.push(new THREE.Vector3(-1, 1, 0));
pointsLine.push(new THREE.Vector3(10, -1, 0));
pointsLine.push(new THREE.Vector3(25, -15, 0));
var geometryLine = new THREE.BufferGeometry().setFromPoints(pointsLine);
var line = new THREE.Line(geometryLine, new THREE.LineBasicMaterial({color: new THREE.Color("green")}))
scene.add(line);

var pointsLine1= [];
pointsLine1.push(new THREE.Vector3(-20, 0, 3));
pointsLine1.push(new THREE.Vector3(-5, 3, 3));
pointsLine1.push(new THREE.Vector3(-1, 1, 3));
pointsLine1.push(new THREE.Vector3(10, -1, 3));
pointsLine1.push(new THREE.Vector3(25, -15, 3));
var geometryLine1 = new THREE.BufferGeometry().setFromPoints(pointsLine1);
var line1 = new THREE.Line(geometryLine1, new THREE.LineBasicMaterial({color: new THREE.Color("yellow")}))
scene.add(line1);

var pointsLine2= [];
pointsLine2.push(new THREE.Vector3(-20, 0, -2));
pointsLine2.push(new THREE.Vector3(-5, 3, -2));
pointsLine2.push(new THREE.Vector3(-1, 1, -2));
pointsLine2.push(new THREE.Vector3(10, -1, -2));
pointsLine2.push(new THREE.Vector3(25, -15, -2));
var geometryLine2 = new THREE.BufferGeometry().setFromPoints(pointsLine2);
var line1 = new THREE.Line(geometryLine2, new THREE.LineBasicMaterial({color: new THREE.Color("magenta")}))
scene.add(line1);

let planePolygon = new THREE.Plane(new THREE.Vector3(0,0,1),-4);
//planePolygon.setFromCoplanarPoints(pointsLine2[0], pointsLine2[1], pointsLine2[2]);
//console.log(planePolygon)

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

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

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