sddwad<body>
  <div id="canvas"></div>
</body>ц
body {
  margin: 0;
  padding: 0;
  background: #012345;
  //overflow: hidden;
}

#canvas {
  position: absolute;
}

#testing {
  color: red;
  font-family: arial;
  position: absolute;
  top: 100px;
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );

var clock=new THREE.Clock();
var delta=0;
var jump_can = 1;
velocity_y = 0;


let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x202020);
document.getElementById("canvas").appendChild(renderer.domElement);


window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let height = window.innerHeight;
     renderer.setSize(width,height);
     camera.aspect = width / height;
     camera.updateProjectionMatrix();
});

let  player = { height:1.8, speed:0.2, turnSpeed:Math.PI*0.02,canShoot:0 };
let  keyboard = {};
let bullets = [];
let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

// let controls = new  THREE.OrbitControls(camera,renderer.domElement);
const planeGeo = new THREE.PlaneBufferGeometry(30, 30);
const planeMat = new THREE.MeshPhongMaterial({
     color: 0x25004D,
     side: THREE.DoubleSide,
});
const Plane = new THREE.Mesh(planeGeo, planeMat);
Plane.rotation.x = Math.PI * -.5;
scene.add(Plane);
Plane.position.y = -1;

const geometry = new THREE.SphereGeometry( 0.5, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

    const geometry1 = new THREE.CircleGeometry( 1, 32 );
     const material1 = new THREE.MeshPhongMaterial({
          color: 0x25004D,
          side: THREE.DoubleSide,
     });
     const circle = new THREE.Mesh( geometry1, material1 );
     scene.add( circle );
     circle.position.z = 15;
     circle.position.y = 1;
     const materialMini = new THREE.MeshPhongMaterial({
          color: 'red',
          side: THREE.DoubleSide,
     });
     const geometry2 = new THREE.CircleGeometry( 0.5, 32 );
     const circle1 = new THREE.Mesh( geometry2, materialMini);
     circle1.position.z = 15;
     circle1.position.y = 1;
     scene.add( circle1 );


camera.position.set(0, player.height, -5);
camera.lookAt(new THREE.Vector3(0,player.height,0));
let speed = 0.05;
const animate = function () {
     requestAnimationFrame( animate );
  
delta=clock.getDelta();
  
  for(var index=0; index<bullets.length; index+=1){
          if( bullets[index] === undefined ) continue;
          if( bullets[index].alive == false ){
               bullets.splice(index,1);
               continue;
          }

          bullets[index].position.add(bullets[index].velocity);
     }
       if(keyboard[87]){ // W key
          camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
          camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
     }
     if(keyboard[83]){ // S key
          camera.position.x += Math.sin(camera.rotation.y) * player.speed;
          camera.position.z += -Math.cos(camera.rotation.y) * player.speed;
     }
     if(keyboard[65]){ // A key
          camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
          camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;
     }
     if(keyboard[68]){ // D key
          camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
          camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
     }

     if(keyboard[37]){ // left arrow key
          camera.rotation.y -= player.turnSpeed;
     }
     if(keyboard[39]){ // right arrow key
          camera.rotation.y += player.turnSpeed;
     }
    if(keyboard[32] && player.canShoot <= 0){ // spacebar key
          // creates a bullet as a Mesh object
          var bullet = new THREE.Mesh(
               new THREE.SphereGeometry(0.05,8,8),
               new THREE.MeshBasicMaterial({color:0xffffff})
          );
          // this is silly.
          // var bullet = models.pirateship.mesh.clone();

          // position the bullet to come from the player's weapon
          bullet.position.set(
               sphere.position.x - 1 * Math.sin(camera.rotation.y-0.005),
               sphere.position.y + -0.20 ,
               sphere.position.z + 1 * Math.cos(camera.rotation.y)
          );

          // set the velocity of the bullet
          bullet.velocity = new THREE.Vector3(
               -Math.sin(camera.rotation.y),
               0,
               Math.cos(camera.rotation.y)
          );

          // after 1000ms, set alive to false and remove from scene
          // setting alive to false flags our update code to remove
          // the bullet from the bullets array
          bullet.alive = true;
          setTimeout(function(){
               bullet.alive = false;
               scene.remove(bullet);
          }, 1000);

          // add to scene, array, and set the delay to 10 frames
          bullets.push(bullet);
          scene.add(bullet);
          player.canShoot = 10;
     }
     if(player.canShoot > 0) player.canShoot -= 1;
     sphere.position.set(
          camera.position.x - 1 * Math.sin(camera.rotation.y),
          camera.position.y - 0.7 ,
          camera.position.z + 1 * Math.cos(camera.rotation.y)
     );
     sphere.rotation.set(
          camera.rotation.x,
          camera.rotation.y +1.35 ,
          camera.rotation.z,
     ); 
     renderer.render( scene, camera );
};

animate();

function keyDown(event){
     keyboard[event.keyCode] = true;
}

function keyUp(event){
     keyboard[event.keyCode] = false;
}

window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
  2. https://codepen.io/dannysgrant/pen/YNLNXp.js