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.
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.
Basing on this would be probably the easiest then.
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.)
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.)
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.
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.
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);
}
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.)
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?
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.
