Emulate claw machine movement in threejs

I am new to three js and trying to build a clawmachine using three js.
For now I am able to move a cube from xyz coordinates to another xyz coordinates.
I wanted to move the cube first in x axis and then move in y-axis.
I have created 2 functions for moveX and moveY.
But when I add them in animate loop the cube moves diagonally.
Is it possible to make it move in x axis first and then in y axis based on xyx coords?
here is my code demo link

Of course it is possible. First execute only the movement to one axis and set a check variable to false before. Then you constantly check whether the final value of the first movement is reached. If yes (set variable true) you stop this movement and start the next one.

See also other movements from the
Collection of examples from discourse.threejs.org .

LoadGLTFmove
SmoothTurnsToPath
Carousel
InteractionObjectHTML
Motion Guide

and more.

1 Like