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(0xFFFCFF);
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();
});

var player = { height:1.8, speed:0.2, turnSpeed:Math.PI*0.02 };
var keyboard = {};


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


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();
       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] && jump_can==1) {// space
    jump_can = 0;
    velocity_y = 16;
  }
camera.position.y+=velocity_y*delta;
  if(jump_can==0){
velocity_y-=9.8*2*delta;
if(camera.position.y<=-0.5){
jump_can = 1;
velocity_y=0;
camera.position.y=-0.0;
}
}
    sphere.position.set(
          camera.position.x - 5 * Math.sin(camera.rotation.y),
          camera.position.y - 0.5 ,
          camera.position.z + 5 * Math.cos(camera.rotation.y)
     );
     sphere.rotation.set(
          camera.rotation.x,
          camera.rotation.y ,
          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