JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://cdn.jsdelivr.net/keyboardjs/0.4.2/keyboard.js"></script>
<p>Press 'f','g','h' or 't' to move, and spacebar to shoot</p>

CSS

body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var distance;

var bullet = {
    rotationY:0,
    toCreate: false,
    
}

var tankSpeedX = 0;

KeyboardJS.on('space', function() {
    bullet.toCreate = true; 
    });

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 20;
    camera.position.y = 2;
    scene = new THREE.Scene();
    

    geometry = new THREE.CubeGeometry(6, 4, 10);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

    tankMesh1 = new THREE.Mesh(geometry, material);
    tankMesh1.rotation.y = 3.141/3;
    scene.add(tankMesh1);
    
    geometry = new THREE.CubeGeometry(3, 2, 5);
    tankMesh2 = new THREE.Mesh(geometry, material);
    tankMesh2.position.y = 3;
    tankMesh2.rotation.y = 3.141/3;
    scene.add(tankMesh2);
    
    geometry = new THREE.SphereGeometry(1);
    bulletMesh = new THREE.Mesh(geometry, material);
    
    

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    requestAnimationFrame(animate);
       
    if (bullet.toCreate == true)
    {
        scene.add(bulletMesh);
        bullet.toCreate = false;
        bullet.rotationY = tankMesh1.rotation.y
        bulletMesh.position.z = tankMesh1.position.z;
        bulletMesh.position.x = tankMesh1.position.x;
        bulletMesh.position.y = 3;
    }
    
    distance = (bulletMesh.position.z - tankMesh1.position.z) * (bulletMesh.position.z - tankMesh1.position.z)
        +
        (bulletMesh.position.x - tankMesh1.position.x) * (bulletMesh.position.x - tankMesh1.position.x);
    
    if (distance < 3000)
    {
        bulletMesh.position.z -=  1 * Math.cos(bullet.rotationY );
        bulletMesh.position.x -=  1 * Math.sin(bullet.rotationY );
    }
    
    if (distance > 3000)
 ...