How would i keyframe a sphere so pressing a button or key plays the animation once?

Questions
,
1

I have a catapult ball i want it to go from postion a to postion b than hit a wall which explodes only when the ball hits it.

I need a button for the user to press or a tick box, so for example a tick plays the animation once and unticking it resets the animation. I was told i could keyframe but have no idea how to,

heres the code i use at the moment that’s a increases speed for a ball that moves from left to right.

var controls = new function() {
    this.wallexplosionSpeed = 0.00;
    this.catapultballSpeed = 0.00;
}

keys.add(controls, 'wallexplosionSpeed', 0, 0.5);
keys.add(controls, 'catapultballSpeed', 0, 0.5);

function render() {
    angle += controls.catapultballSpeed;
    catapultball.position.x = 12 + (10 * (Math.cos(angle)));
    catapultball.position.y = 2 + (10 * Math.abs(Math.sin(angle)));
}
2

Hello jamster1992,

From what I understand, you want to animate the catapult when the user clicks a button.

  • The first option that comes to mind would be to create a 2D button and add the function call to the onclick event

  • 2nd option would be to create a 3D button mesh (any shape) and use the Raycaster object to trigger the event; This option is more complex than option 1, but I believe @mrdoob has created functions to make this process easy to implement.

Let me know which option suits you best, I will then give you sample code to get you started.

2 Likes
3

thanks i’ve changed my design to become a battering ram due to time constraints

i have another question here any help would much appreciatated -
https://discourse.threejs.org/t/would-i-edit-the-if-statement-to-allow-a-ram-reaches-a-certain-postion-the-wall-moves-back-a-postion/168