Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

224
Views
How to play a tween animation on key press multiple times

I am trying to make a robot that can perform certain animations when keys are pressed.

When I press the "J" key I would like the robot to jump up and down.

I am using Three.js and Tween.js to accomplish this. So far I have a scene made with light and a camera. I am creating the different parts of the robot through functions. I have an example of one of these functions below.

function createHead() {
      const head = new THREE.Mesh( new THREE.BoxGeometry(30, 30, 30),
        new THREE.MeshLambertMaterial({ color: 0x669999 }));
      head.position.y = 30;
      head.position.z = -250;
      head.rotation.y = 5;
      scene.add(head);

      var jumpTween = new TWEEN.Tween(head.position).to({y: head.position.y+20}, 1000).repeat(1).yoyo(true).start();
    }

Here is my function for updating

function update (event) {
      if (String.fromCharCode(event.keyCode) == "J" || isJumping) 
      {
        isJumping = true;
        TWEEN.update();
      }

      // Draw!
      renderer.render(scene, camera);

      // Schedule the next frame.
      requestAnimationFrame(update);
    }

When I press "J" my robot jumps once and only once. I cannot press "J" again to get the robot to perform another jump. I was hoping there would be away to just simply "call" a tween on command and have it play on command. However, it seems like TWEEN.update() is the only function that actually runs the tween and in this case, it only runs once. I have been reading the documentation for Tween.js but I am not finding anything helpful.

Edit: I have also tried adding this to my tween.

.onComplete(() => {isJumping = false})

so that it would set isJumping back to false when the animation completes but this did not work.

Thanks for the help.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!