Arrow

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();

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

camaraTop.position.z = -20;
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, 10, -10, 0.1, 1);
var cameraHelper1 = new THREE.CameraHelper(cameraBottom);
cameraHelper1.visible = true;
scene.add(cameraHelper1);

const controlsBottom = new OrbitControls(cameraBottom, rendererBottom.domElement);
controlsBottom.enabled = false;

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

var gridHelper = new THREE.GridHelper(100, 30);
scene.add(gridHelper);

const light = new THREE.PointLight(0xffffff, 2.0, 30);
light.position.set(0, 20, 0);
scene.add(light);

const light2 = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light2);

var animate = function () {
  requestAnimationFrame(animate);
  rendererBottom.render(scene, cameraBottom);
  rendererTop.render(scene, camaraTop)
  controlsBottom.update();
};

animate();

document.getElementById("forward").addEventListener("click", forward,...