# Three.js simple jump

**URL:** <https://discourse.threejs.org/t/three-js-simple-jump/40411>\
**Category:** Questions\
**Tags:** math\
**Created:** [July 17, 2022, 6:19am UTC](https://discourse.threejs.org/t/three-js-simple-jump/40411 "2022-07-17T06:19:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lighty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighty/32/43283_2.png) [@Lighty](https://discourse.threejs.org/u/Lighty)\
**Post date:** [July 17, 2022, 6:19am UTC](https://discourse.threejs.org/t/three-js-simple-jump/40411/1 "2022-07-17T06:19:23Z")

</div>

Good day!

How i can create simple jump on keyboard controls?  
if(keyboard[32]){  
//  
}

https://codepen.io/Lighty/embed/preview/JjLEbEO?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=JjLEbEO

something like 0-2-0

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 17, 2022, 7:32am UTC](https://discourse.threejs.org/t/three-js-simple-jump/40411/2 "2022-07-17T07:32:22Z")

</div>

```javascript
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, -0.5, -15);
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.5;
}
}

  
  sphere.position.set(
  camera.position.x - Math.sin(camera.rotation.y + Math.PI / 6) * 0.3,
  camera.position.y,
  camera.position.z + 3 + Math.cos(camera.rotation.y + Math.PI / 6) * 0.75);

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

```