Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

230
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda