Simulate walking animation threejs on key press and camera rotate

Hi Team

I am working on a walking simulator for my project, I have doubt regarding the walk cycle. I want the person walking animation based on keyboard arrow keys and also change the direction based on camera rotate. Like we see in First person shooter games.

I have tried few ways to do, but failed to do so.
I request you to help me in doing the animation.

Attached my source code for reference.
Model I am using for animation:

PS: Removed few js dependencies as file size is limited, sorry for the inconvienence.

Thank you in advance.New folder.rar (805.4 KB)

1 Like

Hello. Check this and this examples on how to do the walking / rotating / running animations in a smooth fashion.

Animation for rotating you should do in Blender or other 3D software, and blend it when character is rotating.

Hello @mjurczyk I looked into those animations
But I want to control the waking animation on keyboard and walking direction based on camera rotate.
I think you understand my problem.

Thank you

Basing on this would be probably the easiest then.

  1. To control standing / walking animation using keyboard, it should be enough to change these 2 weights based on key events:

Weights control which animation will be played and can transition between them. On key down set walk to 1, on key up set it back to 0 (set idle to equal 1 - walk ofc.)

  1. To rotate model in the same direction as the camera, you can use world direction vector of the camera and then adjust your model to point in the same direction (I think for your application only Y-axis would be necessary.)

Thank you @mjurczyk

I have tried adding the walking on keypress. But the problem again I am facing is, I also want the camera to move along with the person model, sometimes the camera is moving, sometimes the object is moving.

gltfLoader.load(‘/assets/3d_models/boy_animated/scene.gltf’, gltf => {

man_walk = gltf.scene;

man_walk.position.set(0, 0, 60);

man_walk.rotateY(210.5);

scene.add(man_walk);

mixer = new THREE.AnimationMixer(man_walk);

mixer.clipAction(gltf.animations[0]).play();

});

var xSpeed = 1;

var ySpeed = 2;

document.addEventListener(“keydown”, onDocumentKeyDown, false);

function onDocumentKeyDown(event) {

var keyCode = event.which;

if (keyCode == 87) {

    man_walk.position.z += ySpeed;

} else if (keyCode == 38) {

    man_walk.position.z -= ySpeed;

} else if (keyCode == 37) {

    man_walk.position.x -= xSpeed;

} else if (keyCode == 39) {

    man_walk.position.x += xSpeed;

}

};

But i am not getting how to use the World direction.
Could you help in doing so.

I have an example you could adapt,
https://sbcode.net/threejs/tween-animation-mixer/
In my example, the model walks to the location that was found using the raycaster and double clicking the plane. It is a position. You could have your own method to decide which position the model walks to.

1 Like

Bind key event as down to up, you can received correct key signal when animation loop;
For 2D axis, using draw circle formula to move;

moveX = curX + Math.cos( angle ) * step;
moveY = curY + Math.sin( angle ) * step;

1 Like

I am able to update the camera and person walking animation on keyboard key press.
But, when I press the left key, the persone should roatete to left and start walking.
I am unable to do that.
Please help me in doing so @mjurczyk @seanwasere
function updateMan(){

    var delta = clock.getDelta(); // seconds.

    if (mixer != null){

        mixer.update(delta);

    } 

    var moveDistance = 100 * delta; // 100 pixels per second

    var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second

    

    if ( keyboard.pressed("left") ){

        

        man_walk.position.x -= moveDistance;

        camera.position.x -= moveDistance;

    }

    if ( keyboard.pressed("right") ){

        man_walk.position.x += moveDistance;

        camera.position.x += moveDistance;

    }   

    if ( keyboard.pressed("up") ){

        man_walk.position.z -= moveDistance;

        camera.position.z -= moveDistance;

    }   

    if ( keyboard.pressed("down") ){

        man_walk.position.z += moveDistance;

        camera.position.z += moveDistance;

    }

    

    var relativeCameraOffset = new THREE.Vector3(0,50,200);

    camera.lookAt(man_walk.position);

}   

That is the code I tried.

There seems to be a lot of basics you are missing - if I can I’d suggest you sit down and read through a few step-by-step gamedev tutorials, also starting with 2D games (math and rotations are simpler there.)

As to what cxm meant: https://stackoverflow.com/questions/19355026/move-an-object-in-the-direction-its-facing-using-2d-html5canvas-and-ctx-rotate-f (it’s a 2D alternative to the direction vector I mentioned earlier.)

If you still insist on going with 3D though - you can rotate models using rotation property (in the same way you change position using the position prop.) I hope this helps and pushes you in a right direction?

1 Like

Thank you @mjurczyk for your words, I tried many ways and now I am able to get the point.
I tried to code it and it worked.

Thank you all for your help :slight_smile:

In my example,
https://sbcode.net/threejs/tween-animation-mixer/#srcclientclientts_1
See lines 251-253.
I use the quaternion.rotateTowards to turn the model to the desired direction.

In my raycaster, where I have decided my new point to walk towards, I set the targetQuaternion which then becomes the new quaternion my model will rotateTowards in during the render loop.
see line 169-177

This is just how I solved my problem. It was just easier for me instead of doing the trigonometry and deciding the shortest path to turn my model.

In summary,
I have an old point, and a new point,
the difference is the targetQuaternion,
I then make my model rotateTowards the targetQuaternion incrementally over a period of time.

Hi, could you show me how you can make it work? please, I have tried but I have not managed to do it

Awesome! These kind of things make learning 3D real fun. It’s cool to see things that’s possible.

2 Likes

Share your code would be a great help!

“Hello, I am new here. GIVE ME ALL YOU HAVE!!!”

nice 1st post